一，ES6++#

1
// var   存在变量提升(在声明语句代码之前可以使用，不会报错)  let  const 存在暂时性死区(声明之后在声明语句后面代码才可以用)
2

3
console.log(a)             console..log(a)   报错        console.log(a) 报错
4
var a = 10                   let  a = 10                     const a = 10
5

6
// vat 声明的变量可以重复声明   let const声明的变量不能重复声明
7
var  a  = 10                let a = 10                  const  a = 10
8
var  a  = 20         let a = 20 报错             const  a = 14 报错
9
// var 没有块级作用域     let const 有块级作用域(例如：在while  for 循环中)
10
for(var i = 0;i<10;i++){}          for(let i = 0;i<10;i++){}
11
i泄漏为全局变量，存在于全局变量中       i有块级作用域
12

13
// var let 是声明变量，变量值可以改变     cosnt 声明常量，值不能改(准确来说，内存地址不能变),而且声明时必须赋值

1
// 箭头函数的额this是静态的，this始终指向函数声明时所在作用域下的this的值
2
function getname(){
3
    //name是zzl,直接调用的话this值指向window
4
}
5
    console.log(this.name);//zzl
6
let getname2=()=>{
7
    //而这个箭头函数是在全局作用域下声明的，所以this也是指向window
8
    console.log(this.name);//zzl
9
}
10

11
window.name='zzl';
12
const data={
13
    name:'wxl'
14
}
15

16
//直接调用
17
getname();//name是zzl,直接调用的话this值指向window
18
getname2();//而箭头函数是在全局作用域下声明的，所以this也是指向window
19

20
// call方法调用
21
getname.call(data);//此时普通函数this的值已经变为data了。
22
getname2.call(data);
23
//输出wxl,因为它的this依然指向函数getname2声明时所在作用域下的this的值window.name='zzl';
24

25
////////////////////////////////////////////////////////////////////////////////
26

27
// 不能作为构造实例化对象
28
let Person=(name,age)=>{
29
    this.name=name;
30
    this.age=age;
31
}
32
let me=new Person('zzl','22');//此时会报错，箭头函数不能作为实例化对象。
33

34
////////////////////////////////////////////////////////////////////////////////
35

36
//不能使用arguments变量
37
// arguments:用来保存实参的
38
let fn=()=>{
39
    console.log(arguments);
40
}
41
fn(1,2,3);//会报错，不用用来保存实参

1
// 省略小括号
2
let add=(n)=>{
3
    return n+n;
4
}
5
console.log(add(9));
6

7
//简写为下面----------
8

9
//当形参有且只有一个的时候，可以省略小括号
10
let add=n=>{
11
    return n+n;
12
}
13
console.log(add(9));
14

15
////////////////////////////////////////////////////////////////////////////////
16

17
//省略花括号
18
//当代码体只有一条语句的时候
19

20
let sum=(n)=>{
21
    return n*n;
22
};
23
console.log(sum(9));
24

25
//简写为下面----------
26

27
//当代码体只有一条语句的时候，此时return必须省略，而且语句的执行结果就是函数的返回值
28
let sum=(n)=>n*n;
29
console.log(sum(9));
30

31
//小括号和花括号同时省略----------
32
let sum=n=>n*n;
33
console.log(sum(9));

1
// 箭头函数适合与this无关的回调，比如定时器，数组的方法回调。
2
// 箭头函数不适合与this有关的回调，比如DOM元素的事件回调、对象的方法。
3

4
btn.addEventListener("click",function(){
5
    //此时普通函数的this指向事件缘
6
    //如果使用箭头函数，事件源将变成外部作用域的this值，即这个函数所在的作用域
7
})

1
// 箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this
2

3
function Person() {
4
  this.age = 0;
5

6
  setInterval(function growUp() {
7
    this.age++;   // 定时器中使用普通函数，this永远指向window,因为是window调用定时器  所以this.age 值得是Nan
8
  }, 1000);
9
}
10

