ES6

ES 全称 EcmaScript，是脚本语言的规范，而平时经常编写的 JavaScript，是 EcmaScript 的一种实现，

所以，ES 新特性其实指的就是 JavaScript 的新特性。        // ES 6-11，指的是 ES 的几个版本

为什么要学习新特性 ？

• 语法简洁、功能丰富
• 框架开发应用
• 前端开发职位要求

EcmaScript 概述

ES6 新特性

[1] let 关键字：声明局部变量                                      // 以后声明变量，使用 let 就对了

    <script>
        let a;  // 单个声明
        let b,c,d;  // 批量声明
        let e = 100;  // 单个声明，并赋值
        let f = 200,g = 'test';  // 批量声明，并赋值
    </script>

特性：

• 不允许重复声明

    <script>
        let dog = '小狗';
        let dog = '大狗';  // Uncaught SyntaxError: Identifier 'dog' has already been declared
    </script>

• 块级作用域（ 局部变量 ）

    <script>
        {
            let cat = "猫";
            console.log(cat);  // 猫
        }
        console.log(cat);  // index.html:15 Uncaught ReferenceError: cat is not defined
    </script>

• 不存在变量提升

    <script>
        console.log(dog);  // undefined
        console.log(cat);  // Uncaught ReferenceError: Cannot access 'cat' before initialization

        var dog = "狗";  // 存在声明提升，输出变量的默认值
        let cat = "猫";  // 不存在声明提升
    </script>

• 不影响作用域链

    <script>
        {
            let cat = "猫";
            function fn(){
                console.log(cat);  // 猫
            }
            fn();
        }
    </script>

[2] const 关键字：声明常量                // 通常，声明对象类型使用 const，非对象类型声明选择 let

    <script>
        const DOG = '狗';
        console.log(DOG)
    </script>

特性：

• 声明必须赋初始值

    <script>
        const DOG;
        console.log(DOG);  // Uncaught SyntaxError: Missing initializer in const declaration
    </script>

• 常量的标识符一般大写（ 纯属习惯 ）
• 常量的值不允许修改

    <script>
        const DOG = "狗";
        console.log(DOG);  // 狗
        DOG = "大狗";
        console.log(DOG);  // Uncaught TypeError: Assignment to constant variable.
    </script>

• 不允许重复声明，同 let
• 块级作用域（ 局部变量 ），同 let
• 对于数组和对象的元素进行修改，不算做对常量的修改，不会报错（ 因为地址没有发生变化 ）

    <script>
        const arr = [1,2,3]
        console.log(arr);  // [1, 2, 3]
        arr.push(4);
        console.log(arr);  // [1, 2, 3, 4]
    </script>

[3] 变量和对象的解构赋值                              // 频繁使用对象方法、数组元素，就可以使用解构赋值形式

什么是解构赋值？ES6 允许按照一定模式，从数组和对象中提取值，然后对变量进行赋值，这被称为“解构赋值”。

    <script>
        // 数组的解构赋值
        let [a,b,c] = ['大哥','二哥','三哥'];
        console.log(a);  // 大哥
        console.log(b);  // 二哥
        console.log(c);  // 三哥

        // 对象的解构赋值
        let {name,run} = {
            name:"小明",
            age:10,
            run(){
                console.log('跑步');
            }
        }
        console.log(name);  // 小明
        run();  // 跑步
    </script>

[4] 模板字符串：声明自带格式的字符串                           // 当遇到字符串和变量拼接的时候，可以使用模板字符串

模板字符串，是加强版的字符串，用反引号（``）表示，其特点为：

• 自带格式，字符串中可用出现换行
• 变量拼接，可用使用 ${ x } 的形式引用变量

    <script>
        let str1 = `字符串`;  
        let str2 = `字
        符
        串`;
        console.log(str1); // 字符串
        console.log(str2);  // (自带格式)
        let str3 = `这是一个${str1}`;
        console.log(str3);  // 这是一个字符串
    </script>

[5] 简化对象和函数写法

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

    <script>
        let name = "小明";
        let sing = function(){
            console.log('唱歌');
        }
        let obj = {
            // 完整写法
            // name:name,
            // sing:sing,
            // 简化写法
            name,
            sing,
            age:10,
            // 方法声明（简化）
            run(){
                console.log('跑步');
            }
        }
        console.log(obj.name);  // 小明
        obj.sing();  // 唱歌
        obj.run();  // 跑步
    </script>

