es6阮一峰文檔

1、聲明變量的六種方法var、function、let、const、class、import

在ES5中，JavaScript是沒有塊級作用域的，如果在塊內(nèi)使用var聲明一個(gè)變量，它在代碼塊外面仍舊是可見的。ES6規(guī)范給開發(fā)者帶來了塊級作用域，let和const都添加了塊級作用域，使得JS更嚴(yán)謹(jǐn)和規(guī)范。

let 和var類似，let聲明的變量，只在let命令所在的代碼塊內(nèi)有效。

const 聲明一個(gè)常量，變量指向的內(nèi)存地址不得改動(dòng)。簡單類型的數(shù)據(jù)（數(shù)值、字符串、布爾值），值就保存在變量指向的那個(gè)內(nèi)存地址，因此等同于常量；引用類型的數(shù)據(jù)（主要是對象和數(shù)組），變量指向的內(nèi)存地址，保存的只是一個(gè)指針，const只能保證這個(gè)指針是固定的，至于它指向的數(shù)據(jù)結(jié)構(gòu)是不是可變的，就完全不能控制了。

2、.Map()

Map和對象的區(qū)別：

• 一個(gè) Object 的鍵只能是字符串或者 數(shù)字，但一個(gè) Map 的鍵可以是任何數(shù)據(jù)類型（字符串、對象、函數(shù)、NaN）。
• Map 中的鍵值是有序的（FIFO 原則），而添加到對象中的鍵則不是。
• Map 的鍵值對個(gè)數(shù)可以從 size 屬性獲取，而 Object 的鍵值對個(gè)數(shù)只能手動(dòng)計(jì)算。
• Object 都有自己的原型，原型鏈上的鍵名有可能和你自己在對象上的設(shè)置的鍵名產(chǎn)生沖突。

Map 實(shí)例的屬性和方法如下：

size：獲取成員的數(shù)量
set：設(shè)置成員 key 和 value
get：獲取成員屬性值
has：判斷成員是否存在
delete：刪除成員
clear：清空所有

var map = new Map()
var obj = {name: 'test', age: 12}
map.set(obj, 'OK')
map.get(obj) // OK
map.has(obj) // true
map.delete(obj) // true
map.has(obj) // false
map.clear()

Map 實(shí)例的遍歷方法有：

keys()：返回鍵名的遍歷器
values()：返回鍵值的遍歷器
entries()：返回所有成員的遍歷器
forEach()：遍歷 Map 的所有成員

var map = new Map()
map.set('sss', 100)
map.set('aaa', 200)
for (let key of map.keys) {
  console.log(key)
}
// 100
// 200

// 將會顯示兩個(gè) logs。 一個(gè)是 "sss = 100" 另一個(gè)是 "aaa = 200"
map.forEach(function(value, key) {
  console.log(key + " = " + value);
}, map)

Map和Array轉(zhuǎn)換

Map 構(gòu)造函數(shù)可以將一個(gè) 二維 鍵值對數(shù)組轉(zhuǎn)換成一個(gè) Map 對象。
使用 Array.from 函數(shù)可以將一個(gè) Map 對象轉(zhuǎn)換成一個(gè)二維鍵值對數(shù)組。

var kvArray = [["key1", "value1"], ["key2", "value2"]]
 
// Map 構(gòu)造函數(shù)可以將一個(gè) 二維 鍵值對數(shù)組轉(zhuǎn)換成一個(gè) Map 對象
var myMap = new Map(kvArray) // {'key1' => 'value1', 'key2' => 'value2'}
 
// 使用 Array.from 函數(shù)可以將一個(gè) Map 對象轉(zhuǎn)換成一個(gè)二維鍵值對數(shù)組
var outArray = Array.from(myMap) // [["key1", "value1"], ["key2", "value2"]]

Map的克隆

Map 對象構(gòu)造函數(shù)生成實(shí)例，迭代出新的對象。

var myMap1 = new Map([["key1", "value1"], ["key2", "value2"]])
var myMap2 = new Map(myMap1)
 
console.log(myMap1 === myMap2 )
// 打印 false。 Map 對象構(gòu)造函數(shù)生成實(shí)例，迭代出新的對象。

Map合并

合并兩個(gè) Map 對象時(shí)，如果有重復(fù)的鍵值，則后面的會覆蓋前面的。

var first = new Map([[1, 'one'], [2, 'two'], [3, 'three'],]);
var second = new Map([[1, 'uno'], [2, 'dos']]);
 
// 合并兩個(gè) Map 對象時(shí)，如果有重復(fù)的鍵值，則后面的會覆蓋前面的，對應(yīng)值即 uno，dos， three
var merged = new Map([...first, ...second]);

3、.Set()

set屬性和方法

• 屬性
  　Set.prototype
  　Set.prototype.size
• 方法
  　Set.prototype.add()
  　Set.prototype.clear()
  　Set.prototype.delete()
  　Set.prototype.entries()
  　Set.prototype.forEach()
  　Set.prototype.has()
  　Set.prototype.values()
  　Set.prototype[@@iterator] ()

Set 中的特殊值

