let 关键字

let 关键字用来声明变量，使用 let 声明的变量有几个特点：

1) 不允许重复声明

2) 块儿级作用域

3) 不存在变量提升

4) 不影响作用域链

应用场景：以后声明变量使用 let 就对了

<script>
    //声明变量
    let a;
    let b,c,d;
    let e = 100;
    let f = 521, g = 'iloveyou', h = [];

    //1. 变量不能重复声明
    let star = '佩奇';
    let star = '小猪';//报错

    //2. 块儿级作用域  全局, 函数, eval
    //if else while for 里面的花括号也是一个块作用域
    {
        let girl = '乔治';
    }
    console.log(girl);//拿不到，报错

    //3. 不存在变量提升
    console.log(person);
    let person = '章鱼哥';//报错

    //4. 不影响作用域链
    {
        let school = '清华大学';
        function fn(){
            console.log(school);//可以打印，这很重要
        }
        fn();
    }
</script>

const 关键字

const 关键字用来声明常量， const 声明有以下特点

1) 声明必须赋初始值

2) 标识符一般为大写

3) 不允许重复声明

4) 值不允许修改

5) 块儿级作用域

6) 对于数组和对象的元素修改, 不算做对常量的修改, 不会报错

注意: 对象属性修改和数组元素变化不会出发 const 错误

应用场景：声明对象类型使用 const，非对象类型声明选择 let

  <script>
    //声明常量
    const SCHOOL = 'ppp';

    //1. 一定要赋初始值
    const A;//报错
    //2. 一般常量使用大写(潜规则)
    const a = 100;//不报错，建议大写
    //3. 常量的值不能修改
    SCHOOL = 'xxx';//报错
    //4. 块儿级作用域
    {
        const PLAYER = 'UZI';
    }
    console.log(PLAYER);//报错
    //5. 对于数组和对象的元素修改, 不算做对常量的修改, 不会报错
    //   因为TEAM所指向的地址并没有发生变化
    const TEAM = ['UZI','MXLG','Ming','Letme'];
    TEAM.push('Meiko');//不会报错
    TEAM = 888;//会报错

</script>

解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值

注意：频繁使用对象方法、数组元素，就可以使用解构赋值形式

 <script>
    //ES6 允许按照一定模式从数组和对象中提取值，对变量进行赋值，
    //这被称为解构赋值。
    //1. 数组的结构
    const Person = ['一','二','三','四'];
    let [A, B, C, D] = Person;
    console.log(A);//一
    console.log(B);//二
    console.log(C);//三
    console.log(D);//四

    //2. 对象的解构
    const ren = {
        name: '六',
        age: '10',
        say: function(){
            console.log("666");
        }
    };

    let {name, age, say} = ren;
    console.log(name);
    console.log(age);
    console.log(say);
    say();

    let {say} = ren;
    say();
</script>

模板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识

特点：

1) 字符串中可以出现换行符

2) 可以使用 ${xxx} 形式输出变量

注意：当遇到字符串与变量拼接的情况使用模板字符串

 <script>
    // ES6 引入新的声明字符串的方式 『``』 '' "" 
    //1. 声明
    let str = `我也是一个字符串哦!`;
    console.log(str, typeof str);

    //2. 内容中可以直接出现换行符
    let str = `<ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                </ul>`;
    //3. 变量拼接
    let pp = '5';
    let bb = `${pp}是最可爱的!!`;
    console.log(bb);
</script>

简化对象写法

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。

注意：对象简写形式简化了代码，所以以后用简写就对了

 <script>
    //ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。
    //这样的书写更加简洁
    let name = 'pp';
    let change = function(){
        console.log('我们可以改变你!!');
    }

    const school = {
        name,
        change,
        improve(){
            console.log("我们可以提高你的技能");
        }
    }
    console.log(school);
</script>

箭头函数

ES6 允许使用「箭头」（=>）定义函数

箭头函数的注意点:

1) 如果形参只有一个，则小括号可以省略

2) 函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的执行结果

3) 箭头函数 this 是静态的，指向函数声明时所在作用域下 this 的值

4) 箭头函数不能作为构造函数去实例化对象

5) 函数里面有一个arguments来保存实参，但是箭头函数不能使用 arguments

 <script>
    // ES6 允许使用「箭头」（=>）定义函数。
    //声明一个函数
    let fn = function(){

    }
    let fn = (a,b) => {
        return a + b;
    }
    //调用函数
    let result = fn(1, 2);
    console.log(result);


    //1. this 是静态的. this 始终指向函数声明时所在作用域下的 this 的值
    function getName(){
        console.log(this.name);
    }
    let getName2 = () => {
        console.log(this.name);
    }

    //设置 window 对象的 name 属性
    window.name = '葡葡1';
    const school = {
        name: "葡葡2"
    }

    //直接调用
    getName();//葡葡1
    getName2();//葡葡1

    //call 方法调用
    getName.call(school);//葡葡2
    getName2.call(school);//葡葡1，因为this 是静态的. this 始终指向函数声明
                          //时所在作用域下的 this 的值，此处是window

    //2. 不能作为构造函数去实例化对象
    let Person = (name, age) => {
        this.name = name;
        this.age = age;
    }
    let me = new Person('pupu',10);
    console.log(me);//报错，Person is not a constructor

    //3. 函数里面有一个arguments来保存实参，
    //   但是箭头函数不能使用 arguments 变量
    let fn = () => {
        console.log(arguments);
    }
    fn(1,2,3);//报错 

    //4. 箭头函数的简写
    //1) 省略小括号, 当形参有且只有一个的时候
    let add = n => {
        return n + n;
    }
    console.log(add(9));
    //2) 省略花括号, 当代码体只有一条语句的时候, 此时 return 必须省略
    // 而且语句的执行结果就是函数的返回值
    let pow = n => n * n;
    console.log(pow(8));
    
    const getData = () => ({foo: "data"});//别忘了加小括号，代表返回整个对象
    console.log(getData());
    
