ES6学习笔记（第一讲）

现在主流的浏览器实施的是ES5（javascript的一套标准），ECMAScript6是2015年6月发布的一套新的标准，添加了许多新的特性，一些现代的浏览器也开始逐步实施这套标准，但仍不能使用它所有的功能。我们可以借助一些编译工具，如babel、JSPM、traceur等来把ES6的语法编译为ES5。下面我们主要来介绍traceur的用法。其说明文档详见 https://github.com/google/tra... 。其基本用法的示例代码如下所示：

    <script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
    <script src="https://google.github.io/traceur-compiler/bin/BrowserSystem.js"></script>
    <script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
    <script type="module">  
        //es6 code
    </script>  

1、由于ES6的新语法特性正在逐步被高级的浏览器所支持，我们在使用ES6的某些新语法特性时可以先不引用编译文件，看是否被支持，若不能被浏览器所兼容，再引用编译文件。
2、由于node.js使用的是chrome的内核，es6当中的大部分语法特性都可以在node当中直接使用了。一般我们需要在node文件的开头加上'use strict';,或者在运行某js文件时，使用命令-> node --harmony_destructuring x.js。

1、let

在ES5的这套标准当中，javascript只有全局作用域与函数作用域，ES6当中又增加了块级作用域的概念。定义一个代码块最简单的方法就是使用一组大括号，一组大括号的内部即为一个块级作用域，我们使用let定义的变量只能在定义它的那个块级作用域内有效，在代码块的外部无法使用该变量。并且使用let定义的变量不允许重复声明。示例代码如下所示：

    <script>
        {
            let a = 10;
            console.log(a);
        }
        console.log(a);
    </script>

2、const

我们可以使用const来声明一个恒量。当一个变量第一次被声明时使用const，则代表这是一个恒量，之后则不允许再给这个变量分配新的值。 我们在使用const定义变量时，必须给初始值，否则会报错。并且使用const同样也不允许重复声明。当我们引入库或者组件时，为了防止意外修改变量，则最好使用const来声明这些变量。
使用const只是限制了给恒量分配值这个动作，并不是限制恒量当中的值，故下面的代码也是正确的：

<script>
    const a = ['apple'];
    a.push('banana');
    const b = {name:'linqian'};
    b.name = 'qianqian';
    console.log(a);
    console.log(b);
</script>

3、destructuring（解构赋值）

解构赋值可以批量的完成对应变量和对应值之间的赋值绑定。我们在使用解构赋值时，需要注意的是，要遵循模式匹配原则，即保证等号两边的结构保持一致，等号右边表达式当中的值需要由左边表达式当中的某个变量来接收。利用解构赋值来把一个数组当中不同的项分配给指定的变量的示例代码如下所示：

    <script>
        let arr = ['apple','banana','pear'];
        let [a,b,c] = arr;
        console.log(a,b,c);
    </script>

输出结果为'apple banana pear'。我们同样也可以使用解构对象，将这个对象当中的属性值赋值给对应的变量。此时两边结构要保持一致，由一致的属性名来确定对应的匹配关系，故这种情况下赋值与顺序无关。示例代码如下所示：

<script>
    let json1 = {dessert:'cake',fruit:'apple'};
    let {dessert:num1,fruit:num2} = json1;
    let json2 = {a:12,b:5,c:100};
    let {b,a,c} = json2;
    console.log(num1,num2);
    console.log(a,b,c);
</script>

输出结果为'cake apple'和'12 5 100'。我们在处理交互得到的数据时，可以使用解构赋值来方便地进行数据解析。

4、template-strings（模板字符串）

使用模板字符串可以方便的完成字符串的拼接，我们只需在字符串的首尾使用一对反引号进行包裹，字符串内部的变量放在${}当中，变量名经过${}处理之后会自动被替换成变量对应的值，此时变量与字符串之间不再需要使用连字符来进行连接。模板字符串内部可以随意的换行书写，不需要其他的字符串拼接操作。示例代码如下所示：

    <script>
        let dessert = 'cake';
        let fruit = 'apple';
        let result = `今天的早餐是${dessert}和${fruit}！`;
        console.log(result);
    </script>

