對ES6的一次小梳理

今天閒的沒事回顧了ES6的一些知識，下面寫的不是特別詳細，只是相似於一個大綱，今天我居然敢睡到八點起牀了，md，我膨脹了，趕忙寫篇博客壓壓驚

下面來看看ES6給咱們提供了哪些新東西

（1）新的變量聲明方式let/const（不具有變量提高，不可重複聲明）

    let：聲明的變量僅在塊級做用域內有效
    const：常量，值一旦定義不可更改；聲明時要賦初值

 

（2）解構賦值：對象/數組賦值

    對象賦值：對象根據屬性名一一對應，無序對應
        首先有這麼一個對象const props = {
            className: 'tiger-button',
            loading: false,
            clicked: true,
            disabled: 'disabled'
            }
        // es5
        var loading = props.loading;
        var clicked = props.clicked;
        // es6
        const { loading, clicked } = props;
    數組賦值：數組以序列號一一對應，有序對應；容許指定默認值；內部使用嚴格相等運算符（===）
        // es6
        const arr = [1, 2, 3];
        const [a, b, c] = arr;

        // es5
        var arr = [1, 2, 3];
        var a = arr[0];
        var b = arr[1];
        var c = arr[2];

 

（3）字符串的遍歷：for...of循環遍歷

        for(let codePointAt of 'hicai'){
        console.log(codePointAt);
        }  // h i c a i
        遍歷對象用for...in

 

 

 

（4）箭頭函數：

        // es5 寫法
        var fn = function(a, b) {
          return a + b;
        }
        // es6 箭頭函數寫法，當函數直接被return時，能夠省略函數體的括號{}
        const fn = (a, b) => { a + b };  // {}能夠省略

　　注意：

        　　箭頭函數能夠替換函數表達式，可是不能替換函數聲明；

        　　箭頭函數自己沒有this，其中的this指的是外層的this；

        　　箭頭函數不可使用arguments對象，該對象在函數體內不存在；

        　　不可使用yield命令，所以箭頭函數不能用做Generator函數。

 

 

（5）字符串模板：爲了解決+號拼接字符串的不便利。用 ` `包裹字符串，在其中用${}包裹變量或表達式。

// es5寫法
        var a = 20;
　　　　　var b = 30;
　　　　　var string = a + "+" + b + "=" + (a + b); 

// es6寫法
        const a = 20;const b = 30;const string = `${a}+${b}=${a+b}`;
                     

 

（6）展開運算符：（提升代碼效率）

        ES6中用...來表示展開運算符，能夠將數組方法或者對象方法進行展開；
        數組：
            const arr1 = [1, 2, 3];
            const arr2 = [...arr1, 10, 20, 30];
            // 這樣，arr2 就變成了[1, 2, 3, 10, 20, 30];
        對象：
            const obj1 = {a:1,b:2,c:3}
            const obj2 = {
            ...obj1,  d: 4,  e: 5,  f: 6
        }
        // 結果相似於 const obj2 = Object.assign({}, obj1, {d: 4})

 

（7）class（類）

        在js中，每一個對象都有原型對象，全部js對象都從原型上繼承方法和屬性；
        ES5中，屬性放在構造函數constructor裏，方法放在原型prototype上；
        ES6中引入類class來代替構造函數constructor；還提供了extends劃分super關鍵字；

（8）promise對象：解決異步編程

        特色：a）對象的狀態不受外界影響，promise對象表明一個異步操做，有三種狀態：pending（進行中）、resolve（成功）、rejected（失敗）
        一旦狀態改變，就不會改變
        基本用法：
        Promise構造函數的兩個參數是resolve和reject；
        Promise實例生成後，能夠用then方法分別制定resolve和rejected狀態的回調函數；
        Promise的then方法是定義在原型對象Promise.prototype上的，then方法返回的是一個新的Promise實例，不是原來那個Promise實例，所以能夠用鏈式寫法；
        方法1：Promise.all()方法用於將多個promise實例包裝成一個新的promise實例；
        方法2：Promise.race()方法只要有一個peomise執行完畢就執行

（9）模塊化

export用於對外輸出本模塊（一個文件能夠理解爲一個模塊）變量的接口

import用於在一個模塊中加載另外一個含有export接口的模塊。

（10）數組新API

    Array.from()方法能夠將僞數組轉爲數組
　　 Array.of()將一組數字轉化爲數組

（11）Set和Map數據結構：

        

　　　　Set
            a）Set實例成員值惟一存儲key值，map實例存儲鍵值對（key-value）
            b）Set實例的方法分爲兩大類：操做方法（用於操做數據）和遍歷方法（用於遍歷成員）。
            操做方法：
                add（value）：添加某個值,返回Set結構自己
                delete（value）：刪除某個值，返回布爾值
                has（value）：返回布爾值，表示該值是否爲Set的成員
                clear（）：清除全部成員，沒有返回值
            遍歷方法：
                keys()：返回鍵名
                values()：返回鍵值   
                entries()：返回鍵值對
                forEach()：使用回調遍歷每一個成員
      　Map  
            a）Map的鍵其實是跟內存地址綁定的，只要內存地址不同，就視爲兩個鍵；
            b）Map實例的屬性和操做方法：
                size屬性：返回Map結構的成員總數；
                set(key, value)：設置鍵名key對應的鍵值爲value，而後返回整個Map結構，若key已有值，則更新鍵值，不然生成該鍵。
                get(key)：讀取key對應的鍵值
                has(key)：返回布爾值，表示某個鍵是否存在當前map對象中。
                delete(key)：刪除某個鍵，返回true，刪除失敗返回false
                clear()：其清除全部成員，沒有返回值
            c）map的遍歷方法：
                keys()：返回鍵名
                values：返回鍵值
                entries：返回全部成員
                forEach()：遍歷map的全部成員，map的遍歷順序就是插入順序

 

 

 

（12）Symbol：新的數據類型，表示獨一無二的值，不會與其餘屬性名產生衝突；

            Symbol值經過Symbol函數生成；
            let s = Symbol();
            typeof s;    // 「symbol」
　　　　注意：

            Symbol函數前不能使用new命令，

            Symbol值不是對象，因此不能添加屬性；

　　　　　　Symbol函數能夠接受一個字符串爲參數，表示對當前Symbol實例的描述，所以相同參數的Symbol函數的返回值是不相等的；

 

（13）generator攔截器