[6] 箭头函数：简化函数写法

ES6 允许使用箭头（ => ）来定义函数，箭头函数提供了一种更为简洁的函数书写方式，多用于匿名函数的定义。

    <script>
        function func1() {
            console.log('方法1');
        }
        func1();  // 方法1
        // ES6写法
        let func2 = () => {
            console.log('方法2')
        }
        func2();  // 方法2
    </script>

其特点为：

• 箭头函数不能作为构造函数实例化；
• 不能使用 arguments；
• 如果形参只有一个，小括号可以省略；
• 如果函数体只有一条语句，花括号也可以省略，函数的返回值为该条语句的执行结果；

    <script>
        let func3 = function (a, b) {
            return a + b;
        }
        console.log(func3(10, 20));  // 30
        // ES6 写法
        let func4 = (a, b) => {
            return a + b;
        }
        console.log(func4(20, 50));  // 70
    </script>

• 箭头函数的 this 是静态的，始终指向声明时所在作用域下的 this 值；

<body>
    <div id="sec1" style="width:100px;height: 100px;background: blue;"></div>
    <div id="sec2" style="width:100px;height: 100px;background: blue;"></div>
    <script>
        // 效果：点击 div#sec，2秒后颜色变为粉色(pink)
        let sec1 = document.getElementById('sec1');
        let sec2 = document.getElementById('sec2');
        // 传统写法
        sec1.addEventListener('click',function(){
            let that = this;
            setTimeout(function(){
                // 报错
                // this.style.background = "pink";  // Uncaught TypeError: Cannot set properties of undefined (setting 'background')
                // 解决
                that.style.background = "pink";
            },2000)
        })
        // ES6 写法
        sec2.addEventListener('click',function(){
            setTimeout(() => {
                this.style.background = "red";
            },2000)
        })

    </script>
</body>

[7] ES6 中函数参数的默认值：给函数的参数设置默认值

    <script>
        // 默认值
       function func(a,b,c = 10){
           return a + b + c;
       }
       console.log(func(1,2));  // 13

       // 与解构赋值配合使用
       function connect({host="127.0.0.1",username,password,port}){
        console.log(host);  // 127.0.0.1
        console.log(username);  // root
        console.log(password);  // root
        console.log(port);  // 8080
       }
       connect({
           username:'root',
           password:'root',
           port:8080
       })
    </script>

[8] rest 参数：获取实参（ 实际上是函数的剩余参数 ）                                // ES6 rest 参数

    <script>
        let func1 = function () {
            console.log(arguments)  // Arguments(3) ['大哥', '二哥', '三哥', callee: ƒ, Symbol(Symbol.iterator): ƒ]
            // Rest 参数简化了使用 arguments 获取多余参数的方法
            var args = Array.prototype.slice.call(arguments);
            console.log(args); // ['大哥', '二哥', '三哥']
        }
        func1("大哥", "二哥", "三哥");  
        
        // ES6引入了rest参数（ ...args ），rest参数必须放在最后，否则会报错
        let func2 = function (...args) {
            console.log(args);  // ['大哥', '二哥', '三哥']
        }
        func2("大哥", "二哥", "三哥");
        let func3 = function (a,b,...args) {
            console.log(a);  // 大哥
            console.log(args);   // ['三哥']
        }
        func3("大哥", "二哥", "三哥"); 
    </script>

[9] 扩展运算符：将一个数组转化为用逗号分隔的参数序列

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

    <script>
        let arr = ['大哥','二哥','三哥'];
        let func = function (a, b, ...args) {
            console.log(a);
            console.log(args);
        }
        func(...arr);

        // 功能：数组合并
        let arr1 = [1,2];
        let arr2 = [3,4];
        // 传统方式
        let arr3 = arr1.concat(arr2);
        console.log(arr3);  // [1,2,3,4]
        // 使用扩展运算符
        let arr4 = [...arr1,...arr2];
        console.log(arr4);  // [1,2,3,4]
    </script>

    <script>
        let func = function(){
            console.log(arguments);  // 伪数组  // Arguments(3) ['大哥', '二哥', '三哥', callee: ƒ, Symbol(Symbol.iterator): ƒ]
            // 将伪数组转化为真正的数组
            console.log([...arguments]);  // ['大哥', '二哥', '三哥']
        }
        func('大哥','二哥','三哥');  
    </script>

