在拉钩学习的笔记（十一）ES6新特性

1、 ECMAScript 概述
    通常将 ECMAScript 看作是 JavaScript 的标准规范；实际上 JavaScript 是 ECMAScript 的扩展语言， ECMAScript 只是提供了最基本的语法
    2015 年开始 ES 保持每年一个版本的迭代； ES2015 开始按照年份开始命名，很多人习惯将 ES2015 称之为 ES6
2、 ECMAScript2015
    最新 ECMAScript 标准的代表版本
    http://www.ecma-international.org/ecma-262/6.0/
    ES2015 ： 解决原有语法上的一些问题或者缺陷；对原有语法进行增强； 全新的对象、全新的方法、全新的功能； 全新的数据类型和数据结构
3、let 与块级作用域
    作用域 - 某个成员能够起作用的范围
    在 ES2015 之前， ES 只有两种作用域： 全局作用域；函数作用域； 
    在 ES2015 之后，新增了一个 块级作用域
    块， 就是 {} 包裹起来的一个范围
    可以通过新关键字 let 定义块内部的变量； let 定义的变量在块级作用域内部能够被访问； 非常适合设置在 for 循环中的循环变量； 可以解决闭包出现的问题
    和 var 有另一个区别， let 不会进行变量声明提升
4、const 关键字，可以声明一个 恒量/常量
    特点： 在 let 的基础上增加了一个【只读】效果（声明后不能被修改）；声明的时候必须同时赋初值
    三个声明关键字，最佳实践：不用 var ，主用 const， 配合 le
5、数组的解构 
    const arr = ["1", "2", "3"];
    const [, , arr3] = arr;
    console.log(arr3);  // "3"
6、对象的解构
    const obj = { name : 'zc', age : 18 };
    const { name : newName = "jack" } = obj;
    console.log(newName);  // ‘zs’
7、模板字符串
    用``创建模板字符串；在模板字符串中用 ${} 插入值
    const name = "tom";
    const str = `this is ${name}`;
    模板字符串标签函数
8、字符串扩展方法
    includes()      包含
    starsWith()     以…开头
    endsWith()      以…结尾
9、参数默认值
    function fun (a, b = 2) {
        console.log(a + b);
    }
    fun(1);
    参数默认值等号赋值，有默认值的参数写在没有默认值的后面
10、...
    剩余操作符
        function (n, ...args) {
            console.log(arguments);     // 输出所有实参的类数组
            console.log(args);          // 输出剩余所有实参的数组
        }
        fun(1, 2, 3, 4);
    展开操作符
        const arr = ["foo", "bar", "baz"];
        console.log(arr[0], arr[1], arr[2]);    // foo bar baz
        console.log(...arr);        // foo bar baz
11、箭头函数 =>
    传统定义函数表达式：
        function plus (a)  {
            return a + 1;
        }
    箭头函数简化定义函数：
        const plus = a => a + 1;        // plus 函数名称； a  参数； a + 1 一行表达式将运行结果作为返回值

        const plus = (a, b) => {        // 多个参数(a, b) ； 多条语句写在{}内，并用 return 设置返回值
            console.log('内容');
            return a + b;
        }
    筛选函数filter() 方法
        创建一个新数组, 其包含通过所提供函数实现的测试的所有元素；
        参数 用来测试数组的每个元素的函数；
        返回 true 表示该元素通过测试，保留该元素，false 则不保留
    const arr = [1,2,3,4,5,6];

    const arr1 = arr.filter(function (item) {
        return item % 2;
    });
    // 👆和👇是一样的意思
    const arr1 = arr.filter(i => i % 2);    
    箭头函数内部没有 this 机制
12、对象字面量增强
    const bar = "bar";
    const age = "sex";
    const obj = {
        name = "tom",
        // bar = bar,
        bar,     // 如果变量名和变量值相等的话，可以省略
        sayHi () {},    // 一般方法可以省略写  sayHi : function () {}
        [age] : 18      // age 可以动态获取表达式的值：计算属性名
    }
13、对象扩展的方法
    Object.assign() 方法
        将多个源对象中的属性复制到一个目标对象中
        参数： 第一个目标对象， 第二个原对象
    Object.is() 方法
        判断两个参数是否相等
        参数：两个比较的数据    NaN === NaN (false)  Object.is(NaN, NaN); (true)  
14、class 类
    class Person {
        constructor (name, age) {
            this.neme = name;
            this.age = age;
        }
        sayHi () {
            console.log(`hi,my name is $(this.name)`);
        }
        static creat (name, age) {       // 声明一个静态方法
            return Person(name, age);   // 返回创建函数
        }
    }
    const p1 = new Person("zs", 18);        //  const p1 = Person.creat("zs", 18);
15、静态方法 static
    ES2015 中新增添加静态方法的关键词 static； 表示声明的是个静态方法
    静态方法中的 this 指向的不是某一个实例对象，而是类型整体
16、类的继承
    class Student extends Person {
        constructor(name, age, number) {
            super(name, age);        // 相当于直接调用父类的constructor
            this.number = number;
        }
    }
17、 Set 数据结构
    一种新的数据类型；存储不重复的数据
    const s = new Set();
    s.add(1).add(2).add(3).add(4).add(3);
    console.log(s);             // Set(4) {1, 2, 3, 4};
    s.size  数据长度
    s.has()     判断是否包含某个值；参数是值，返回值true false
    s.delete()  删除某项值，返回值是删除的项，参数是想要删除的项
    s.clear()   清空所有数据
18、map 数据结构        可以使用任意类型的值作为键，在对象里只能使用字符串作为键
    Object.keys(obj) 获取对象的所有键
    const map = new Map();
    const a = {a : 1};
    map.set(a, 100);            // 设置 a 的值为 100
    map.get(a);                 // 获取 a 的值
    map.has()       判断是否包含某个值；参数是值，返回值true false
    map.delete()  删除某项值，返回值是删除的项，参数是想要删除的项
    map.clear()   清空所有数据
    遍历
    map.forEach((value, key) => {
        console.log(key, value);
    });
10、Symbol 数据类型 新的原始数据类型
    symbol 符号，作用就是表示一个独一无二的值。     Symbol('foo');  foo描述文本
    最主要的作用就是为对象添加独一无二的属性标识符
    const s = Symbol();
    console.log(s);         // Symbol()
    console.log(typeof s);  // symbol
11、for of 遍历
    遍历所有数据结构的统一方式
    const arr = [100, 200, 300];
    for (const item of arr) {console.log(item);}
12、 ES2015 其他内容
    可迭代接口
    迭代器模式
    生成器
    Proxy 代理对象
    Reflect 统一的对象操作 API
    Peomise 异步解决方案
    ES Modules 语言层面的模块化标准
13、 ES2016 新增内容
    数组的 includes() 方法   包含
    指数运算符 **