</script>

箭头函数实战

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>箭头函数实战</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: #58a;
        }
    </style>
</head>

<body>
    <div id="ad"></div>
    <script>
        //需求-1  点击 div 2s 后颜色变成『粉色』
        //获取元素
        let ad = document.getElementById('ad');
        //绑定事件
        ad.addEventListener("click", function(){
            //法1：保存 this 的值
            // let _this = this;//老方法解决
            //定时器1
            setTimeout(function() {
                //修改背景颜色 this
                // console.log(this);
                // _this.style.background = 'pink';
                this.style.background = 'pink';//此时会报错，因为this指向window
            }, 2000);
              //法2：利用箭头函数解决
              //定时器2
              setTimeout(() => {
                this.style.background = 'pink';//不会报错，因为箭头函数 this
                //是静态的，指向函数声明时所在作用域下 this 的值
            }, 2000);
        });

        //需求-2  从数组中返回偶数的元素
        const arr = [1,6,9,10,100,25];
        // const result = arr.filter(function(item){
        //     if(item % 2 === 0){
        //         return true;
        //     }else{
        //         return false;
        //     }
        // });
        // filter不会改变原数组
        const result = arr.filter(item => item % 2 === 0);

        console.log(result);

        // 箭头函数适合与 this 无关的回调. 定时器, 数组的方法回调
        // 箭头函数不适合与 this 有关的回调.  事件回调, 对象的方法

    </script>
</body>
</html>

函数参数默认值

<script>
    //ES6 允许给函数参数赋值初始值
    //1. 形参初始值 具有默认值的参数, 一般位置要靠后(潜规则)
    function add(a,c=10,b) {
        return a + b + c;
    }
    let result = add(1,2);//此时a=1, c=2
    console.log(result);//NAN

    //2. 与解构赋值结合
    function connect({host="127.0.0.1", username,password, port}){
        console.log(host)
        console.log(username)
        console.log(password)
        console.log(port)
    }
    connect({
        host: 'pp.com',
        username: 'root',
        password: 'root',
        port: 3306
    })
</script>

rest 参数

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

注意： rest 参数非常适合不定个数参数函数的场景

 <script>
    // ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments
    // ES5 获取实参的方式
    function date(){
    // 结果是以数组的形式打印：['英二','亚修','banana fish']，
    // 但是其原型是一个Object
        console.log(arguments);
    }
    date('英二','亚修','banana fish');

    // rest 参数
    function date(...args){
     // 结果是以数组的形式打印：['英二','亚修','banana fish']，
     // 是一个真正的数组可以用数组固有的一些方法：filter some every map 
        console.log(args);
    }
    date('英二','亚修','banana fish');

    // rest 参数必须要放到参数最后，否则就报错
    function fn(a,b,...args){
        console.log(a);//1
        console.log(b);//2
        console.log(args);//[3, 4, 5, 6]
    }
    fn(1,2,3,4,5,6);
</script>

spread 扩展运算符---只对数组起作用

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

<script>
    // 『...』 扩展运算符能将『数组』转换为逗号分隔的『参数序列』
    //声明一个数组 ...
    const person = ['甲','乙','丙'];

    // 声明一个函数
    function showPerson(){
        console.log(arguments);
    }
    showPerson(person);// 相当于showPerson(['甲','乙','丙'])，只有一个参数
    showPerson(...person);// 相当于showPerson('甲','乙','丙')，有三个参数
    
    // 与rest很像，但是不要混淆
</script>

扩展运算符应用

<script>
    //1. 数组的合并 
    const person1 = ['一','二'];
    const person2 = ['三','四'];
    const person3 = person1.concat(person2);
    const person4 = [...person1, ...person2];
    console.log(person3);
    console.log(person4);

    //2. 数组的克隆
    const person5 = ['E','G','M'];
    const person6 = [...person5];//  ['E','G','M']
    console.log(person6);

    //3. 将伪数组转为真正的数组
    const divs = document.querySelectorAll('div');
    const divArr = [...divs];
    console.log(divArr);// arguments
</script>

Symbol( [description] )

ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。它是JavaScript 语言的第七种数据类型，是一种类似于字符串的数据类型。

description，参数可选的，字符串类型。对symbol的描述，可用于调试但不是访问symbol本身。

Symbol 特点

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

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

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

4) 不可以new Symbol()，会报错

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

创建Symbol

<script>
// 直接使用`Symbol()`创建新的symbol类型，并用一个可选的字符串作为其描述。
let s = Symbol();
console.log(s, typeof s);//输出 Symbol() "symbol"
let s2 = Symbol('葡葡与熊熊');//是一个函数
let s3 = Symbol('葡葡与熊熊');//是一个函数
console.log(s2 === s3); //false

// Symbol.for(key) 创建
// 使用给定的key搜索现有的symbol，如果找到则返回该symbol。
// 否则将使用给定的key在全局symbol注册表中创建一个新的symbol。
let s4 = Symbol.for('葡葡与熊熊');//是一个函数对象
let s5 = Symbol.for('葡葡与熊熊');//是一个函数对象
console.log(s, typeof s4);//输出 Symbol('葡葡与熊熊') "symbol"
console.log(s4 === s5); //true