[10] Symbol：表示独一无二的值                                             // Symbol 内置值的使用（ 了解 ）

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

    <script>
        // 创建Symbol - 使用函数 Symbol() 创建
        // 方式1:
        let s1 = Symbol();  // 说明：这是一个随机的值
        console.log(s1,typeof s1);  // Symbol() 'symbol' 
        let s2 = Symbol('只是一个标识');  // Symbol(只是一个标识)
        console.log(s2);
        let s3 = Symbol('只是一个标识');  // Symbol(只是一个标识)
        console.log(s3 == s2);  // false
        // 方式2:
        let s4 = Symbol.for('只是一个标识');
        console.log(s4,typeof s4);  // Symbol(只是一个标识) 'symbol'
        let s5 = Symbol.for('只是一个标识');
        console.log(s5 == s4);  // true
    </script>

其特点为：

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

    <script>
        // Symbol 的主要应用场景是给对象添加独一无二的属性和方法
        const game = {
            name:'游戏名',
            up(){
                console.log('向上')
            },
            down(){
                console.log('向下')
            }
        }
        // 把它作为一个唯一的值，用来解决命名冲突的问题
        let method = {
            up:Symbol(),
            down:Symbol()
        }
        game[method.up] = function(){
            console.log('upup')
        }
        game[method.down] = function(){
            console.log('down')
        }
        game.up();  //  向上
        game[method.up]();  // upup
    </script>

• Symbol 的值不能与其他数据进行计算；

    <script>
        // Symbol 的值不能与其他数据类型进行计算
        let s6 = Symbol();
        // console.log(s6 + 100);  // Uncaught TypeError: Cannot convert a Symbol value to a number
        // console.log(s6 + 'test');  // Uncaught TypeError: Cannot convert a Symbol value to a string
    </script>

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

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

说明：Symbol 内置值的使用，都是作为某个对象类型的属性去使用

    <script>
        class Person{
            static [Symbol.hasInstance](param){
                console.log(param);  // {name: '对象'}，可以作为一个参数被传递进来
                console.log('进行类型检测了')
            }
        }
        let obj = {name:'对象'};
        // 当进行类型检测的时候就会被触发
        obj instanceof Person;  // 进行类型检测了
    </script>

[11] 迭代器：用来遍历集合、数组等

遍历器（ Iterator ）就是一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。

任何数据结构只要部署 Iterator 接口，就可以完成遍历操作。

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

原生具备 Iterator 接口的数据（ 可以使用 for ... of 遍历 ）有：

• Array
• Arguments
• Set
• Map
• String
• TypeArray
• NodeList

工作原理：

    <script>
        const arr = ['唐僧','孙悟空','猪八戒','沙僧'];
        for(let v of arr){
            console.log(v);  // 依次打印：唐僧 孙悟空 猪八戒 沙僧
        }
        for(let i in arr){
            console.log(i);  // 依次打印：0 1 2 3
        }

        let iterator = arr[Symbol.iterator]();
        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>

• 创建一个指针对象，指向当前数据结构的起始位置；
• 第一次调用对象的 next 方法，指针自动指向数据结构的第一个成员；
• 接下来不断调用 next 方法，指针一直向后移动，直到指向最后一个成员；
• 每调用 next 方法，返回一个包含 value 和 done 属性的对象。

应用场景：需要自定义遍历数据的时候，要想到迭代器。

    <script>
        let obj = {
            name: '一班',
            member: ['小明', '小红', '小白'],
            // 自定义遍历对象
            [Symbol.iterator]: function () {
                let index = 0;
                let that = this;
                return {
                    next: function () {
                        if (index < that.member.length) {
                            const result = {
                                value: that.member[index],
                                done: false
                            }
                            index++;
                            return result;
                        }else{
                            return {value:undefined,done:true}
                        }
                    }
                }
            }
        }

        // 自定义遍历对象 — 要求：输出member中的元素
        for (let v of obj) {
            console.log(v);
        }
    </script>

