ES6特性

ES6 rest参数
ES6引入rest参数，用于获取函数的实参，用来代替arguments，arguments输出结果是一个

function fn1() {
            console.log(arguments);
        }
        fn1(1, 2, 3, 1)
//输出结果是对象形式

function fn(a, b, ...args) {
            console.log(a);
            console.log(b);
            console.log(args);
        }
        fn(1, 2, 3, 4, 5)
//输出结果args是数组，这样可以使用数组的一些方法

扩展运算符…
1.可以拼接数组 在调用函数时做实参使用
2.数组的克隆
3.将伪数组转为真数组 […divs ] 可以将对象转化为真数组 就可以使用数组的方法

Symbol基本使用
ES6引入了一种新的原始数据类型symbol，表示独一无二的值，他是js中的第七种数据类型，是一种类似于字符串的数据类型
1）Symbol的值是唯一的，用来解决命名冲突的问题
2）Symbol值不能与其他数据进行运算
3）Symbol定义的对象属性不能使用for…in 遍历循环，但是可以使用Reflect.ownKeys来获取对象的所有键名

let s =Symbol( ) //用函数声明Symbol
let s=Symbol.for( )//此时的Symbol是对象

        let game = {
            name: '狼人杀',
            //用symbol为game添加唯一属性
            [Symbol('say')]: function() {
                console.log("我可以说话");
            },
            [Symbol("bao")]: function() {
                console.log("可以自爆");
            }
        }
        console.log(game);

迭代器
Symbol与for… in迭代: （Array arguments Set Map string TypedArray NodeList）
工作原理：1）创建一个指针对象，指向当前数据结构的起始位置
2）第一次调用的next方法，指针自动指向数据结构的第一个成员
3）接下来不断调用next方法，指针一直往后移动，直到指向最后一个成员
4）每调用next方法返回一个包含value和done属性的对象

let xiyou = ['唐僧', '沙僧', '猪八戒', '孙悟空']
            //使用for ..of遍历数组
        for (let v of xiyou) {
            console.log(v);
            // 遍历的结果是属性值
            //而for ..in 结果是属性
        }
        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());

生成器函数
是一种特殊的函数，可以实现异步编程 function *gen( ){ }
Generator.prototype.next()
返回一个由 yield表达式生成的值 yield 关键字用来暂停和恢复一个生成器函数 它有两个属性，value和done。value属性是对yield表达式求值的结果，而done是false，表示生成器函数尚未完全完成。

<script>
        //异步编码
        //实现 1s后发送111 然后2s后发2222 然后3s后发333
        function one() {
            setTimeout(() => {
                console.log(111);
                iterator.next();
            }, 1000)
        }

        function two() {
            setTimeout(() => {
                console.log(222);
                iterator.next();
            }, 2000)
        }

        function three() {
            setTimeout(() => {
                console.log(333);
                iterator.next();
            }, 3000)
        }
        //生成器函数调用
        function* gen() {
                yield one();
                yield two();
                yield three();
            }
            //调用生成器函数
        const iterator = gen()
        iterator.next();
    </script>

调用 next()方法时，如果传入了参数，那么这个参数会传给上一条执行的 yield语句左边的变量，例如下面例子中的 x ：

function *gen(){
    yield 10;
    x=yield 'foo';
    yield x;
}

var gen_obj=gen();
console.log(gen_obj.next());// 执行 yield 10，返回 10
console.log(gen_obj.next());// 执行 yield 'foo'，返回 'foo'
console.log(gen_obj.next(100));// 将 100 赋给上一条 yield 'foo' 的左值，即执行 x=100，返回 100 
console.log(gen_obj.next());// 执行完毕，value 为 undefined，done 为 true

Promise
Promise是ES6引入的异步编程的新解决方案，语法上Promise是一个构造函数，用来封装一步操作并获取其成功或失败的结果
1）Promise构造函数：Promise（excutor）{ }
2）Promise.prototype.then方法
3）Promise.prototype.catch方法

        //实例化Promise函数（异步返回的数据是response.data）
        const p = new Promise(function(resolve, reason) {
            setTimeout(function() {
                //let data = '数据调用成功';
                //resolve(data); //resolve表示该函数调用成功

                let err = '数据调用失败'
                reason(err) //reason表示该函数调用成功
            }, 1000)
        });
        //调用Promise的then方法
        p.then(function(value) {
            //调用成功则触发第一个函数
            console.log(value); //数据调用成功
        }, function(reason) {
            //调用失败则触发第二个函数
            console.log(reason); //数据调用失败
        })

