ES6學習筆記

1、let和const

一、let
（1）let所聲明的變量，只在命令所在的代碼塊內有效；
（2）let所聲明的變量，在域解析的時候不會被提高，即：聲明變量前，不可被調用；
（3）let不容許在同一個做用域下聲明已經存在的變量；
（4）在for循環語句以內是一個父做用域；在循環體內是一個子做用域；兩者相互分離，互不干涉。

二、const
（1）const所聲明的變量，只在命令所在的代碼塊內有效；
（2）const所聲明的變量，在域解析的時候不會被提高，即：聲明變量前，不可被調用；
（3）const不容許在同一個做用域下聲明已經存在的變量；
（4）const聲明的變量必須賦值；
（5）const聲明的常量存儲簡單的數據類型的時候不可改變其值；若是存儲的是對象，那麼引用不可被改變，至於對象裏面的數據如何變化，是沒有關係的。

學習網址：http://blog.csdn.net/u014695532/article/details/51814984

2、變量的解構賦值

一、數組的結構賦值：變量的取值由位置決定
二、對象的解構賦值：變量名與屬性名一一對應，次序不重要
三、基本類型解構賦值：null/undefined不能進行解構賦值

學習網址：http://www.cnblogs.com/Gary-Guoweihan/p/5822937.html

3、數據結構Set

一、集合的概念
集合是由一組無序且惟一的項組成，相似於數組，但沒有重複的值。
特色：key和value相同，沒有重複的value。
二、如何建立一個Set：const s = new Set([1,2,3]);
三、Set的屬性：s.size = 3;
四、Set類的方法
（1）add(value)添加一個數據，返回set結構自己；s.add(「value」)
（2）delete(value)刪除指定數據，返回一個布爾值，表示刪除是否成功；
（3）has(value)判斷該值是否爲Set成員，返回一個布爾值；
（4）clear()清除全部數據，沒有返回值；
（5）keys()返回鍵名的遍歷器；
（6）values()返回鍵值的遍歷器；
（7）Entries()返回鍵值對的遍歷器；
（8）ForEach()使用回調函數遍歷每一個成員：
s.forEach(function(value,key,set){ });

學習網址：http://www.cnblogs.com/diligenceday/p/5479076.html

五、set不容許有重複數據，如何利用set爲數組進行去重？

var array = [1,2,3,4,2,2,5];
var set = new Set(array);
array = Array.from(set);
//注：Array.from()方法從一個相似數組或可迭代的對象中建立一個新的數組實例。

學習網址：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from
爲數組去重：http://www.javashuo.com/article/p-kfscjbiw-dp.html

4、數據結構Map（字典類型）

一、字典：是用來存儲不重複key的hash結構；不一樣於集合（set）的是，字典使用的是[鍵，值]的形式來儲存數據的。
二、如何建立一個Map

Const map = new Map([
    [‘a’:1],
    [‘b’:2]
]);

三、Map類的屬性map.size = 2;
四、Map類的方法
（1）set(key,value)：設置鍵名key對應的鍵值爲value，而後返回整個Map結構，若是key已經有值，則鍵值會被更新，不然就新生成改鍵。

map.set(「key」,」value」).set(「key2」,」value2」).set(「key」,」value3」);
//注：key對應的鍵值最終爲value3

（2）get（key）讀取key對應的鍵值，若是找不到key，返回undefinded

map.get(「key」);=====>value3

（3）delete(key) 刪除某個鍵，返回true。若是刪除失敗，返回false

map.delete(「key」);=====>true

（4）has(key) 方法返回一個布爾值，表示某個鍵是否存在當前Map對象之中

map.has(「key2」);=====>true
map.has(「key」);=====>false

（5）clear() 清除全部數據，沒有返回值；
（6）keys()返回鍵名的遍歷器；
（7）values()返回鍵值的遍歷器；
（8）Entries()返回鍵值對的遍歷器；
（9）ForEach()使用回調函數遍歷每一個成員：map.forEach(function(value,key,map){ });

//注：map屬於地址存值，裏面的key的排列順序是按照添加順序進行排列的。

學習網址：http://www.jb51.net/article/110048.htm

5、iterator和for-of循環

一、iterator是一種接口，爲各類不一樣的數據結構提供統一的訪問機制，任何數據結構只要部署iterator接口，就能夠完成遍歷操做，並且這種遍歷操做是依次處理該數據結構的全部成員。
二、iterator遍歷器的做用：
（1）爲各類數據結構，提供一個統一的、簡便的訪問接口；
（2）使得數據結構的成員可以按某種次序排列；
（3）ES6新增了遍歷命令for..of循環，iterator接口主要供for..of消費。
三、手寫iterator接口