//不能与其他数据进行运算
   let result = s + 100; //报错
   let result = s > 100; //报错
   let result = s + s;   //报错

// 基本数据类型
// USONB  you are so niubility 
// u  undefined
// s  string  symbol
// o  object
// n  null number
// b  boolean

</script>

Symbol 创建对象属性

<script>
//向对象中添加方法 up down
let game = {
    name:'俄罗斯方块',
    up: function(){},
    down: function(){}
};

//声明一个对象
let methods = {
    up: Symbol(),
    down: Symbol()
};

game[methods.up] = function(){
    console.log("我可以改变形状");
}

game[methods.down] = function(){
    console.log("我可以快速下降!!");
}

console.log(game);//symbol类型的up和down不会覆盖原本的，而是新增进去

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

var sym = Symbol("foo");
typeof sym;     // "symbol"
var symObj = Object(sym);
typeof symObj;  // "object"

console.log(youxi)
</script>

Symbol 内置值

除了定义自己使用的 Symbol 值以外， ES6 还提供了 11 个内置的 Symbol 值。

内置值hasInstance是Symbol的一个属性，而整体Symbol.hasInstance是对象的属性。我们对这些对象属性进行设置，可以改变对象在特定场景下的表现结果。说白了，就是扩展对象功能。

属性	解释
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 环境排除。

Symbol内置属性

<script>
    class Person{
        static [Symbol.hasInstance](param){//param是instanceof前面的o
            console.log(param);// {}
            console.log("我被用来检测类型了");
            // return false;//可以控制类型的检测，自己控制返回值
        }
    }

    let o = {};

    console.log(o instanceof Person);//如果上面没有写return 这里就会打印false

    const arr = [1,2,3];
    const arr2 = [4,5,6];
    console.log(arr.concat(arr2));//[1, 2, 3, 4, 5, 6]
    arr2[Symbol.isConcatSpreadable] = false;//代表arr2不可展开
    console.log(arr.concat(arr2));
    //[1, 2, 3, Array(3)]，即[1, 2, 3, [4, 5, 6]]
</script>

迭代器

遍历器（Iterator）就是一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。在JS里，这个接口指的是对象的一个属性，叫 Symbol.iterator，其对应属性值是一个函数。任何数据结构只要部署 Iterator 接口，就可以使用for of完成遍历操作。

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) Symbol.iterator属性值这个函数会创建一个指针对象，称为迭代器对象，指向当前数据结构的起始位置，迭代器对象里有个next方法

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

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

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

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

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

    //使用 for...of 遍历数组
    for(let v of xiyou){
    // 数组是由iterator属性的，所以可以用for of遍历
    // for of 依次打印 唐僧 孙悟空 猪八戒 沙僧
    // for in 依次打印 0 1 2 3 
    console.log(v);
    }

    // xiyou[Symbol.iterator]是一个函数
    // xiyou[Symbol.iterator]()说明在调用
    let iterator = xiyou[Symbol.iterator]();
    
    //调用对象的next方法
    console.log(iterator.next());// {value: "唐僧", done: false}
    console.log(iterator.next());// {value: "孙悟空", done: false}
    console.log(iterator.next());// {value: "猪八戒", done: false}
    console.log(iterator.next());// {value: "沙僧", done: false}
    console.log(iterator.next());// {value: undefined, done: true}
</script>

4) 迭代器的应用--自定义遍历数据

<script>
    // 知识回顾：
    // for in 循环遍历的值都是数据结构的键值，for in也可以循环数组但是特别适合遍历对象。
    // forEach 对数组的每一个元素执行一次提供的函数（不能使用return、break等中断循环），不改变原数组，无返回值undefined。
    // for of 它是ES6中新增加的语法，用来循环获取一对键值对中的值。一个数据结构只有部署了 Symbol.iterator 属性, 才具有 iterator接口可以使用 for of循环。但是，也可以自定义遍历数据，给某个数据结构一个Symbol.iterator 属性，返回一个指针对象，具体看下面例子。


    //声明一个对象
      const banji1 = {
        name: "哈哈哈",
        stus: [
            'xiaoming',
            'xiaoning',
            'xiaotian',
            'knight'
        ]
    };

    // 需求：遍历这个对象，每一次都到的是stus数组里的键值，不是键名 
    for (let v of banji1) {
        // 会报错，banji1 is ont iterable
        // banji1不是AASSMNT的一员，没有iterator属性，无法for of
        console.log(v); 
    };
    
    const banji2 = {
        name: "嘻嘻嘻",
        stus: [
            'xiaoming',
            'xiaoning',
            'xiaotian',
            'knight'
        ],
        [Symbol.iterator]() {
            //索引变量
            let index = 0;
            //
            let _this = this;
            //返回一个迭代器对象
            return {
                //迭代器对象里有个next方法
                next: function () {
                    if (index < _this.stus.length) {
                    //返回的是一个带有value和done属性的对象
                        const result = { value: _this.stus[index], done: false };
                        //下标自增
                        index++;
                        //返回结果
                        return result;
                    }else{
                        return {value: undefined, done: true};
                    }
                }
            };
        }
    }

    //遍历这个对象 
    for (let v of banji2) {
        console.log(v); //成功遍历
    }
</script>

