第二章：ES6基础---rest参数、Symbol、迭代器、生成器、Promise、Set

一：rest参数（ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments）

     ES5 获取实参的方式
         function date(){
             console.log(arguments);
         }
         date('孙悟空','唐僧','猪八戒');


     rest 参数
         function date(...args){
             console.log(args);// filter some every map 
         }
         date('孙悟空','唐僧','猪八戒');

         rest 参数必须要放到参数最后
         function fn(a,b,...args){
             console.log(a);
             console.log(b);
             console.log(args);
         }
         fn(1,2,3,4,5,6);

二：spread扩展运算符

扩展运算符（spread）也是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列，对数组进行解包。

 『...』 扩展运算符能将『数组』转换为逗号分隔的『参数序列』
        

声明一个数组 ...
        const xiyouji = ['孙悟空','猪八戒','沙师弟'];
         => '孙悟空','猪八戒','沙师弟'

         
声明一个函数
        function mingzhu(){
            console.log(arguments);
        }

        mingzhu(...tfboys);

三：Symbol（新的原始数据类型 ）

它是 JavaScript 语言的第七种数据类型，是一种类似于字符串的数据类型。

（1）Symbol 基本使用

特点：

1) Symbol 的值是唯一的，用来解决命名冲突的问题

2) Symbol 值不能与其他数据进行运算

3) Symbol 定义 的 对象属 性 不能 使 用 for…in 循 环遍 历 ，但 是可 以 使 用 Reflect.ownKeys 来获取对象的所有键名

注: 遇到唯一性的场景时要想到 Symbol

   创建Symbol
        let s = Symbol();
         console.log(s, typeof s);
        let s2 = Symbol('university');
        let s3 = Symbol('university');
   Symbol.for 创建
        let s4 = Symbol.for('university');
        let s5 = Symbol.for('university');

   //用Symbol来创建对象属性


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

        console.log(youxi)

（2）Symbol 内置值

除了定义自己使用的 Symbol 值以外，ES6 还提供了 11 个内置的 Symbol 值，指向语言内部使用的方法。可以称这些方法为魔术方法，因为它们会在特定的场 景下自动执行。

Symbol.hasInstance	当其他对象使用 instanceof 运算符，判断是否为该对 象的实例时，会调用这个方法
Symbol.isConcatSpreadable	对象的 Symbol.isConcatSpreadable 属性等于的是一个 布尔值，表示该对象用于 Array.prototype.concat()时， 是否可以展开。
Symbol.species	创建衍生对象时，会使用该属性
Symbol.match	当执行 str.match(myObject) 时，如果该属性存在，会 调用它，返回该方法的返回值。
Symbol.replace	当该对象被 str.replace(myObject)方法调用时，会返回 该方法的返回值。
Symbol.search	当该对象被 str.search (myObject)方法调用时，会返回 该方法的返回值。
Symbol.split	当该对象被 str.split(myObject)方法调用时，会返回该 方法的返回值。
Symbol.iterator	对象进行 for...of 循环时，会调用 Symbol.iterator 方法， 返回该对象的默认遍历器
Symbol.toPrimitive	该对象被转为原始类型的值时，会调用这个方法，返 回该对象对应的原始类型值。
Symbol. toStringTag	在该对象上面调用 toString 方法时，返回该方法的返 回值
Symbol. unscopables	该对象指定了使用 with 关键字时，哪些属性会被 with 环境排除。

四：迭代器

遍历器（Iterator）就是一种机制。它是一种接口，为各种不同的数据结构提 供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作。

1) ES6 创造了一种新的遍历命令 for...of 循环，Iterator 接口主要供 for...of 消费

2) 原生具备 iterator 接口的数据(可用 for of 遍历)

a) Array

b) Arguments

c) Set

d) Map

e) String

f) TypedArray

g) NodeList

3) 工作原理

a) 创建一个指针对象，指向当前数据结构的起始位置

b) 第一次调用对象的 next 方法，指针自动指向数据结构的第一个成员

c) 接下来不断调用 next 方法，指针一直往后移动，直到指向最后一个成员

d) 每调用 next 方法返回一个包含 value 和 done 属性的对象

注: 需要自定义遍历数据的时候，要想到迭代器。

（1）迭代器

        //声明一个数组
        const xiyou = ['唐僧','孙悟空','猪八戒','沙僧'];

        使用 for...of 遍历数组
         for(let v of xiyou){
             console.log(v);
        }

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

        //调用对象的next方法
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());

 （2）迭代器自定义遍历对象

 //声明一个对象
        const mingzhu = {
            name: "西游记",
            stus: [
                '孙悟空',
                '沙师弟',
                '猪八戒',
                '唐僧'
            ],
            [Symbol.iterator]() {
                //索引变量
                let index = 0;
                //
                let _this = this;
                return {
                    next: function () {
                        if (index < _this.stus.length) {
                            const result = { value: _this.stus[index], done: false };
                            //下标自增
                            index++;
                            //返回结果
                            return result;
                        }else{
                            return {value: undefined, done: true};
                        }
                    }
                };
            }
        }

        //遍历这个对象 
        for (let v of mingzhu) {
            console.log(v);
        }

五：生成器

生成器函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。

代码说明：

1) * 的位置没有限制

2) 生成器函数返回的结果是迭代器对象，调用迭代器对象的 next 方法可以得到 yield 语句后的值

3) yield 相当于函数的暂停标记，也可以认为是函数的分隔符，每调用一次 next 方法，执行一段代码

4) next 方法可以传递实参，作为 yield 语句的返回值

（1）生成器函数（生成器其实就是一个特殊的函数）