Const arr = [1,2,3];
Function iterator(arr){
    let index = 0;
    return{
        next:function(){
            return index < arr.length ?
            {value : arr[index++], done : false} :
            {value : undefined, done : true};
        }
    }
}
Const it = iterator(arr);
Console.log(it.next());====>1
Console.log(it.next());====>2
Console.log(it.next());====>3
Console.log(it.next());====>undefined

學習網址：http://www.cnblogs.com/sker/p/5520518.html

四、凡是具有symbol.iterator屬性的數據結構都具有iterator接口
五、凡是具有iterator接口的數據結構均可以進行以下操做：解構賦值+擴展運算符
如何給一個不具有iterator接口的數據結構部署一個iterator接口？

6、class的基本使用

一、原型鏈

Class miaov{
    Constructor(a,b){
        This.a = a;
        This.b = b;
        Return this;
    }
    Print(){
        Console.log(this.a + ‘ ’ + this.b );
    }
};

Const miaov = new miaov(「hello」,」world」).print();

二、miaov中的constructor方法是構造方法，this關鍵字則表明實例對象，也就是說，ES5的構造函數miaov，對應ES6的miaov這個類的構造方法；
三、miaov這個類除了構造方法，還定義了一個print方法：注意，定義「類」的方法的時候，前面不須要加上function這個關鍵字，直接把函數定義放進去了就能夠了。另外，方法之間不須要逗號分隔，加了會報錯；
四、構造函數的prototype屬性，在ES6的「類」上面繼續存在，並且類的全部方法都定義在類的prototype屬性上面；
五、定義在「類」中的方法都是不能夠枚舉的。

Console.log(object.keys(miaov.prototype));

六、constructor方法是類的默認方法，經過new命令生成對象實例時，自動調用該方法，一個類必須有constructor方法，若是沒有顯示定義，一個空的constructor方法會被默認添加；
生成類的實例對象的寫法，與ES5徹底同樣，也是使用new命令。若是忘記加上new，像函數那樣調用class，將會報錯；

7、class的繼承相關知識（canvas畫布實現小球自由落體運動）
一、extends、static、super
經過extends繼承父類，經過super（）傳遞參數

8、Symbol數據類型

一、什麼是Symbol?
（1）Symbol表示獨一無二的值，它是js中的第七種數據類型
（2）js數據類型：
基本數據類型：Symbol、string字符串、number數字、boolean布爾、array數組、Null、Undefined
引用數據類型：object對象
二、建立symbol數據類型值

Let sl = Symbol();

//注：Symbol函數前不能使用new，不然會報錯，緣由在於Symbol是一個原始類型的值，不是對象。

三、Symbol參數

Let s2 = Symbol(「a」); //a就是Symbol的參數
//Symbol函數讀取一個字符串做爲參數，表示對Symbol的描述，主要是爲了在控制檯顯示，或者轉爲字符串的時候，比較容易區分。

四、Symbol數據類型的轉換

String(Symbol(「miaov」)); //轉換成字符串
Symbol(「leo」).toString(); //轉換成字符串
!!Symbol(); //true值
//注：Symbol不能使用任何運算符進行運算

五、做爲對象的屬性名

//注：不能被for...in...循環遍歷

9、內置對象的擴展

一、字符串的擴展
模板字符串：

（1）字符串放在反引號當中（tab上的爲反引號）
（2）<span> ${ ‘首頁’ } </span>
（3）支持三目運算

二、repeat

Let str1 = ‘a’;
Let str2 = str1.repeat(3); //輸出aaa

三、includes()、startsWith()、endsWith() //返回true/false

四、數組的擴展

//轉換成數組：Array.from()、Array.of()、find()、findIndex()【函數】、fill()
Array.from(); //轉換成數組
Array.of(1); //輸出[1]
Let res = arr.find(function(){
})

五、對象的擴展
（1）對象的簡潔表示法：
（2）Object.is(+0,-0); //返回false
（3）Object.assign()：用於對象的合併，將源對象的全部可枚舉屬性，複製到目標對象,例：Object.assign(目標對象，源對象，源對象);

10、函數的擴展

一、爲函數參數指定默認值

function fn(a=10,b=20){};
Fn(0,10);

二、函數的rest參數
Rest 參數形式爲（「...變量名」），用於獲取函數的多餘參數，這樣就不須要使用arguments對象了，rest參數搭配的變量是一個數組，該變量將多餘的參數放入數組中。

Function sum(a,...arr){

    //其中，...arr爲rest參數

}

三、箭頭函數：使用「箭頭」（=>）定義函數

Const fn = a => a; //調用fn(1),輸出1
Const fn = (a,b) => a+b; //調用fn(1,2),輸出3
（3）Const fn = (a,b) => {
            a = a *2;
            b = b *2;
            return a+b;
        } //調用fn(1,2)，輸出6