生成器函数

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

代码说明：

1) * 的位置没有限制

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

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

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

    function * gen(){ 
        //生成器其实就是一个特殊的函数
        //异步编程  纯回调函数  node fs  ajax mongodb
        //函数代码的分隔符
        yield '亦余心之所善兮'; 
        yield '虽九死其犹未悔'; 
        yield '上岸逆风翻盘'; 
    } 
    let iterator = gen(); 
    console.log(iterator.next()); //{value: "亦余心之所善兮", done: false}
    console.log(iterator.next()); //{value: "虽九死其犹未悔", done: false}
    console.log(iterator.next());//{value: "上岸逆风翻盘", done: false}
    console.log(iterator.next());//{value:undefined, done: true}
    
    // 遍历
    for(let v of gen()){
        console.log(v);//亦余心之所善兮 虽九死其犹未悔 上岸逆风翻盘
    }
    //gen()返回一个迭代器对象，引发思考，所以我们对具有Symbol.iterator属性的数据结构进行遍历，就相当于对其迭代器对象进行遍历吗？？？

生成器函数参数

<script>
    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());//{value:111, done: false}
    //next方法可以传入实参
    console.log(iterator.next('BBB'));//{value:222, done: false}
    console.log(iterator.next('CCC'));//{value:333, done: false}
    console.log(iterator.next('DDD'));//{value:undefined, done: true}
    // 整个输出顺序是：
    //AAA
    //{value:111, done: false}
    //BBB
    //{value:222, done: false}
    //CCC
    //{value:333, done: false}
    //DDD
    //{value:undefined, done: true}
</script>

生成器函数实例1

<script>
    // 异步编程  文件操作 网络操作(ajax, request) 数据库操作
    // 1s 后控制台输出 111  2s后输出 222  3s后输出 333 
    // 回调地狱
    // setTimeout(() => {
    //     console.log(111);
    //     setTimeout(() => {
    //         console.log(222);
    //         setTimeout(() => {
    //             console.log(333);
    //         }, 3000);
    //     }, 2000);
    // }, 1000);

    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();
    }

    //调用生成器函数
    let iterator = gen();
    iterator.next();

</script>

生成器函数实例2

<script>
    //模拟获取  用户数据  订单数据  商品数据 
    function getUsers(){
        setTimeout(()=>{
            let data = '用户数据';
            //调用 next 方法, 并且将数据传入
            iterator.next(data);
        }, 1000);
    }

    function getOrders(){
        setTimeout(()=>{
            let data = '订单数据';
            iterator.next(data);
        }, 1000)
    }

    function getGoods(){
        setTimeout(()=>{
            let data = '商品数据';
            iterator.next(data);
        }, 1000)
    }

    function * gen(){
        let users = yield getUsers();
        let orders = yield getOrders();
        let goods = yield getGoods();
    }

    //调用生成器函数
    let iterator = gen();
    iterator.next();
</script>

Promise

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

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

2) Promise.prototype.then 方法

3) Promise.prototype.catch 方法

Promise基本语法

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

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

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

Promise封装读取文件

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

//2. 调用方法读取文件
fs.readFile('./resources/study.md', (err, data)=>{
    //如果失败, 则抛出错误
    if(err) throw err;
    //如果没有出错, 则输出内容，控制台跑 node 本文件.js，可见结果
    console.log(data.toString());
});

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

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

Promise封装AJAX

<script>
    // 接口地址: https://api.apiopen.top/getJoke
    const p = new Promise((resolve, reject) => {
        //1. 创建对象
        const xhr = new XMLHttpRequest();

        //2. 初始化
        xhr.open("GET", "https://api.apiopen.top/getJ");

        //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);
    });
</script>

Promise.prototype.then 方法

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

    //调用 then 方法  then方法的返回结果是 Promise 对象, 对象状态由回调函数的执行结果决定
    //1. 如果回调函数中返回的结果是 非 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=>{

    });
</script>

Promise.prototype.catch 方法

<script>
    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);
    });
</script>

Promise实践-读取多个文件

//引入 fs 模块
const fs = require("fs");

// fs.readFile('./resources/为学.md', (err, data1)=>{
//     fs.readFile('./resources/插秧诗.md', (err, data2)=>{
//         fs.readFile('./resources/观书有感.md', (err, data3)=>{
//             let result = data1 + '\r\n' +data2  +'\r\n'+ data3;
//             console.log(result);
//         });
//     });
// });

//使用 promise 实现
const p = new Promise((resolve, reject) => {
    fs.readFile("./resources/为学.md", (err, data) => {
        resolve(data);
    });
});

p.then(value => {
    return new Promise((resolve, reject) => {
        fs.readFile("./resources/插秧诗.md", (err, data) => {
            resolve([value, data]);
        });
    });
}).then(value => {
    return new Promise((resolve, reject) => {
        fs.readFile("./resources/观书有感.md", (err, data) => {
            //压入
            value.push(data);
            resolve(value);
        });
    })
}).then(value => {
    console.log(value.join('\r\n'));
});

Set 集合

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

Set实例操作方法：

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

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

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

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

5) clear 清空集合，返回 undefined

Set实例遍历方法（遍历顺序为插入顺序）:

1) keys()：返回一个包含集合中所有键的迭代器

2) values()：返回一个包含集合中所有值的迭代器

3) entries(): 返回一个包含Set对象中所有元素

4) forEach(callback, thisArg): 用于对集合成员执行callbackFn操作，如果提供了thisArg参数，回调中的this会是这个参数，回调中的this会是这个参数，没有返回值