11
var p = new Person();
12
// '------------------------------------'
13
function Person() {
14
  this.age = 0
15
  setInterval(()=> {   // 箭头函数没有自己this，只能往上一层去找
16
    console.log(this)  // Person对象
17
    this.age++;
18
    console.log(this.age)
19
  }, 1000);
20
}
21
var p = new Person();

1
var myObject = {
2
  foo: "bar",
3
  func: function () {
4
    var self = this;  // self = myObject
5
    console.log(this.foo);  // 'bar'
6
    console.log(self.foo);  // 'bar'
7
    (function () {
8
      console.log(this.foo); // undefined  // 立即执行函数里面this永远指向window
9
      console.log(self.foo); // 'bar'
10
    }());
11
  }
12
};
13
myObject.func();
14

15
// ----------------------------------------------------------------------------
16

17
function plugin () {
18
    this.a = 1
19
    this.b = {
20
        x: 1,
21
        confirm: function(title, callback) {
22
            this.title = title
23
            console.log(this, '2')
24
            callback()
25
        }
26
    }
27
    console.log(this, '1')
28
}
29
var obj = new plugin()
30
obj.b.confirm('弹窗', () => {
31
    console.log(this, '3')
32
})

1
1,this 的指向问题
2
  // 箭头函数没有自己的作用域，所以没有自己的this，箭头函数中的this指向箭头函数当前函数声明时的作用域链的上一层
3
  // 普通函数有自己的作用域
4
2，call() 和apply()
5
  // 箭头函数里this的指向不受call,apply的指向，只跟定义位置作用域链的上一层有关，而普通函数可以
6
3，箭头函数不能当构造函数，而且没有Prototype属性，而普通函数可以
7
4，箭头函数没有arguments对象，普通函数有arguments对象，箭头函数中的参数可以用...参数名称来获取剩余参数
8
5，箭头函数不能作为generator函数，普通函数可以

1
// 箭头函数里的this指向沿着其作用域链往上找

1
// 用于获取函数的实参，可以代替arguments。
2

3
function data(){
4
    console.log(arguments); // 输出的是一个对象
5
}
6
data('zzl','wxl');
7

8
// rest参数
9
function data(...args){
10
    console.log(args); //输出的是一个数组，可以使用filter some...
11
}
12
data('zzl','wxl');
13

14

15
// --------------------------------------------------------------
16

17
// rest参数必须放在参数最后。
18

19
function data(a,b,...args){
20
    console.log(a);//1
21
    console.log(b);//2
22
    console.log(args);//   [3,4,5]
23
}
24
data(1,2,3,4,5)
25

26
// --------------------------------------------------------------------------------------
27

28
const obj1={
29
    q:'zzl'
30
}
31
const obj2={
32
    s:'wxl'
33
}
34
const data={...obj1,...obj2}; //相当于合并了两个对象
35
console.log(data);  //  {q:'zzl',s:'wxl'}

1
// 数据类型的声明
2
let sym = Symbol()
3
// 作用：保证每一个对象的名字都是独一无二的
4

5
// 可以接受字符串作为参数，作位对Symbol实例的描述
6
let sym = Symbol('aini')
7
// symbol 的参数是一个对象，可以调用该对象的toString 方法将其转换为字符串，然后生成一个symbol值
8
// symbol函数的参数只是对当前Symbol 值的描述，因此相同参数的Symbol函数返回的值是不相等的
9
let s1 = SYmbol('s1')  s2 = Symbol('s1')  cosnole.log(s1 === s2)  // false
10

11
// symbol值不能与其他类型的值进行运算，否则会报错
12

13
//symbol 值可以显示转换为字符串和Boolean 但是不能转换为Number
14

15
// Object.getOwnPropertySymbol 方法可以获取指定对象的所有Symbol属性名
16