（4）const fn = (a,b) => ({a,b}); //調用fn(1,2),輸出一個對象{a:1,b:2}

注意：
（1）箭頭函數體內沒有本身的this對象，因此在使用的時候，其內部的this就是定義時所在環境的對象，而不是使用時所在環境的對象；不能給箭頭函數使用call、apply、bind去改變其內部的this指向；
（2）箭頭函數體內沒有arguments對象，若是要用，能夠用rest參數代替；
例：const fn = (...arr) => arr; //調用fn(1,2,3,4),輸出1,2,3,4
（3）不能夠當作構造函數，不可使用new命令，不然會拋出一個錯誤;
（4）箭頭函數不能當作Generator函數。

11、異步操做之Promise

一、基本概念
Promise: 是ES6中新增的異步編程解決方案，體如今代碼中它是一個對象，能夠經過Promise構造函數來實例化。

new Promise(cb) //===>實例的基本使用，
//三種狀態：Pending（進行中） Resolved （已完成）Rejected（已失敗），狀態一旦改變就不會更改。

兩個原型方法：

//----Promise.prototype.then()
//----Promise.prototype.catch()

兩個經常使用的靜態方法：

//----Promise.all()
//----Promise.resolve()
//例：
const p = new Promise(function(resolve,reject){
    Const img = new Image();
    Img.src = imgs[0];
    Img.onload = function(){
        resolve(this);
    };
    Img.onerror = function(){
        reject(new Error(‘圖片加載失敗’));
    };
});

p.then(function(img){ //處理成功時執行的回調函數
    $(「body」).append(img);
}).catch(function(err){ //捕獲失敗時的異常
    console.log(err);
})

//封裝函數：
Function loadImg(url){
    const p = new Promise(function(resolve,reject){
        Const img = new Image();
        Img.src = url;
        Img.onload = function(){
            resolve(this);
        };
        Img.onerror = function(){
            reject(new Error(‘圖片加載失敗’));
        };
    });
    return p;
}

二、Promise.all()能夠將多個Promise實例包裝成一個新的Promise實例
（1）當全部Promise實例的狀態都變成resolved，Promise.all的狀態纔會變成resolved,此時返回值組成一個數組，傳遞給then中的resolve函數；
（2）只要其中一個被rejected，Promise.all的狀態就變成rejected，此時第一個被reject的實例的返回值，會傳遞給p的回調函數。

//例：
const allDone = Promise.all([loadImg(imgs[0]),loadImg(imgs[1]),loadImg(imgs[2])]);
allDone.then(function(datas){
    //執行成功時的回調函數
}).catch(function(err){
    Console.log(err); //捕獲失敗時的異常
})

三、Promise.resolve()
（1）參數是Promise實例，將不做任何修改，原封不動地返回這個實例。

//例：
Promise.resolve(lloadImg(imgs[0])).then(function(img){
    $(「body」).append(img);
})

（2）將對象轉爲Promise對象，而後就當即執行thenable對象的then方法

//例：
Promise.resolve({
    then(resolve,reject){
    
        const img = new Image();
        Img.src = imgs[1];
        Img.onload = function(){
            resolve(this);
        }
    }
}).then(function(img){
    $(「body」).append(img);
})

（3）參數是一個基本數據類型或者不傳參數，那麼返回一個狀態爲resolved的Promise對象。

//例：
Promise.resolve(‘miaov’).then(function(str){
    Console.log(str);
})
//或者
const p = Promise.resolve(); //console.log(p),輸出一個狀態爲resolved的  Promise對象。

12、ES6是如何實現模塊化的？
ES6原生支持模塊化了，經過自帶的export（導出）和import（導入）來實現。
一、傳統的模塊模式基於閉包，返回「公有API」；
二、export的使用方法
方式一：

export function fn() {
    // 導出函數
}
export var num = 42; // 導出變量
var arr = [1,2,3];
export { arr };

方式二：

function fn() {

}
var num = 42;
var arr = [1,2,3];
export {fn,num,arr}; //統一導出

三、import的使用方法
若是想導入一個模塊的API中的特定命名成員到頂層做用域，使用如下語法：

import { foo, bar, baz } from "foo";

ps： 這裏的{ .. }語法可能看起來像一個對象字面量，甚至是像一個對象解構語法。可是，它的形式僅對模塊而言是特殊的，因此不要將它與其餘地方的{ .. }模式搞混了。

被羅列的標識符foo，bar和baz必須匹配在模塊的API上的命名導出（這裏將會發生靜態分析和錯誤斷言）。它們在你當前的做用域中被綁定爲頂層標識符。

import { foo } from "foo";
foo();

能夠重命名被導入的綁定標識符，就像：

import { foo as theFooFunc } from "foo";
theFooFunc();