5) Set可以使用map、filter方法

<script>
    //创建一个空集合 
    let s = new Set();
    console.log(s, typeof s);//Set(0) {}     "object"
    //创建一个非空集合，里面可传一个可迭代数组 
    let s1 = new Set([1,2,3,1,2,3]);
    console.log(s1);// Set(3) {1, 2, 3}，自动帮我们去重

    //集合属性与方法 
    //返回集合的元素个数
    console.log(s1.size); //3
    //添加新元素 
    console.log(s1.add(4)); // Set(3) {1, 2, 3, 4}
    //删除元素 
    console.log(s1.delete(1)); // Set(3) {2, 3, 4}
    //检测是否存在某个值 
    console.log(s1.has(2)); //true
    //清空集合 
    console.log(s1.clear());
    console.log(s1); //Set(0) {}  
    
    // 可遍历
     for(let v of s1){
        console.log(v);
    }
        
</script>

let set = new Set([1, 2, 3])
set = new Set([...set].map(item => item * 2))
console.log([...set])               // [2, 4, 6]

set = new Set([...set].filter(item => item >= 4))
console.log([...set])               // [4, 6]

Set 实践

<script>
    let arr = [1,2,3,4,5,4,3,2,1];
    //1. 数组去重
    let result = [...new Set(arr)];
    console.log(result);
    //2. 交集
    let arr2 = [4,5,6,5,6];
    let result = [...new Set(arr)].filter(item => {
        let s2 = new Set(arr2);// 4 5 6
        if(s2.has(item)){
            return true;
        }else{
            return false;
        }
    });
    let result = [...new Set(arr)].filter(item => new Set(arr2).has(item));
            console.log(result);//[4, 5]

    //3. 并集
    let union = [...new Set([...arr, ...arr2])];
    console.log(union);//[1, 2, 3, 4, 5, 6]

    //4. 差集
    let diff = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)));
    console.log(diff);//[1, 2, 3, 6]

</script>

WeakSet

//创建WeakSet实例
const ws = new WeakSet();
//WeakSet可以接受一个具有Iterable接口的对象作为参数
const a = [[1, 2], [3, 4]];
const ws = new WeakSet(a);
#### // WeakSet {[1, 2], [3, 4]}

在API中WeakSet与Set的区别

没有遍历操作的API

没有size属性

WeakSet成员只能是引用类型，而不能是其他类型的值

WeakSet里面的引用只要在外部消失，它在WeakSet里面的引用就会自动消失。

Map 字典

ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合。 Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。 Map 也实现了iterator 接口，值唯一，所以可以使用『扩展运算符』和『for…of…』进行遍历，可以new。

Map 实例的属性和方法：

1) size 返回 Map 的元素个数

2) set 增加一个新元素，返回当前 Map

3) get 返回键名对象的键值

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

5) clear 清空集合，返回 undefined

<script>
    //说白了，Map是一个升级版对象

    //创建一个空 Map 
    let m = new Map(); 
    //创建一个非空 Map 
    let m2 = new Map([ ['name','葡葡葡葡'], ['slogon','逆风翻盘'] ]);
    
    //属性和方法 
    //获取映射元素的个数 
    console.log(m2.size); //2 
    //添加映射值 
    console.log(m2.set('age', 6)); 
    //获取映射值 
    console.log(m2.get('age')); 
    //检测是否有该映射 
    console.log(m2.has('age')); 
    //清除 
    console.log(m2.clear()); 
    

    let key = {
        school : 'ATGUIGU'
    };
    m.set('name','pp');
    m.set(key, ['北京','上海','深圳']);
    m.set('change', function(){
        console.log("葡葡逆风翻盘!!");
    });
    console.log(m.size);//3
    m.delete('name');
    console.log(m.get('change'));
    console.log(m.get(key));
    //遍历
    for(let v of m){
        console.log(v);
        //打印结果需要特别留意：
        //['name','pp']
        //[{school : 'ATGUIGU'}, ['北京','上海','深圳']]
        //['change', function(){console.log("葡葡逆风翻盘!!")}]
    }
    console.log(m);

</script>

WeakMap

WeakMap结构与Map结构类似，也是用于生成键值对的集合

在API中WeakMap与Map的区别

没有遍历操作的API

没有clear清空方法

WeakMap只接受对象作为键名（null除外），不接受其他类型的值作为键名

WeakMap的键名所指向的对象，一旦不再需要，里面的键名对象和所对应的键值对会被垃圾回收，不用手动删除引用。例如当我们把一个dom节点作为key值来存储数据，当该dom被清除，其所对应的WeakMap记录会自动被移除

const map = new WeakMap();
map.set(1, 2)
// TypeError: 1 is not an object!
map.set(Symbol(), 2)
// TypeError: Invalid value used as weak map key
map.set(null, 2)
// TypeError: Invalid value used as weak map key

WeakMap 弱引用的只是键名，而不是键值。键值依然是正常引用。下面代码中，键值obj会在WeakMap产生新的引用，当你修改obj不会影响到内部

const wm = new WeakMap();
let key = {};
let obj = {foo: 1};

wm.set(key, obj);
obj = null;
wm.get(key)
// Object {foo: 1}

Objects 和 Maps 的区别

Objects 和 Maps 类似的是，它们都允许你按键存取一个值、删除键、检测一个键是否绑定了值。因此（并且也没有其他内建的替代方式了）过去我们一直都把对象当成 Maps 使用。不过 Maps 和 Objects 有一些重要的区别，在下列情况里使用 Map 会是更好的选择：