17
// symbol声明的属性是没办法通过Object.key() 拿到，所以可以实现私有属性

1
// Symbol.iterator 为每一个对象定义了默认的迭代器。该迭代器可以被for ... of 循环使用

1
// Array
2
// Argunments
3
// Set
4
// Map
5
// String
6
// TypedArray
7
// NodeList
8

9
// 这个接口就是对象里面的一个属性，属性的名字叫Symbol.iterator，也可以自己对结构进行布置iterator接口。
10

11
// -------------------------------------------------------------------------------------------
12

13
for( let i in data){
14
  i是键名
15
}
16
for( let i of data){
17
  i是键值
18
}
19
const arr=['zzl','wxl'];
20
console.log(arr);
21
//arr里面就有Symbol.iterator这个属性。

1
// 先创建一个指针对象，指向当前数据结构的起始位置
2
// 第一次调用对象的next方法，指针自动指向数据结构的第一个成员
3
// 接下来不断调用next方法，指针一直往后移动，直到指向最后一个成员
4
// 每次调用next方法就会返回一个包含value和done属性（是否完成）的对象
5

6
let xiyou = ['唐曾','孙悟空','猪八戒','沙僧']
7

8
let iterator = xiyou[Symbol.iterator]();
9

10
// 调用对象的next方法
11
console.log(iterator.next())  // {value:'唐曾',done: false}
12
console.log(iterator.next()) // {value:'孙悟空',done: false}
13
console.log(iterator.next()) // {value:'猪八戒',done: false}
14
console.log(iterator.next()) // {value:'沙僧',done: false}
15
console.log(iterator.next()) // {value:undefined,done: true}

1
//声明一个对象
2
const data={
3
    name:'zzl',
4
    lis:[
5
        'wxl',
6
        'll',
7
        'hll'
8
    ],
9

10
    //自己给某些结构加上iterator接口
11
    [Symbol.iterator](){
12
        //索引变量
13
        let index=0;
14
        let _this=this;
15
        return {
16
            //返回一个指针对象，即创建一个指针对象
17
            next:function(){
18
                //创建对象的next方法
19
                // 返回一个包含value和done属性（是否完成）的对象
20
                if(index < _this.lis.length){
21
                    const result =  { value:_this.lis[index], done:false};
22
                    index++;
23
                    return result;
24
                }else{
25
                    return {value: undefined, done:true};
26
                }
27
            }
28
        };
29
    }
30
}
31

32
//自定义遍历这个对象
33
for(let v of data){
34
    console.log(v);
35
}
36
console.log('--------------------')
37
console.log(data);

1
// Iterator 是一个接口，用于处理所有不同的数据结构遍历器。只要数据结构定义了Iterator接口时可以用for of 来循环遍历
2

3
// for of 循环的执行过程
4
    var arr = ['blue','green','yellow','balck','orange']
5
    let it = iterator(arr)
6
    console.log(it.next())
7
    console.log(it.next())
8
    console.log(it.next())
9
    console.log(it.next())
10

11
    function iterator(arr){
12
      let nextIndex = 0
13
      return {
14
        next: function() {
15
          return nextIndex < arr.length ? {
16
            value: arr[nextIndex ++] ,done: true
17
          } : {
18
            value : undefined,done : false
19
          }
20
        }
21
      }
22
    }
23

24
// Iterator 接口部署在数据结构的Symbol.iteratro属性
25
// 一个数据结构只要具有Symbol.Iterator属性，就可以认为是'可遍历的'
26
// Symbol.Iterator 属性是一个函数，每次运行会返回一个生成器对象包含俩属性value和done
27

28
// 原生具备Iterator接口的数据结构
29
// Array   Map   Set   String   函数的arguments对象
30

31
// 伪数组转换为真正数组的方法
32
1， Array.prototype.slice.call(arguments)
33
2, Array.from(arguments)
34

35
//