当next方法调用一次，则执行一个代码行块。

        //函数代码的分隔符
        function * gen(){
            // console.log(111);
            yield '111';
            // console.log(222);
            yield '222';
            // console.log(333);
            yield '333';
            // console.log(444);
        }

      let iterator = gen();
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());

（2）生成器函数参数

       function * gen(arg){
            console.log(arg);
            let one = yield 111;
            console.log(one);
            let two = yield 222;
            console.log(two);
            let three = yield 333;
            console.log(three);
        }

        //执行获取迭代器对象
        let iterator = gen('AAA');
        console.log(iterator.next());
        //next方法可以传入实参
        console.log(iterator.next('BBB'));
        console.log(iterator.next('CCC'));
        console.log(iterator.next('DDD'));

六：Promise 

Promise 是 ES6 引入的异步编程的新解决方案。语法上 Promise 是一个构造函数， 用来封装异步操作并可以获取其成功或失败的结果。

1) Promise 构造函数: Promise (excutor) {}

2) Promise.prototype.then 方法

3) Promise.prototype.catch 方法

（1）Promise基本语法

  //实例化 Promise 对象
        const p = new Promise(function(resolve, reject){
            setTimeout(function(){
                //
                // let data = '数据库中的用户数据';
                // resolve
                // resolve(data);

                let err = '数据读取失败';
                reject(err);
            }, 1000);
        });

        //调用 promise 对象的 then 方法
        p.then(function(value){
            console.log(value);
        }, function(reason){
            console.error(reason);
        })

（2）Promise封装读取文件

//1. 引入 fs 模块
const fs = require('fs');

//2. 调用方法读取文件
// fs.readFile('路径', (err, data)=>{
//     //如果失败, 则抛出错误
//     if(err) throw err;
//     //如果没有出错, 则输出内容
//     console.log(data.toString());
// });

//3. 使用 Promise 封装
const p = new Promise(function(resolve, reject){
    fs.readFile("路径", (err, data)=>{
        //判断如果失败
        if(err) reject(err);
        //如果成功
        resolve(data);
    });
});

p.then(function(value){
    console.log(value.toString());
}, function(reason){
    console.log("读取失败!!");
});

（3）Promise封装AJAX

        // 接口地址: https://www.jingdong.com
        const p = new Promise((resolve, reject) => {
            //1. 创建对象
            const xhr = new XMLHttpRequest();

            //2. 初始化
            xhr.open("GET", "https://www.jingdong.com");

            //3. 发送
            xhr.send();

            //4. 绑定事件, 处理响应结果
            xhr.onreadystatechange = function () {
                //判断
                if (xhr.readyState === 4) {
                    //判断响应状态码 200-299
                    if (xhr.status >= 200 && xhr.status < 300) {
                        //表示成功
                        resolve(xhr.response);
                    } else {
                        //如果失败
                        reject(xhr.status);
                    }
                }
            }
        })
        
        //指定回调
        p.then(function(value){
            console.log(value);
        }, function(reason){
            console.error(reason);
        });

（4）Promise的then方法

//创建 promise 对象
        const p = new Promise((resolve, reject)=>{
            setTimeout(()=>{
                resolve('用户数据');
                // reject('出错啦');
            }, 1000)
        });

//调用 then 方法  then方法的返回结果是 Promise 对象, 对象状态由回调函数的执行结果决定


//如果回调函数中返回的结果是 非 promise 类型的属性, 状态为成功, 返回值为对象的成功的值

         const result = p.then(value => {
             console.log(value);
            1. 非 promise 类型的属性
              return 'iloveyou';
            2. 是 promise 对象
              return new Promise((resolve, reject)=>{
                   resolve('ok');
                  reject('error');
             });
            3. 抛出错误
             throw new Error('出错啦!');
             throw '出错啦!';
         }, reason=>{
           console.warn(reason);
         });

        //链式调用
        p.then(value=>{

        }).then(value=>{

        });

（5）Promise的catch方法

  const p = new Promise((resolve, reject)=>{
            setTimeout(()=>{
                //设置 p 对象的状态为失败, 并设置失败的值
                reject("出错啦!");
            }, 1000)
        });

         p.then(function(value){}, function(reason){
             console.error(reason);
         });

        p.catch(function(reason){
            console.warn(reason);
        });

（6）Promise的实例查找文件

//引入 fs 模块
const fs = require("fs");
//使用 promise 实现
const p = new Promise((resolve, reject) => {
    fs.readFile("路径1", (err, data) => {
        resolve(data);
    });
});

p.then(value => {
    return new Promise((resolve, reject) => {
        fs.readFile("路径2", (err, data) => {
            resolve([value, data]);
        });
    });
}).then(value => {
    return new Promise((resolve, reject) => {
        fs.readFile("路径3", (err, data) => {
            //压入
            value.push(data);
            resolve(value);
        });
    })
}).then(value => {
    console.log(value.join('\r\n'));
});

 七：Set

ES6 提供了新的数据结构 Set（集合）。它类似于数组，但成员的值都是唯 一的，集合实现了 iterator 接口，所以可以使用『扩展运算符』和『for…of…』进 行遍历，集合的属性和方法：

1) size 返回集合的元素个数

2) add 增加一个新元素，返回当前集合

3) delete 删除元素，返回 boolean 值

4) has 检测集合中是否包含某个元素，返回 boolean 值

5) clear 清空集合，返回 undefined

       //声明一个 set
        let s = new Set();
        let s2 = new Set(['大事儿','小事儿','好事儿','坏事儿','小事儿']);

        //元素个数
        // console.log(s2.size);
        //添加新的元素
        // s2.add('喜事儿');
        //删除元素
        // s2.delete('坏事儿');
        //检测
        // console.log(s2.has('糟心事'));
        //清空
        // s2.clear();
        // console.log(s2);

        for(let v of s2){
            console.log(v);
        }