一个Object的键只能是字符串或者 Symbols，但一个 Map 的键可以是任意值，包括函数、对象、基本类型。

Map 中的键值是有序的，而添加到对象中的键则不是。因此，当对它进行遍历时，Map 对象是按插入的顺序返回键值。

你可以通过 size 属性直接获取一个 Map 的键值对个数，而 Object 的键值对个数只能手动计算。

Map 可直接进行迭代，而 Object 的迭代需要先获取它的键数组，然后再进行迭代。

Object 都有自己的原型，原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。虽然 ES5 开始可以用 map = Object.create(null) 来创建一个没有原型的对象，但是这种用法不太常见。

Map 在涉及频繁增删键值对的场景下会有些性能优势。

集合Set 与字典Map 的区别

共同点：集合、字典可以储存不重复的值

不同点：集合是以[value, value]的形式储存元素，字典是以[key, value]的形式储存

class 类

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过 class 关键字，可以定义类。基本上， ES6 的 class 可以看作只是一个语法糖，它的绝大部分功能， ES5 都可以做到，新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

知识点：

1) class 声明类

2) constructor 定义构造函数初始化

3) extends 继承父类

4) super 调用父级构造方法

5) static 定义静态方法和属性

6) 父类方法可以重写

类声明

<script>
//父类 
class Phone { 
    //构造方法 
    constructor(brand, color, price) { 
        this.brand = brand; 
        this.color = color; 
        this.price = price; 
    } 
    //对象方法 
    call() {
        console.log('我可以打电话!!!')
    } 
} 
//子类 
class SmartPhone extends Phone { 
    constructor(brand, color, price, screen, pixel) {
        super(brand, color, price);
        this.screen = screen; 
        this.pixel = pixel; 
    } 
    //子类方法 
    photo(){ 
        console.log('我可以拍照!!'); 
    } 
    playGame(){ 
        console.log('我可以玩游戏!!');
    } 
    //方法重写 
    call(){ 
        console.log('我可以进行视频通话!!');
    }
    //静态方法 
    static run(){ 
        console.log('我可以运行程序') 
    }
    static connect(){
        console.log('我可以建立连接')
    } 
} 

//实例化对象 
const Nokia = new Phone('诺基亚', '灰色', 230); 
const iPhone6s = new SmartPhone('苹果', '白色', 6088, '4.7inch','500w'); 
//调用子类方法
iPhone6s.playGame();
//调用重写方法 
iPhone6s.call(); 
//调用静态方法 ，只能通过类来调用静态方法
SmartPhone.run();

</script>

类的静态成员

函数对象的属性和实例对象的属性是不通的

<script>
    function Phone(){

    }
    Phone.name = '手机';//name属于类上的静态属性static
    Phone.change = function(){//change属于类上的静态属性static
        console.log("我可以改变世界");
    }
    Phone.prototype.size = '5.5inch';//size属于原型上的属性

    let nokia = new Phone();

    //函数对象的属性和实例对象的属性是不通的，在原型上才相通
    console.log(nokia.name);//undefined
    nokia.change();// 报错is not a function
    console.log(nokia.size);//5.5inch

    class Phone{
        //静态属性
        static name = '手机';
        static change(){
            console.log("我可以改变世界");
        }
    }

    let nokia = new Phone();
    console.log(nokia.name);//undefined
    console.log(Phone.name);//手机
</script>

类的继承

此处关于类的继承，不够全面，笔记函数高级更详细

<script>
//组合继承
    
//手机
function Phone(brand, price){
    this.brand = brand;
    this.price = price;
}

Phone.prototype.call = function(){
    console.log("我可以打电话");
}

//智能手机
function SmartPhone(brand, price, color, size){
    Phone.call(this, brand, price);
    this.color = color;
    this.size = size;
}


//设置子级构造函数的原型
SmartPhone.prototype = new Phone;
SmartPhone.prototype.constructor = SmartPhone;

//声明子类的方法
SmartPhone.prototype.photo = function(){
    console.log("我可以拍照")
}

SmartPhone.prototype.playGame = function(){
    console.log("我可以玩游戏");
}

const chuizi = new SmartPhone('锤子',2499,'黑色','5.5inch');
console.log(chuizi);

///////////////////////////////////////////
    
//通过class和extends
class Phone{
    //构造方法
    constructor(brand, price){
        this.brand = brand;
        this.price = price;
    }
    //父类的成员属性
    call(){
        console.log("我可以打电话!!");
    }
}

class SmartPhone extends Phone {
    //构造方法
    constructor(brand, price, color, size){
        super(brand, price);// Phone.call(this, brand, price)
        this.color = color;
        this.size = size;
    }

    photo(){
        console.log("拍照");
    }

    playGame(){
        console.log("玩游戏");
    }

    //子类对父类方法的重写
    call(){
        console.log('我可以进行视频通话');
    }
}

const xiaomi = new SmartPhone('小米',799,'黑色','4.7inch');
// console.log(xiaomi);
xiaomi.call();//我可以打电话!!（重写之前）
xiaomi.call();//我可以进行视频通话（子类对父类方法的重写）
xiaomi.photo();//拍照
xiaomi.playGame();//玩游戏

    
</script>

类的get和set