Set 對象存儲的值總是唯一的，所以需要判斷兩個(gè)值是否恒等。有幾個(gè)特殊值需要特殊對待：

• +0 與 -0 在存儲判斷唯一性的時(shí)候是恒等的，所以不重復(fù)
• undefined 與 undefined 是恒等的，所以不重復(fù)
• NaN 與 NaN 是不恒等的，但是在 Set 中只能存一個(gè)，不重復(fù)

數(shù)組去重

var mySet = new Set([1, 2, 3, 4, 4]);
[...mySet]; // [1, 2, 3, 4]

并集

var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var union = new Set([...a, ...b]); // {1, 2, 3, 4}

交集

var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var intersect = new Set([...a].filter(x => b.has(x))); // {2, 3}

差集

var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var difference = new Set([...a].filter(x => !b.has(x))); // {1}

Set類型轉(zhuǎn)換

Array和Set轉(zhuǎn)換

// Array 轉(zhuǎn) Set
var mySet = new Set(["value1", "value2", "value3"]);
// 用...操作符，將 Set 轉(zhuǎn) Array
var myArray = [...mySet];

String 和 Set轉(zhuǎn)換

// String 轉(zhuǎn) Set
var mySet = new Set('hello');  // Set(4) {"h", "e", "l", "o"}
// 注：Set 中 toString 方法是不能將 Set 轉(zhuǎn)換成 String
// Set 轉(zhuǎn) String
var arr = [...mySet];
var str = arr.join(''); // 'helo' set有去重的特性，所以是helo

注：Set 中 toString 方法是不能將 Set 轉(zhuǎn)換成 String

4、.iterable

遍歷Array可以采用下標(biāo)循環(huán)，遍歷Map和Set就無法使用下標(biāo)。為了統(tǒng)一集合類型，ES6標(biāo)準(zhǔn)引入了新的iterable類型，Array、Map和Set都屬于iterable類型。

為什么加入iterable類型？

• 遍歷array可以采用下標(biāo)循環(huán)，遍歷Map和Set無法使用下標(biāo)。集合類型不統(tǒng)一。
• 對于array類型的for...in循環(huán)，當(dāng)添加額外的屬性后，會有意外效果。因此統(tǒng)一集合類型iterable中的 for...of循環(huán)

iterable 的 forEach方法

它接收一個(gè)函數(shù)，每次迭代就自動(dòng)回調(diào)該函數(shù)

//Array
var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {
    // element: 指向當(dāng)前元素的值
    // index: 指向當(dāng)前索引
    // array: 指向Array對象本身
    console.log(element);
});
//Set
var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
    console.log(element);
});
//Map
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {
    console.log(value);
});

5、for...of(迭代器)

for-in結(jié)構(gòu)通常對 Array（數(shù)組）和Object（對象）都可以使用，而for-of結(jié)構(gòu)在對Object（對象）使用時(shí)會報(bào)錯(cuò)。js 集合中能默認(rèn)使用for of 有，數(shù)組，類數(shù)組，字符串，map，set。
for-in結(jié)構(gòu)可以遍歷 數(shù)組索引或?qū)ο箧I名，包括手動(dòng)添加的鍵，甚至原型鏈上的鍵，而for-of在遍歷值得時(shí)候無法遍歷到手動(dòng)添加的值或者通過原型添加的值。

• for of無法循環(huán)遍歷對象
• for in 會遍歷自定義屬性，for of不會

6、箭頭函數(shù)

原函數(shù)的“function”關(guān)鍵字和函數(shù)名都刪掉，并使用“=>”連接參數(shù)列表和函數(shù)體。

(a,b) => {}
var fn = (a,b) => {}

當(dāng)函數(shù)參數(shù)只有一個(gè)，括號可以省略；但是沒有參數(shù)時(shí)，括號不可以省略。
箭頭函數(shù)的函數(shù)體只有一個(gè) return 語句時(shí)，可以省略 return 關(guān)鍵字和方法體的花括號。
箭頭函數(shù)不綁定Arguments 對象
箭頭函數(shù)不會創(chuàng)建自己的this,它只會從自己的作用域鏈的上一層繼承this。

在箭頭函數(shù)出現(xiàn)之前，每一個(gè)新函數(shù)根據(jù)它是被如何調(diào)用的來定義這個(gè)函數(shù)的this值：

• 如果該函數(shù)是一個(gè)構(gòu)造函數(shù)，this指針指向一個(gè)新的對象
• 在嚴(yán)格模式下的函數(shù)調(diào)用下，this指向undefined
• 如果該函數(shù)是一個(gè)對象的方法，則它的this指針指向這個(gè)對象
• 等等

7、Promise

8、.async函數(shù)

9、.keys，.values，.entries

ES6 提供三個(gè)新的方法 —— entries()，keys()和values()。 用于遍歷數(shù)組。它們都返回一個(gè)遍歷器對象，可以用for...of循環(huán)進(jìn)行遍歷，唯一的區(qū)別是keys()是對鍵名的遍歷、values()是對鍵值的遍歷，entries()是對鍵值對的遍歷。