1
// 第一个参数：数组元素；
2
// 第二个参数：数组索引；
3
// 第三个元素：数组对象本身
4

5
var numbers = [1,2,3,4,5,4,3,2,1];
6
numbers.forEach(function(item,index,array){
7
    console.log(item,index,array[index]);
8
});
9

10
// -----------------------------------------------------------
11
// 为每个元素加 1
12
var data = [1,2,3,4];
13
data.forEach(function(v,i,a){
14
  a[i] = v + 1;
15
    //会改变原数组元素
16
});
17
console.log(data);
18

19
// 如果只关心数组元素的值，可以只使用一个参数，额外的参数将被忽略
20

21
// ------------------------------------------------------------------
22
// 求和
23
var data = [1,2,3,4];
24
var sum = 0;
25
data.forEach(function(value){ //第一个参数数组元素，相当于遍历多有元素；
26
    sum += value;
27
    //不会改变原数组元素；
28
});
29
console.log(sum);
30

31
// -------------------------------------------------------------------
32

33
// （1）forEach()方法无法在所有元素都被传递给调用的函数之前终止遍历，即没有像 for 循环中使用的 break 语句；
34
// （2）如果要提前终止，必须把 forEach()方法放在 try 块中，并能抛出一个异常：
35
function foreach(a,f,t){
36
    try{
37
        a.forEach(f, t);
38
    }
39
    catch(e){
40
        if(e === foreach.break) return;
41
        else throw e;
42
    }
43
}
44
foreach.break = new Error("StopIteration");

1
//（1）最相似的是 every()和 some()，它们都是数组的逻辑判定：用于判定数组元素是否满足某个条件；
2
//（2）对 every()，传入的函数必须对每一项都返回 true，这个方法才返回 true；
3
//（3）而 some()是只要传入的函数对数组中的某一项返回 true，就会返回 true，否则返回 false；
4

5
var numbers = [1,2,3,4,5,4,3,2,1];
6
var everyResult = numbers.every(function(item,index,array){
7
    return (item > 2);
8
});
9
console.log(everyResult); // false
10

11
var someResult = numbers.some(function(item,index,array){
12
  return (item > 2);
13
});
14
console.log(someResult); // true
15

16
// （4）一旦 every()和 some()确定该返回什么值时，它们就会停止遍历数组元素；
17
// （5）（some()在判定函数第一次返回 true 后就返回 true，但如果判定函数一直返回 false，它将会遍历整个数组；every()恰好相反，它在判定函数第一次返回 false 后就返回 false，但如果判定函数一直返回 true，它将会遍历整个数组）。
18
// （6）根据数学上的惯例，在空数组上调用时，every()返回 true，some()返回 false；

1
//（1）返回的是数组元素是调用的数组的一个子集；
2
//（2）回调函数是用来逻辑判定的，该函数返回 true 或 false；如果返回的是 true 或真值，则该函数处理的数组元素就被添加到返回的子集数组中；
3
//（3）filter()方法会跳过稀疏数组中缺少的元素，它的返回数组总是密集的
4

5
var numbers = [1,2,3,4,5,4,3,2,1];
6
var filterResult = numbers.filter(function(item,index,array){
7
  return item>2;
8
});
9
console.log(filterResult);
10

11
var evenResult = numbers.filter(function(value,index){
12
  return index % 2 == 0; // [1, 3, 5, 3, 1] index 是索引
13
});
14
console.log(evenResult);
15

16
// 压缩稀疏数组
17
var sparse = [1,,,4];
18
var dense = sparse.filter(function(){
19
  return true; //过滤稀疏元素
20
});
21
console.log(dense);
22

23
// 压缩并删除 undefined 和 null 元素
24
var sparse = [1,null,3,undefined,,6];
25
var dense = sparse.filter(function(v){
26
  return v !== undefined && v != null;
27
});
28
console.log(dense);
29