<script>
    // get 和 set  
    class Phone{
        get price(){
            console.log("价格属性被读取了");
            return 'iloveyou';
        }

        set price(newVal){
            console.log('价格属性被修改了');
        }
    }

    //实例化对象
    let s = new Phone();

    console.log(s.price);//iloveyou
    s.price = 'free';//价格属性被修改了
</script>

数值扩展

二进制和八进制

ES6 提供了二进制和八进制数值的新的写法，分别用前缀 0b 和 0o 表示。

Number.isFinite() 与 Number.isNaN()

Number.isFinite() 用来检查一个数值是否为有限的

Number.isNaN() 用来检查一个值是否为 NaN

Number.parseInt() 与 Number.parseFloat()

ES6 将全局方法 parseInt 和 parseFloat，移植到 Number 对象上面，使用不变。

Math.trunc

用于去除一个数的小数部分，返回整数部分。

Number.isInteger

Number.isInteger() 用来判断一个数值是否为整数

<script>
//0. Number.EPSILON 是 JavaScript 表示的最小精度
//EPSILON 属性的值接近于 2.2204460492503130808472633361816E-16
function equal(a, b){
    if(Math.abs(a-b) < Number.EPSILON){
        return true;
    }else{
        return false;
    }
};
console.log(0.1 + 0.2 === 0.3);//false
console.log(equal(0.1 + 0.2, 0.3))//true

//1. 二进制和八进制
let b = 0b1010;//代表二进制1010，实质十进制为10
let o = 0o777;//实质十进制511
let d = 100;//实质十进制100
let x = 0xff;//实质十六进制255
console.log(x);

//2. Number.isFinite  检测一个数值是否为有限数
console.log(Number.isFinite(100));//true
console.log(Number.isFinite(100/0));//false
console.log(Number.isFinite(Infinity));//false

//3. Number.isNaN 检测一个数值是否为 NaN 
console.log(Number.isNaN(123)); //false

//4. Number.parseInt Number.parseFloat字符串转整数
console.log(Number.parseInt('5211314love'));//5211314
console.log(Number.parseFloat('3.1415926神奇'));//3.1415926

//5. Number.isInteger 判断一个数是否为整数
console.log(Number.isInteger(5));//true
console.log(Number.isInteger(2.5));//false

//6. Math.trunc 将数字的小数部分抹掉  
console.log(Math.trunc(3.5));//3

//7. Math.sign 判断一个数到底为正数 负数 还是零
console.log(Math.sign(100));//1
console.log(Math.sign(0));//0
console.log(Math.sign(-20000));//-1

</script>

对象方法扩展

ES6 新增了一些 Object 对象的方法

1) Object.is 比较两个值是否严格相等，与『===』行为基本一致（+0 与 NaN）

2) Object.assign 对象的合并，将源对象的所有可枚举属性，复制到目标对象

3) proto、 setPrototypeOf、 setPrototypeOf 可以直接设置对象的原型

<script>
    //1. Object.is 判断两个值是否完全相等 
    console.log(Object.is(120, 120));// true  作用相当于=== 
    console.log(Object.is(NaN, NaN));//  true  作用相当于===   
    console.log(NaN === NaN);// false 作用相当于===  

    //2. Object.assign 对象的合并
    const config1 = {
        host: 'localhost',
        port: 3306,
        name: 'root',
        pass: 'root',
        test: 'test'
    };
    const config2 = {
        host: 'http://atguigu.com',
        port: 33060,
        name: 'atguigu.com',
        pass: 'iloveyou',
        test2: 'test2'
    }
    //后面（右边）的把前面（左边）的覆盖，有则覆盖无则添加
    console.log(Object.assign(config1, config2));

    //3. Object.setPrototypeOf 设置原型对象  Object.getPrototypeof
    const school = {
        name: '葡葡
    }
    const cities = {
        xiaoqu: ['北京','上海','深圳']
    }
    //注意：是为左边设置右边的原型
    Object.setPrototypeOf(school, cities);
    console.log(Object.getPrototypeOf(school));//获取school的原型
    console.log(school);
</script>

模块化

模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。

模块化的好处，模块化的优势有以下几点：

1) 防止命名冲突

2) 代码复用

3) 高维护性

模块化规范产品，ES6 之前的模块化规范有：

1) CommonJS => NodeJS、 Browserify

2) AMD => requireJS

3) CMD => seaJS

ES6 模块化语法

模块功能主要由两个命令构成： export 和 import。

export 命令用于规定模块的对外接口

import 命令用于输入其他模块提供的功能

//m1.js
//分别暴露
export let cutey = '葡葡';

export function study() {
    console.log("葡葡逆风翻盘");
}

//m2.js
//统一暴露
let cutey = "皮皮";

function success(){
    console.log("皮皮逆风翻盘");
}

//
export {school, findJob};

//m3.js
//默认暴露
export default {
    school: 'QIUQIU
    change: function(){
        console.log("秋秋逆风翻盘");
    }
}

//app.js
//入口文件

//模块引入
import * as m1 from "./m1.js";
import * as m2 from "./m2.js";
import * as m3 from "./m3.js";

console.log(m1);
console.log(m2);
console.log(m3);

m1.teach();
m2.findJob();
m3.default.change();