[12] 生成器：一种异步编程解决方案

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

    <script>
        // 传统函数
        function gen1(){
            console.log(111);
            console.log(222);
            console.log(333);
        }
        gen1();  // 一次打印

        // 生成器函数：在function和函数名之间加一个 *
        function * gen2(){
            console.log(111);
            console.log(222);
            console.log(333);
        }
        // gen();  // 无法调用
        // 其返回值实际是一个迭代器
        let iterator2 = gen2();
        iterator2.next();  // 可以调用

        // 同时，可以搭配yield使用：yield 函数代码的分隔符
        function * gen3(){
            console.log(111);
            yield '片段1'
            console.log(222);
            yield '片段2'
            console.log(333);
            yield '片段3'
        }
        let iterator3 = gen3();
        console.log(iterator3.next())  // 执行片段1部分：111 {value: '片段1', done: false}
        // ...
        // 因为是一个迭代器，因此可以使用 for of 遍历
        for(let v of gen3()){
            console.log(v)
        }
    </script>

生成器函数的参数传递：

    <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()); // 会执行yield 111;
        // next()方法是可以传入参数的，传入的参数作为第一条(上一条)语句yield 111的返回
        console.log(iterator.next("BBB")); // 会执行yield 222; console.log(iterator.next("CCC")); // 会执行yield 333; console.log(iterator.next("DDD")); // 继续往后走，未定义;
    </script>

// 代码示例：

    <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();
            }, 1000)
        }
        function three() {
            setTimeout(() => {
                console.log(333);
                iterator.next();
            }, 1000)
        }
        function* gen() {
            yield one();
            yield two();
            yield three();
        }
        // 调用生成器函数
        let iterator = gen(); iterator.next();
    </script>