30
//（注：该方法返回的是符合条件的数组元素；）

1
//（1）将调用的数组的每个元素传递给回调函数，并将调用的结果组成一个新数组返回；
2
//（2）其不会修改原始数组，如果是稀疏数组，返回的也是相同方式的稀疏数组，即具有相同的长度、相同的缺失元素；
3

4
var numbers = [1,2,3,4,5,4,3,2,1];
5
var mapResult = numbers.map(function(item,index,array){
6
  return item*2;
7
});
8
console.log(mapResult);
9

10
//-------------------------------------------------
11
var a = [1,null,3,undefined,5];
12
var b = a.map(function(v){
13
  return v * v;
14
});
15
console.log(b);
16
// --------------------------------------------
17

18
//不做任何处理
19
var spare = [1,,4,null,undefined,NaN,6];
20
var dense = spare.map(function(v,i,a){
21
});
22
console.log(dense);
23

24
// ----------------------------------------------------
25
// 返回所有数组元素
26
var spare = [1,,4,null,undefined,NaN,6];
27
var dense = spare.map(function(v,i,a){
28
  return v;
29
});
30
console.log(dense);
31

32
// -----------------------------------------------------------
33
//能处理的元素进项处理，空元素返回空元素；
34
var spare = [1,,4,null,undefined,NaN,6];
35
var dense = spare.map(function(v,i,a){
36
  return v*v; //进行数据类型转换，由于 null 和 undefined 不能进行数据类型转换});
37
console.log(dense) //，所以都返回 NaN

1
//（1）reduce()和 reduceRight()；这两个方法都会迭代数组的所有项，然后构建一个最终返回的值；
2
//（2）其中，reduce()方法从数组的第一项开始，逐个遍历到最后；而 reduceRight 则从数组的最后一项开始，向前遍历到第一项；
3
//（3）这两个方法都接收两个参数：调用的函数 callbackfn 和作为归并基础的初始值initialValue（可选的）；
4
//（4）这个函数接收 4 个参数：前一个值、当前值、项的索引和数组对象；其返回的任何值都会作为第一个参数自动传给下一项；第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项
5

6

7
// 求和
8
var values = [1,2,3,4];
9
var sum = values.reduce(function(prev,cur,index,array){
10
  return prev + cur;
11
});
12
console.log(sum); // 10
13
    // 第一次遍历：prev=1 cur=2；
14
    // 第二次遍历：prev=3 cur=3；
15
    // 第三次遍历：prev=6 cur=4；
16
    // 第四次遍历：prev=10
17
/*
18
    说明：第一次执行回调函数，prev 与 cur 分别为数组的第 1 和第 2 项，即 prev 是 1，cur 是 2；第二次，
19
    prev 是第一次执行的结果，即 3（1+2 的结果），cur 是数组的第三项，即是 3，以此类推；
20
    reduce()参数函数的参数也可以只使用两个参数，如：
21
*/
22

23
//-------------------------------------------------------------------------------
24
// 求和
25
var values = [1,2,3,4];
26
  var sum = values.reduce(function(prev,cur){
27
return prev + cur;
28
});
29
console.log(sum); // 10
30

31
// ----------------------------------------------------------------------------------
32
// 求积
33
var product = values.reduce(function(prev,cur){
34
  return prev * cur;
35
});
36
console.log(product); // 24
37

38
//------------------------------------------------------------------------------
39
// 求最大值
40
var max = values.reduce(function(prev,cur){
41
  return prev > cur ? prev : cur;
42
});
43
console.log(max); // 4
44
// reduce()方法的第二个参数 initialValue 是回调函数的第一个参数 previousValue 的初始值；如：
45
// 把以上所有示例添加第二个参数，如：
46
var values = [1,2,3,4];
47
var sum = values.reduce(function(prev,cur){
48
return prev + cur;
49
},2); // 12
50

51
/*
52
意思就是 pre 不是第一项，而是给 pre 赋一个值，cur 从第一项开始迭代说明，第一次调用时，prev 为 initialValue 值，即为 2，cur 为数组第一项，即为 1；第二次调用，prev 为 3，cur 为 2，以此类推；reduceRight()的作用类似，只不过方向相反，即按照数组索引从高到低（从右到左）处理数组；如：
53
*/
54
var values = [1,2,3,4,5];
55
var sum = values.reduceRight(function(prev,cur,index,array){
56
  return prev + cur; //21
57
},6);
58
//pre 的初始值为 6；
59
console.log(sum); // 15
60

61

62
// ---------------------------------------------------------------------
63
// 求 2^(3^4)，乘方操作的优先顺序是从右到左
64
var a = [2,3,4];
65
var big = a.reduceRight(function(accu, value){
66
  return Math.pow(value, accu);
67
});
68
console.log(big);
69

70
//在空数组上，不带初始值参数的 reduce()将导致类型异常；如果数组只有一个元素并且没有指定初始值，或者一个空数组并且指定了一个初始值，该方法只是简单的返回那个值而不会调用回调函数；
71

72
var a = [];
73
// var b1 = a.reduce(function(x,y){return x + y}); // no initial value 会报错
74
// var b2 = a.reduce(function(x,y){return x + x}); / /也会报错
75
var b3 = a.reduce(function(x,y){return x + y},3); //只返回初始值
76
console.log(b3); // 3
77

78
// （1）使用 reduce()还是 reduceRight()，主要取决于要从哪头开始遍历数组；除此之外，它们完全相同。
79
//（2）reduce()和 reduceRight()是典型的函数式编程；有些地方，会把其回调函数称为化简函数，这个化简函数的作用就是用某种方法把两个值组合或化简为一个值，并返回化简后的值；如以上的示例，化简函数通过各种方法，组合了两个值

1
function * fun(arg){
2
    console.log(arg); //输出aaa
3
    let one = yield 111;
4
    console.log(one); //输出bbb
5
    let two = yield 222;
6
    console.log(two); //输出ccc
7
    let three = yield 333;
8
    console.log(three); //输出ddd
9
}
10
let a=fun('aaa');
11
console.log(a.next());//第一次调用next
12
//next方法可以传入实参
13
//第二次调用next的实参将作为第一个yield的整体返回结果
14
console.log(a.next('bbb')) // 输出{value: 222, done: false}
15
console.log(a.next('ccc')) // 输出{value: 333, done: false}
16
console.log(a.next('ddd')) // 输出{value: undefined, done: true}

1
// 实例1：在控制台每隔一秒分别打印111,222,333
2
// 回调地狱
3

4
    setTimeout(() => {
5
        console.log(111);
6
        setTimeout(() => {
7
           console.log(222);
8
            setTimeout(() => {
9
               console.log(333);
10
           }, 3000);
11
       }, 2000);
12
     }, 1000);
13

14
// 解决方法
15
    function one(){
16
        setTimeout(()=>{
17
            console.log(111);
18
            a.next(); //定时器运行完调用下一个，实现了异步编程
19
        },1000)
20
    }
21
    function two(){
22
        setTimeout(()=>{
23
            console.log(222);
24
            a.next();
25
        },2000)
26
    }
27
    function three(){
28
        setTimeout(()=>{
29
            console.log(333);
30
            a.next();
31
        },3000)
32
    }
33

34
    function *fun(){
35
        yield one();
36
        yield two();
37
        yield three();
38
    }
39

40
//调用生成器函数
41
let a=fun();
42
a.next();
43
结果演示
44

45
// -------------------------------------------------------------------------------------------------
46
// 实例2 模拟获取用户数据，订单数据，商品数据
47
    function one(){
48
        setTimeout(()=>{
49
            let data='用户数据';
50
            a.next(data);//第二次调用next的实参将作为第一个yield的整体返回结果
51
        },1000)
52
    }
53
    function two(){
54
        setTimeout(()=>{
55
            let data='订单数据';
56
            a.next(data);
57
        },1000)
58
    }
59
    function three(){
60
        setTimeout(()=>{
61
            let data='商品数据';
62
            a.next(data);
63
        },1000)
64
    }
65
    function *fun(){
66
        let users= yield one();
67
        console.log(users); //用户数据 作为第一个yield的整体返回结果
68
        let orders= yield two();
69
        console.log(orders); // 订单数据
70
        let goods= yield three();
71
        console.log(goods); // 商品数据
72
    }
73
    //调用生成器函数
74
    let a=fun();
75
    a.next();

1
cosnt fs = require('fs')
2

3
fs.readFile('./aini.txt',(err,data) => {
4
    // 如果失败，则抛出异常
5
    if(err) throw err;
6
    // 如果没哟出错，则输出内容
7
    console.log(data.toString())
8
})
9

10
// 使用Promise封装
11
cosnt p = new Promise(function(resolve,reject){
12
    fs.readFile('./aini.txt',(err,data) => {
13
        // 如果失败，则抛出异常
14
        if(err) reject(err)
15
        // 如果没哟出错，则输出内容
16
        resolve(data)
17
  })
18
})
19

20
p.then(function(value){
21
    console.log(value.toString())
22

23
},function(resson){
24
    console.log('读取失败！！！')
25

26
})

1
const p = new Promise(function(resolve,reject){
2

3
    cosnt xhr = new XMLHttpRequest()
4

5
    xhr.open('GET','https://api.apiopen.top/getJoke')
6

7
    xhr.send()
8

9
    xhr.onreadystatechange = function(){
10
        if (xhr.randyState == 4){
11
            // 判断状态码
12
            if (xhr.status >= 200 && xhr.status <300){
13
                // 表示成功
14
                resolve(xhr.response)
15
            }else{
16
                reject(xhr.status)
17
            }
18
        }
19
    }
20
})
21

22
p.then(function(value){
23
    console.log(value.toString())
24

25
},function(resson){
26
    console.log(reason)
27
})

1
const p = new Promise((resolve,reject){
2
   setTimeout(() => {
3
    resolve('用户数据')
4
  }，1000)
5
})
6

7
// 调用,then方法的结果也是promise对象，结果由回调函数的结果决定
8
// 1,如果回调函数返回的结果是非promise类型的数据，状态为成功，返回值为对象的成功值，如果不写return，默认返回undefined，也是成功的promise
9
    const p1 = p.then(value => {
10
       console.log(value)
11
       return '11232'  // 成功的Promise
12
    }.err => {
13
       console.warn(reason)
14
    })
15

16
// 2,如果返回的是promise对象，则这个promise对象的返回结果决定，then方法返回的结果
17
    const p1 = p.then(value => {
18
       console.log(value)
19
       return new Promise(funtion(resolve,reject){
20
            resolve('ok')  // 成功，则then方法返回结果是成功
21
            reject('失败了')  // 失败，则then方法返回的结果是失败的
22
        )
23
    }.err => {
24
       console.warn(reason)
25
    })
26

27
// 如果抛出错误，then 也是个失败的结果
28
    const p1 = p.then(value => {
29
       console.log(value)
30
       throw new Error('出错啦') // then的状态为rejected
31
    }.err => {
32
       console.warn(reason)
33
    })
34

35

36
// 链式调用
37
p.then(value=> {
38
    return new Promise(function(resoleve,reject){
39
        resolve()
40
    })
41
},reason => {
42

43
}).then(value=> {
44
         return new Promise(function(resoleve,reject){
45
        resolve()
46
    })
47
},reason => {
48

49
}).then(value=> {
50
         return new Promise(function(resoleve,reject){
51
        resolve()
52
    })
53
},reason => {
54

55
})