ES6學習筆記（第一講）

時間 2019-12-04

原文原文鏈接

如今主流的瀏覽器實施的是ES5（javascript的一套標準），ECMAScript6是2015年6月發佈的一套新的標準，添加了許多新的特性，一些現代的瀏覽器也開始逐步實施這套標準，但仍不能使用它全部的功能。咱們能夠藉助一些編譯工具，如babel、JSPM、traceur等來把ES6的語法編譯爲ES5。下面咱們主要來介紹traceur的用法。其說明文檔詳見 https://github.com/google/tra... 。其基本用法的示例代碼以下所示：javascript

<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>

一、因爲ES6的新語法特性正在逐步被高級的瀏覽器所支持，咱們在使用ES6的某些新語法特性時能夠先不引用編譯文件，看是否被支持，若不能被瀏覽器所兼容，再引用編譯文件。
二、因爲node.js使用的是chrome的內核，es6當中的大部分語法特性均可以在node當中直接使用了。通常咱們須要在node文件的開頭加上'use strict';,或者在運行某js文件時，使用命令-> node --harmony_destructuring x.js。java

一、let

在ES5的這套標準當中，javascript只有全局做用域與函數做用域，ES6當中又增長了塊級做用域的概念。定義一個代碼塊最簡單的方法就是使用一組大括號，一組大括號的內部即爲一個塊級做用域，咱們使用let定義的變量只能在定義它的那個塊級做用域內有效，在代碼塊的外部沒法使用該變量。而且使用let定義的變量不容許重複聲明。示例代碼以下所示：node

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

二、const

咱們可使用const來聲明一個恆量。當一個變量第一次被聲明時使用const，則表明這是一個恆量，以後則不容許再給這個變量分配新的值。咱們在使用const定義變量時，必須給初始值，不然會報錯。而且使用const一樣也不容許重複聲明。當咱們引入庫或者組件時，爲了防止意外修改變量，則最好使用const來聲明這些變量。
使用const只是限制了給恆量分配值這個動做，並非限制恆量當中的值，故下面的代碼也是正確的：git

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

三、destructuring（解構賦值）

解構賦值能夠批量的完成對應變量和對應值之間的賦值綁定。咱們在使用解構賦值時，須要注意的是，要遵循模式匹配原則，即保證等號兩邊的結構保持一致，等號右邊表達式當中的值須要由左邊表達式當中的某個變量來接收。利用解構賦值來把一個數組當中不一樣的項分配給指定的變量的示例代碼以下所示：es6

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

輸出結果爲'apple banana pear'。咱們一樣也可使用解構對象，將這個對象當中的屬性值賦值給對應的變量。此時兩邊結構要保持一致，由一致的屬性名來肯定對應的匹配關係，故這種狀況下賦值與順序無關。示例代碼以下所示：github

<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'。咱們在處理交互獲得的數據時，可使用解構賦值來方便地進行數據解析。chrome

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

使用模板字符串能夠方便的完成字符串的拼接，咱們只需在字符串的首尾使用一對反引號進行包裹，字符串內部的變量放在${}當中，變量名通過${}處理以後會自動被替換成變量對應的值，此時變量與字符串之間再也不須要使用連字符來進行鏈接。模板字符串內部能夠隨意的換行書寫，不須要其餘的字符串拼接操做。示例代碼以下所示：json

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

輸出結果爲'今天的早餐是cake和apple！'。bootstrap

五、strings-function（字符串函數）

ES6當中新增了一些字符串方法，能夠方便的判斷一個字符串當中是否包含其餘的字符串。數組

A.startsWith(B) 能夠用於判斷字符串A是否以字符串B開始。
A.endsWith(B) 能夠用於判斷字符串A是否以字符串B結束。
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'。

六、`...`操做符

...是ES6當中新增的一個操做符，能夠叫作spread（展開）或者rest（剩餘）操做符，具體這個操做符是什麼意思，取決於怎麼使用。

6.一、`...`做爲`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.二、`...`做爲`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。

七、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"]。

八、default parameter values（函數參數的默認值）

在ES6當中咱們能夠給定義的函數所接收的參數設置默認的值。即咱們在聲明一個函數時，給其形參設置默認的值。咱們在調用該函數時，若是沒有傳入實參，就會使用這些參數默認的值。示例代碼以下所示：

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

輸出結果爲cake tea。

九、arrow functions（箭頭函數）

ES6當中箭頭函數的語法形式爲：let 自定義函數名 = (形參列表)=>{函數體};。使用箭頭函數的兩個注意點爲：

箭頭函數體內部的this，再也不指向事件對象，在瀏覽器環境下指向window對象。
箭頭函數體內部的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。

十、Map 對象

Map對象和json對象類似，都是一種key-value的形式，但使用方法上仍是與json有區別，Map對象是爲了配合for-of循環的使用而生的。

聲明一個Map對象。 let map = new Map();
給Map對象設置對應的key-value值。語法格式爲map.set('key','value');如map.set('a','apple');
獲取Map對象當中某個指定的屬性值。語法格式爲map.get('key');如map.get('a');。
刪除Map對象當中某一組key-value值。語法格式爲map.delete('key');如map.delete('a');。
查看Map對象當中鍵值對的個數。語法格式爲map.size;。
判斷Map對象當中是否有某個屬性。語法格式爲map.has('key');如map.has('a');返回結果爲布爾值。
清空整個Map對象。語法格式爲map.clear();。

十一、Set 對象

Set對象意爲一堆東西的集合，相似與數組，可是與數組不一樣之處在於Set當中不能有重複的內容。

建立一個Set對象 let set = new Set();
給Set對象增長項目（若增長的是set當中已有的項目，則無效果）。語法格式爲set.add('value');。
從Set對象當中刪除某個項目。語法格式爲set.delete('value');。
查看Set對象當中項目的個數。語法格式爲set.size;。
判斷Set對象當中是否包含某個項目。語法格式爲set.has('value');。返回結果爲布爾值。
清空Set對象當中的項目。語法格式爲set.clear();。

十二、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>

輸出結果以下圖所示：