输出结果为'今天的早餐是cake和apple！'。

5、strings-function（字符串函数）

ES6当中新增了一些字符串方法，可以方便的判断一个字符串当中是否包含其他的字符串。

1. A.startsWith(B) 可以用于判断字符串A是否以字符串B开始。
2. A.endsWith(B) 可以用于判断字符串A是否以字符串B结束。
3. A.includes(B) 可以用于判断字符串A是否包含字符串B。

这三种方法返回的均为布尔值。示例代码如下所示：

<script>
    let dessert = 'cake';
    let fruit = 'apple';
    let result = `今天的早餐是${dessert}和${fruit}！`;
    console.log(result.startsWith('今天'));
    console.log(result.endsWith('！'));
    console.log(result.includes('cake'));
</script>

输出均为'true'。

6、...操作符

...是ES6当中新增的一个操作符，可以叫做spread（展开）或者rest（剩余）操作符，具体这个操作符是什么意思，取决于怎么使用。

6.1、...作为spread展开操作符：

我们将...操作符放在一个数组名的前面，表示对这个数组进行展开，得到数组当中的值。如我们可以使用let arr2 = [...arr];来对数组arr来进行复制操作并赋值给变量arr2。示例代码如下所示：

<script>
    let arr = ['apple','banana'];
    let food = ['pear',...arr];
    console.log(...arr);
    console.log(food);
</script>

其输出结果为apple banana和["pear","apple","banana"]。

6.2、...作为rest剩余操作符

剩余操作符一般会用在函数的形参列表当中。如果声明一个函数时，想让该函数支持更多的参数，并且参数的数量不受限制，则可以使用剩余操作符。比如我们在一个函数声明的形参列表的最后加上...food，则代表传递给该函数的实参，除了按顺序赋值给对应的形参之外，剩余的参数都放在food这个数组当中。示例代码如下所示：

    <script>
        function breakfast(dessert,drink,...fruits){
            console.log(dessert,drink,fruits);
            console.log(dessert,drink,...fruits);
        };
        breakfast('cake','tea','apple','banana');
    </script>

其输出结果为cake tea ["apple","banana"]和cake tea apple banana。

7、tagged-templates（带标签的模板字符串）

我们可以在模板字符串的前面加上一个标签，使用这个标签可以去处理模板字符串里的字符和插入的一些值。标签函数当中默认接收两个参数strings和...values，其中strings和values均为数组，该模板字符串当中被${变量}所打断分割的字符串，按先后顺序出现在strings这个数组当中；该模板字符串当中被${}包裹的变量值，按先后顺序出现在values这个数组当中。示例代码如下所示：

    <script>
        let dessert = 'cake';
        let fruit = 'apple';
        function breakfast(strings,...values){
            console.log(strings);
            console.log(values);
        };
        // 声明定义该标签函数
        breakfast`今天的早餐是${dessert}和${fruit}!`;
        // 执行调用标签函数
    </script>

输出结果为["今天的早餐是","和","!"]和["cake","apple"]。

8、default parameter values（函数参数的默认值）

在ES6当中我们可以给定义的函数所接收的参数设置默认的值。即我们在声明一个函数时，给其形参设置默认的值。我们在调用该函数时，如果没有传入实参，就会使用这些参数默认的值。示例代码如下所示：

    <script>
        function breakfast(dessert='cake',drink='tea'){
            console.log(dessert,drink);
        };
        breakfast();
    </script>

输出结果为cake tea。

9、arrow functions（箭头函数）

ES6当中箭头函数的语法形式为：let 自定义函数名 = (形参列表)=>{函数体};。使用箭头函数的两个注意点为：