Set对象是值的集合
Set中的元素只会出现一次

        var arr = [2, 5, 6, 1, 5, 3, 2]
        var s = [...new Set(arr)]; //set返回的是一个集合通过扩展将其转变为真数组
        console.log(s); // [2, 5, 6, 1, 3] 实现去重

        var s1 = new Set()
        console.log(s1.add(7)); //在Set对象尾部添加一个元素。返回该Set对象
        console.log(s1.has(7)); // true 返回一个布尔值，表示该值在Set中存在与否。
        console.log(s1.delete(6)); //移除Set中与这个值相等的元素 如果删除有这个值则返回true
        console.log(s1.size); //返回 Set 对象中的值的个数

        for (var v of s) {
            console.log(v); //通过for..of来迭代set
        }

        //set实践
        var arr = [1, 2, 5, 9, 6, 3, 7, 1]
            //1.交集
        var arr1 = [2, 6, 8, 9, 6]
        const result = [...new Set(arr)].filter(item => {
            let s1 = new Set(arr1)
            if (s1.has(item)) {
                return true
            } else {
                return false
            }
        })
        console.log(result);

        //并集
        let newArr = [...new Set([...arr, ...arr1])]
        console.log(newArr);

        //差集
        let result1 = [...new Set(arr)].filter(item => !(new Set(arr1).has(item)))
        console.log(result1);

Map 对象保存键值对

        let myMap = new Map();
        myMap.set('name', '小明') //添加键
        myMap.set('method', function() {
            console.log('打印输出');
        })
        console.log(myMap.size); //2 相当于length

        console.log(myMap); //{"name" => "小明", "method" => ƒ}
        //获取值
        console.log(myMap.get('method'))

        for (var v of myMap) {
            console.log(v);
            //["name", "小明"]
            //["method", ƒ]
        }


        for (var key of myMap.keys()) {
            console.log(key); //name method 获取键名
        }

        for (var value of myMap.values()) {
            console.log(value); //获取键值
        }

        for (let [key, value] of myMap.entries()) {
            console.log(key + " = " + value);
        }

class 声明对象类
关键字static将为一个类定义一个静态方法。静态方法不会在实例中被调用，而只会被类本身调用。它们经常是工具函数，比如用来创建或者复制对象。

class ClassWithStaticMethod {

  static staticProperty = 'someValue';
  static staticMethod() {
    return 'static method has been called.';
  }

}

console.log(ClassWithStaticMethod.staticProperty);
// output: "someValue"
console.log(ClassWithStaticMethod.staticMethod());
// output: "static method has been called."

ES6模块化的好处
1、防止命名冲突
2、代码复用
3、高维护性

模块命令主要由命令组成：export和import
export命名用于规定模块的对外接口
import命名用于输入其他模块提供的功能

export default {
//默认暴露
}
这个方法调用方法的时候需要用如 m1.default.call( )

   //通用的导入方式
        import *as m1 from "./js/m1.js" ;
        console.log(m1) // 引入js下m1文件

        //2. 解构赋值的形式
        import {school,call} from './js/m1.js'

        //3.简单形式，只针对默认暴露
        import m3 from './js/m3.js'

ES8–async函数
async和await两种语法结合可以让异步代码像同步代码一样
async函数：1.async函数的返回值是Promise对象
2.promise对象的结果由async函数执行的返回值决定

await表达式：1.await必须写在async函数中
2.await右侧表达式一般为promise对象
3.await返回的是promise成功的值
4.await的promise失败了，就会抛出异常，需要通过try…catch捕获处理

async function fn() {
            //返回一个字符串
            // return 'sgg'
            //返回的结果不是一个Promise类型的对象，返回的结果就是成功的
            // return
            //返回的结果如果是一个promise对象
            return new Promise((resolve, reject) => {
                resolve('成功的数据')
            })
        }
        const result = fn()
            //调用then方法
        result.then(value => {
            console.log(value);
        }, reason => {
            console.warn()
        })

Entries和fromEntries方法的比较
entries是将对象转为二维的数组
而fromEntries是将二维数组转换为对象

flat
flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回

const arr1 = [0, 1, 2, [3, 4]];

console.log(arr1.flat());
// expected output: [0, 1, 2, 3, 4]