//修改背景颜色为粉色
import $ from 'jquery';// const $ = require("jquery");
$('body').css('background','pink');

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES6 模块化</title>
</head>
<body>
    <script type="module">
        //1. 通用的导入方式
        //引入 m1.js 模块内容
        import * as m1 from "./src/js/m1.js";
        //引入 m2.js 模块内容
        import * as m2 from "./src/js/m2.js";
        //引入 m3.js 
        import * as m3 from "./src/js/m3.js";
       console.log(m1);
        console.log(m2);
        console.log(m3);

        //2. 解构赋值形式
        import {cutey, study} from "./src/js/m1.js";
        import {cutey as pp, success} from "./src/js/m2.js";
        import {default as qiu} from "./src/js/m3.js";

        //3. 简便形式  针对默认暴露
        import m3 from "./src/js/m3.js";
        console.log(m3);
    </script>

    <script src="./src/js/app.js" type="module"></script>
    
</body>
</html>

babel 对ES6模块化代码转化

并不是所有浏览器都适用《script》方式引入模块，即上面那种，需要通过babel进行转换，把ES新语法转化为ES5语法

//home.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
    1. 安装工具 npm i babel-cli babel-preset-env browserify(webpack) -D
    2. 编译 npx babel src/js -d dist/js --presets=babel-preset-env
    3. 打包 npx browserify dist/js/app.js -o dist/bundle.js

     babel-cli为babel命令行工具
     babel-preset-env为babel预设包，能把最新的ECMAScript的特性转换为ES5语法
     browserify(webpack)皆为打包工具
     
     因为是局部安装，所以用npx，如果是全局，可直接babel xxx的执行编译，
     执行命令行--转换语法：
     npx babel src/js -d dist/js --presets=babel-preset-env
     （此句以-d为界，左原目录，右目标目录）
     由于时间限制，这里没有写配置文件，直接用命令行的方式
     执行命令行--打包：
     px browserify dist/js/app.js -o dist/bundle.js
     引用的是打包好的文件
    -->
     <script src="dist/bundle.js"></script>    
     
</body>
</html>

模块化引入NPM包

//package.json
{
  "name": "ES6_module",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "browserify": "^16.5.1"
  },
  "dependencies": {
    "jquery": "^3.5.1"
  }
}

//app.js
//入口文件

//模块引入
import * as m1 from "./m1.js";
import * as m2 from "./m2.js";
import * as m3 from "./m3.js";

//修改背景颜色为粉色
import $ from 'jquery';// const $ = require("jquery");
$('body').css('background','pink');
//此时，记得重新打包，打开那个引入bundle.js文件的html文件，就可以看见效果

kangax.github.io/compat-tabl… 可查看兼容性

ES6新特性

let 关键字

let 关键字用来声明变量，使用 let 声明的变量有几个特点：

1) 不允许重复声明

2) 块儿级作用域

3) 不存在变量提升

4) 不影响作用域链

应用场景：以后声明变量使用 let 就对了

const 关键字

const 关键字用来声明常量， const 声明有以下特点

1) 声明必须赋初始值

2) 标识符一般为大写

3) 不允许重复声明

4) 值不允许修改

5) 块儿级作用域

6) 对于数组和对象的元素修改, 不算做对常量的修改, 不会报错

注意: 对象属性修改和数组元素变化不会出发 const 错误

应用场景：声明对象类型使用 const，非对象类型声明选择 let

解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值

注意：频繁使用对象方法、数组元素，就可以使用解构赋值形式

模板字符串

模板字符串（template string）是增强版的字符串， 用反引号（`）标识

特点：

1) 字符串中可以出现换行符

2) 可以使用 ${xxx} 形式输出变量

注意：当遇到字符串与变量拼接的情况使用模板字符串

简化对象写法

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的 书写更加简洁。

注意：对象简写形式简化了代码，所以以后用简写就对了

箭头函数

ES6 允许使用「箭头」 （=>）定义函数

箭头函数的注意点:

1) 如果形参只有一个，则小括号可以省略

2) 函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的执行结果

3) 箭头函数 this 是静态的，指向函数声明时所在作用域下 this 的值

4) 箭头函数不能作为构造函数去实例化对象

5) 函数里面有一个arguments来保存实参，但是箭头函数不能使用 arguments

箭头函数实战

函数参数默认值

rest 参数

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

注意： rest 参数非常适合不定个数参数函数的场景

spread 扩展运算符---只对数组起作用

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

扩展运算符应用

Symbol( [description] )

ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。它是JavaScript 语言的第七种数据类型，是一种类似于字符串的数据类型。

description，参数可选的，字符串类型。对symbol的描述，可用于调试但不是访问symbol本身。

Symbol 特点

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

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

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

4) 不可以new Symbol()，会报错

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

创建Symbol

Symbol 创建对象属性

Symbol 内置值

除了定义自己使用的 Symbol 值以外， ES6 还提供了 11 个内置的 Symbol 值。

内置值hasInstance是Symbol的一个属性，而整体Symbol.hasInstance是对象的属性。我们对这些对象属性进行设置，可以改变对象在特定场景下的表现结果。说白了，就是扩展对象功能。

Symbol内置属性

迭代器

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) Symbol.iterator属性值这个函数会创建一个指针对象，称为迭代器对象，指向当前数据结构的起始位置，迭代器对象里有个next方法

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

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

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

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

4) 迭代器的应用--自定义遍历数据

生成器函数

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

模板字符串（template string）是增强版的字符串，用反引号（`）标识

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。

ES6 允许使用「箭头」（=>）定义函数

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

1) keys()：返回一个包含集合中所有键的迭代器

集合Set 与字典Map 的区别

共同点：集合、字典可以储存不重复的值

不同点：集合是以[value, value]的形式储存元素，字典是以[key, value]的形式储存