1. 箭头函数体内部的this，不再指向事件对象，在浏览器环境下指向window对象。
2. 箭头函数体内部的arguments对象失效，不再代表函数的实参列表数组。

示例代码如下所示：

    <script>
        var a = 3;
        var json1 = {
            a:1,
            b:2,
            show:function(){
                console.log(this.a);
            }
        };
        var json2 = {
            a:1,
            b:2,
            show:()=>{
                console.log(this.a);
            }
        };
        json1.show();
        json2.show();
    </script>

输出结果为1和3。

10、Map 对象

Map对象和json对象相似，都是一种key-value的形式，但使用方法上还是与json有区别，Map对象是为了配合for-of循环的使用而生的。

1. 声明一个Map对象。 let map = new Map();
2. 给Map对象设置对应的key-value值。语法格式为map.set('key','value');如map.set('a','apple');
3. 获取Map对象当中某个指定的属性值。语法格式为map.get('key');如map.get('a');。
4. 删除Map对象当中某一组key-value值。语法格式为map.delete('key');如map.delete('a');。
5. 查看Map对象当中键值对的个数。语法格式为map.size;。
6. 判断Map对象当中是否有某个属性。语法格式为map.has('key');如map.has('a');返回结果为布尔值。
7. 清空整个Map对象。语法格式为map.clear();。

11、Set 对象

Set对象意为一堆东西的集合，类似与数组，但是与数组不同之处在于Set当中不能有重复的内容。

1. 创建一个Set对象 let set = new Set();
2. 给Set对象增加项目（若增加的是set当中已有的项目，则无效果）。语法格式为set.add('value');。
3. 从Set对象当中删除某个项目。语法格式为set.delete('value');。
4. 查看Set对象当中项目的个数。语法格式为set.size;。
5. 判断Set对象当中是否包含某个项目。语法格式为set.has('value');。返回结果为布尔值。
6. 清空Set对象当中的项目。语法格式为set.clear();。

12、for...of 循环

ES6当中新增的for...of循环可以用于循环数组或Map对象，但不能用于循环json对象。
使用for...of循环数组的示例代码如下所示：

    <script>
        let arr = ['a','b','c'];
        //默认情况下只循环数组当中的值
        let arr1 = [];
        for(let value of arr){
            arr1.push(value);
        };
        //给数组arr加上方法.keys(),使之只循环数组当中的索引值
        let arr2 = [];
        for(let key of arr.keys()){
            arr2.push(key);
        };
        //给数组arr加上方法.entries(),使之同时循环数组当中的索引和值
        let arr3 = [];
        for(let some of arr.entries()){
            arr3.push(some);
        };
        //查看结果
        console.log(arr1);
        console.log(arr2);
        console.log(arr3);
    </script>

输出结果如下图所示：

使用for...of循环Map对象的示例代码如下所示：

    <script>
        let map = new Map();
        map.set('a','apple');
        map.set('b','banana');
        // 默认情况下循环Map对象当中的key-value值，每一项为数组，第一项为key，第二项为value值。
        let arr1 = [];
        for(let some of map){
            arr1.push(some);
        };
        console.log(arr1);
        //给Map对象加上方法.entries()，运行结果和默认情况的一样。
        let arr2 = [];
        for(let some of map.entries()){
            arr2.push(some);
        };
        console.log(arr2);
        //结合解构赋值的应用
        for(let [key,value] of map.entries()){
            console.log(key);
            console.log(value);
        };
        //给Map对象加上方法.keys(),使之只循环key。
        let arr3 = [];
        for(let key of map.keys()){
            arr3.push(key);
        };
        console.log(arr3);
        //给Map对象加上方法.values(),使之只循环value值。
        let arr4 = [];
        for(let value of map.values()){
            arr4.push(value);
        };
        console.log(arr4);
    </script>

输出结果如下图所示：