es6知识点概述2

10. 默认值和解构，在传参时可以设置默认值，解构是将赋值简单化

尽量使用对象默认值与解构，传参时进行解构，={}，这样就可以在调用createSundae()时不出错，如果使用[scoops = 1, toppings = ['Hot Fudge']]，调用时就需要createSundae([undefined, ['Hot Fudge', 'Sprinkles', 'Caramel']]);第一个设为undefined

function createSundae({scoops = 1, toppings = ['Hot Fudge']} = {}) { … }
createSundae({toppings: ['Hot Fudge', 'Sprinkles', 'Caramel']});

11. Symbol,一种新的数据类型,每个值代表唯一的，数据类型：USONB you are so niub

Undefined,String,Symbol,Number,null,Object,Boolean(7种)

创建symbol

 //创建symbol
 let s1 = Symbol('lisi')
 let s2 = Symbol('lisi')
 console.log(s1 === s2)//false
 //另一种创建方式Symbol.for()
 let s3 = Symbol.for('lisi')
 let s4 = Symbol.for('lisi')
 console.log(s3 === s4)//true

在别人写的对象里需要添加方法时，得需要看看是否有重复的名字，这个时候就可以自己定义一个对象，用symbol代表唯一性

        //向obj添加up方法
        let obj = {
            name:'lisan',
            up() {
                console.log('好好学习')
            }
        }
        let obj2 = {
            up: Symbol()
        }
        obj[obj2.up] = function () {
            console.log("我是symbol中的up方法")
        }
        console.log(obj);

运行结果：[图片上传失败...(image-f6db8b-1617184184147)]

另一种写法：

        let youxi = {
            name: '狼人杀',
            [Symbol('say')]: function () {
                console.log("可以发言");
            }
        }
        console.log(youxi)

运行结果：[图片上传失败...(image-ab1a00-1617184184147)]

Symbol的内置属性

比如对象的Symbol.isConcatSpreadable属性等于一个布尔值，表示该对象用于Array.prototype.concat()时，是否可以展开。
```
let arr2 = ['c', 'd'];
arr2[Symbol.isConcatSpreadable] = false;
['a', 'b'].concat(arr2, 'e') // ['a', 'b', ['c','d'], 'e']
```

12. 什么是迭代？遍历器Iterator(迭代器)，是一种接口，只要部署了iterator接口，就可以进行遍历操作，Iterator是Symbol下的函数

在for(let i = 0;i < arr.length;i++)这里边的i顺着循环一层一层的向下遍历，这就是迭代
原生具有iterator接口的数据（可用for of遍历）

Array,Arguments,Set,Map,String,TypeArray,NodeList

工作原理：

//1.创建一个指针对象，指向起始位置
const arr = ['唐僧','悟空','猪八戒']
let iterator = arr[Symbol.iterator]();
console.log(iterator);
//2. 第一次调用next方法，指向第一个成员
//3. 再调用next方法，指向下一个成员，直到最后一个
//4. next方法中有value和done属性，value是值，done是false,true，true说明遍历完成
console.log(iterator.next());

iterator实例

//iterator实例,用for of对obj中的arr进行遍历
        const obj = {
            name: 'iterator',
            arr: [
                'xiaoming',
                'xiaoliu',
                'xiaoxiao'
            ],
            [Symbol.iterator]() {
                let _this = this;
                let i = 0;
                return {
                    next() {
                        if (i < _this.arr.length) {
                            const result = {
                                value: _this.arr[i],
                                done: false
                            }
                            i++;
                            return result;
                        }else {
                            return {
                                value: undefined,
                                done: true
                            }
                        }
                    }
                }
            }
        }
        for (let i of obj){
            console.log(i);
        }

13. for of?for in? for循环

for循环需要跟踪计数器和退出条件，for in不用计数逻辑和退出条件，但是仍然是用index访问数组值，并且向数组（或对象）中添加额为方法时，他会遍历出来

for循环

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (let i = 0; i < digits.length; i++) {
  console.log(digits[i]);
}

for in循环

Array.prototype.decimalfy = function() {
  for (let i = 0; i < this.length; i++) {
    this[i] = this[i].toFixed(2);
  }
};

const digits = [0, 1];

for (const index in digits) {
  console.log(digits[index]);
}

运行结果是：

function() {
for (let i = 0; i < this.length; i++) {
this[i] = this[i].toFixed(2);
}
}

for offor of里边的值是数组中的值，不是index，也可以直接写退出条件，不会将增加的额外的方法遍历出来

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const digit of digits) {
  console.log(digit);
}

14. 生成器 Generator，是一种特殊的函数，进行异步编程

写法：有* ；有yield，通过next()方法调用，返回结果是value值和done

 function * gen() {
     yield 111;
     yield 222;
 }
//调用生成器函数
 let iterator = gen()
 console.log(iterator.next());
 console.log(iterator.next());
 console.log(iterator.next());

[图片上传失败...(image-698166-1617184184147)]

[图片上传失败...(image-c61092-1617184184147)]

传参，第一个next调用不返回数值

function * gen(arg) {
    console.log(arg);
    let one  = yield 111;
    console.log(one);
    let two = yield  222;
    console.log(two);
}
//调用生成器函数
let iterator = gen('a');
console.log(iterator.next('b'));//第一次调用不返回
console.log(iterator.next('c'));
console.log(iterator.next('d'));

运行结果：[图片上传失败...(image-3176c1-1617184184148)]

生成器实例：

1s后在控制台输出111,2s后输出222,3s后输出333

a. 使用回调函数

//1.回调函数套用
        setTimeout(function () {
            console.log(111)
            setTimeout(function () {
                console.log(222)
                setTimeout(function () {
                    console.log(333)
                },3000)
            },2000)
        },1000)

b. 使用生成器

//2. 使用Generator
        function one() {
            setTimeout(function () {
                console.log(111)
                iterator.next(two())
            },1000)
        }
        function two() {
            setTimeout(function () {
                console.log(222)
                iterator.next(three())
            },2000)
        }
        function three() {
            setTimeout(function () {
                console.log(333)
            },3000)
        }
        function * gen() {
            yield one();
            yield two();
            yield three();
        }
        //调用生成器函数
        let iterator = gen();
        iterator.next(one());

模拟获取用户数据订单数据商品数据

      function getUsers() {
            setTimeout(function () {
                let data = '用户数据'
                iterator.next(data)
            },1000)
        }
        function getOrders() {
            setTimeout(function () {
                let data = '订单数据'
                iterator.next(data)
            },1000)
        }
        function getGoods() {
            setTimeout(function () {
                let data = '商品数据'
                iterator.next(data)
            },1000)
        }
        function * gen() {
            let users = yield getUsers();
            console.log(users)
            let orders = yield getOrders();
            console.log(orders);
            let goods = yield getGoods();
            console.log(goods);
        }
        //调用生成器函数
        let iterator = gen();
        iterator.next()