// 代码示例：

    <script>
        // 模拟获取: 用户数据 订单数据 商品数据 
        function getUsers() {
            setTimeout(() => {
                let data = "用户数据";
                // 第二次调用next，传入参数，作为第一个的返回值 iterator.next(data); // 这里将data传入
            }, 1000);
        }
        function getOrders() {
            setTimeout(() => {
                let data = "订单数据";
                iterator.next(data); // 这里将data传入 
            }, 1000);
        }
        function getGoods() {
            setTimeout(() => {
                let data = "商品数据"; iterator.next(data); // 这里将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();
    </script>

[13] Promise：非常强大的一步编程的新解决方案

Promise 是 ES6 引入的异步编程的新解决方案。

语法上 Promise 是一个构造函数，用来封装异步操作并可以获取成功或者失败的结果。

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

    <script>
        // Promise 对象的三种状态：初始化、成功、失败
        // 初始化：实例化Promise对象
        let p = new Promise(function(resolve,reject){
            let data = 123;
            // resolve(data);  // 当使用resolve返回时，为成功状态，可以使用then方法的第一个函数接收数据
            reject('出错了！')  // 当使用reject返回时，为失败状态，可以使用then方法的第二个函数接收，或者使用.catch方法接收
        })
        // then 方法
        p.then(function(value){
            console.log(value)
        },function(reason){
            console.log(reason)  // 出错了！
        })
        // catch 方法，一个语法糖，用起来更简洁一些
        p.catch(function(reason){
            console.log(reason)  // // 出错了！
        })
    </script>

代码示例：使用 Promise 封装读取文件

let fs = require('fs');

// Nodejs 常规写法
fs.readFile('./index.html', (err, data) => {
    if (err) {
        return;
    }
    console.log(data.toString())
})

// Nodejs 使用 Primise 封装写法
let p = new Promise((resolve, reject) => {
    fs.readFile('./index.html', (err, data) => {
        if (err) {
            reject(err)
        }
        resolve(data)
    })

})
p.then(value => {
    console.log(value.toString())
}).catch((err) => {
    console.log(err)
})

[14] Set 集合：类似数组，但元素不重复的集合

ES6 提供了一种新的数据结构 Set（ 集合 ），它类似于数组，但成员的值都是唯一的（ 没有重复 ）。

集合实现了 Iterator 接口，因此，可以使用 “ 扩展运算符 ” 和 “ for ... of  ”。

集合的属性和方法有：

• size 属性，返回集合的元素个数；
• add() 方法，增加一个新元素，返回当前集合；
• delete() 方法，删除一个元素，返回 boolean 值；
• has() 方法，检测集合中是否包含某个元素，返回 boolean 值；
• clear() 方法，清空集合，返回 undefined;

    <script>
        let s = new Set();
        console.log(s,typeof s);  // Set(0) {size: 0} 'object'

        let s1 = new Set(['大哥','二哥','三哥','三哥','大哥']) 
        // 自动去重
        console.log(s1);  // Set(3) {'大哥', '二哥', '三哥'}
        // 返回集合的元素个数
        console.log(s1.size);  // 3
        // add() 增加一个新元素，返回当前集合
        console.log(s1.add('大姐'));  // Set(4) {'大哥', '二哥', '三哥', '大姐'}
        // delete() 删除一个元素，返回boolean值
        console.log(s1.delete('二哥'));  // true
        console.log(s1);  // Set(3) {'大哥', '三哥', '大姐'}
        console.log(s1.delete('二弟'))  // false
        // has() 判断集合中是否包含某个元素，返回boolean值
        console.log(s1.has('大姐'));  // true
        console.log(s1.has('三弟'));  // false
        // clear() 清空集合，返回undefined
        console.log(s1.clear())  // undefined
        console.log(s1)  // Set(0) {size: 0}
    </script>

代码示例：

    <script>
        let arr = [1,2,3,4,5,6,5,4,3,2,1];
        // 数组去重
        let s = new Set(arr);
        console.log(s);  // Set(6) {1, 2, 3, 4, 5, 6}
        // 转化为数组
        arr = [...s];
        console.log(arr);  // [1, 2, 3, 4, 5, 6]
        // 取两个数组的交集
        let arr1 = [3,4,5,6,7,8,3,4,5]
        let s1 = new Set(arr1);
        let result1 = [];
        arr.filter(item => {
            if(s1.has(item)){
                result1.push(item);
            }
        })
        console.log(result1);  // [3, 4, 5, 6]
        // 取两个数组的并集
        let result2 = [...new Set([...arr,...arr1])];
        console.log(result2);  // [1, 2, 3, 4, 5, 6, 7, 8]
    </script>

[15] Map 集合：键值对集合        —  升级版的“对象”

ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合。

但是，“键”的范围并不局限于字符串，各种类型的值（ 包括对象 ）都可以作为键。

Map 集合也实现了 Iterator 接口，所以，可以使用 “ 扩展运算符 ” 和 “ for ... of ”。

Map 的属性和方法：

• size 属性，返回 Map 集合的元素个数；
• set() 方法，增加一个新元素，返回当前 Map；
• delete() 方法，删除一个元素，返回 boolean 值；
• get() 方法，返回键名对象对应的键值；
• has() 方法，检测 Map 集合中是否包含某个元素，返回 boolean 值；
• clear() 方法，清空集合，返回 undefined；

<script>
    let m1 = new Map();  // 创建一个空集合
    console.log(m1,typeof m1);  // Map(0) {size: 0} 'object'

    let m2 = new Map([
        ['name','名字'],
        ['slogan','宣传标语']
    ])
    console.log(m2);  // Map(2) {'name' => '名字', 'slogan' => '宣传标语'}
    console.log(m2.size)  // 2
    m2.set('address','地址')
    console.log(m2)  // Map(3) {'name' => '名字', 'slogan' => '宣传标语', 'address' => '地址'}
    // 删除
    m2.delete('name');
    console.log(m2);  // Map(2) {'slogan' => '宣传标语', 'address' => '地址'}
    console.log(m2.get('slogan'))  // 宣传标语
    console.log(m2.has('address'))  // true
    console.log(m2.clear());  // undefined
    console.log(m2)  // Map(0) {size: 0}
</script>

[16] Class 类：像 Java 实体类一样声明 JS 类

ES6 提供了更接近传统语言的写法，引入了 class（ 类 ）这个概念，作为对象的模板。

通过 class 关键字，可以定义类。

基本上，ES6 的 class 可以看作是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 class 写法只是让对象原型的写法更加清晰、更加面向对象编程的语法而已。

<script>
    // ES5 构造函数写法
    function Tel(brand,price){
        this.brand = brand;
        this.price = price;
    }
    Tel.prototype.call = function(){
        console.log('拨打电话')
    }
    let xiaomi = new Tel('小米',3000);
    console.log(xiaomi.brand,xiaomi.price);  // 小米 3000
    xiaomi.call();  // 拨打电话
    // class 写法
    class Phone {
        // 构造函数
        constructor(brand,price){
            this.brand = brand;
            this.price = price;
        }
        call(){
            console.log('打电话');
        }
    }
    let huawei = new Phone('华为',5000);
    console.log(huawei.brand,huawei.price);  // 华为 5000
    huawei.call();  // 打电话
</script>

• static 定义静态属性和方法

<script>
    class Phone{
        static name = '名字'
        static change(){
            console.log('方法执行了')
        }
        call(){
            console.log('打电话')
        }
    }
    let xiaomi = new Phone();
    console.log(xiaomi.name)  // undefined
    Phone.change();  // 方法执行了
    // xiaomi.change();  // xiaomi.change is not a function
    xiaomi.call();  // 打电话
</script>

• class 类继承 & 对父类方法进行重写

<script>
    class Phone{
        constructor(brand,price){
            this.brand = brand;
            this.price = price;
        }
        call(){
            console.log('打电话')
        }
    }
    class SmartPhone extends Phone{
        constructor(brand,price,color){
            super(brand,price);
            this.color = color;
        }
        // 对父类方法进行重写
        call(){
            console.log('视频通话')
        }
    }
    let huawei = new SmartPhone('华为',5000,'黑色');
    console.log(huawei);  // SmartPhone {brand: '华为', price: 5000, color: '黑色'}
    huawei.call();  // 视频通话
</script>

• class 中的 getter 和 setter 设置

<script>
    class Phone{
        get price(){
            console.log('价格被读取了')
            return 1000
        }
        set price(args){
            console.log('价格被设置了')
            this._price = args;
            // this.price = args;  // 不要这样写，因为给this.price赋值的时候，会调用 set price，这样会导致无限递归直到栈溢出。
        }
    }
    let xiaomi = new Phone();
    console.log(xiaomi.price);  // 价格被读取了 1000
    xiaomi.price = 2999;  // 价格被设置了
    console.log(xiaomi._price);  // 2999
</script>

[17] 数值扩展：增加一些数值相关的方法等

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

<script>
    // 二进制和八进制
    console.log(0b1010);  // 二进制 10
    console.log(0o777);  // 八进制 511
    console.log(100);  // 十进制 100
    console.log(0xff);  // 十六进制 255
</script>

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

<script>
    // 检测一个数值是否为 NAN
    // Number.isNaN 如果检测值不是 Number 类型，直接返回false
    // 也就是说，只有数值类型的值，且是NaN,才会返回true
    // 具体可以看百科中，返回 NaN 的运算
    console.log(Number.isNaN(NaN))  // true
    console.log(Number.isNaN(0/0))  // true
    console.log(Number.isNaN(123));  // false
    console.log(Number.isNaN('测试'))  // false
</script>

[18] 对象扩展：增加一些对象相关的方法等

[19] 模块化 ？！：简单来说就是，将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来

[20] Babel 对 ES6 模块化代码转换（ 为了适配浏览器，将更新的 ES 规范转换为 ES5 规范 ）

ES7 新特性

ES8 新特性

ES9 新特性

• 在对象中使Rest参数与spread扩展运算符

<script>
    // 在对象中使用扩展运算符
    function connect({host,port,...user}){
        console.log(host);  // http://127.0.0.1
        console.log(port);  // 8080
        console.log(user);  // {username: 'root', password: 'root'}
    }
    connect({
        host:'http://127.0.0.1',
        port:8080,
        username:'root',
        password:'root'
    })
</script>

<script>
    // 对象中的rest参数
    const skill1 = {
        q:'技能1'
    }
    const skill2 = {
        w:'技能2'
    }
    const skill3 = {
        e:'技能3'
    }
    const skill4 = {
        r:'技能4'
    }
    // 对象合并
    const skill = {...skill1,...skill2,...skill3,...skill4}
    console.log(skill);  // {q: '技能1', w: '技能2', e: '技能3', r: '技能4'}
</script>

• 正则扩展：简化和增强正则匹配

ES10 新特性

ES11 新特性