擴展運算符
含義
擴展運算符（spread）是三個點（...）退腥。它好比 rest 參數(shù)的逆運算，將一個數(shù)組轉(zhuǎn)為用逗號分隔的參數(shù)序列峡眶。
擴展運算符的應(yīng)用
復(fù)制數(shù)組
const a1 = [1, 2];
// 寫法一
const a2 = [...a1];
// 寫法二
const [...a2] = a1;
//上面的兩種寫法搂橙，a2都是a1的克隆旦装。
合并數(shù)組
const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];
// ES5 的合并數(shù)組
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]
// ES6 的合并數(shù)組
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]
字符串
擴展運算符還可以將字符串轉(zhuǎn)為真正的數(shù)組
[...'hello']
// [ "h", "e", "l", "l", "o" ]
實現(xiàn)了 Iterator 接口的對象
任何 Iterator 接口的對象（參閱 Iterator 一章），都可以用擴展運算符轉(zhuǎn)為真正的數(shù)組
let nodeList = document.querySelectorAll('div');
let array = [...nodeList];
/*querySelectorAll方法返回的是一個nodeList對象蓄氧。它不是數(shù)組函似，而是一個類似數(shù)組的對象。這時喉童，擴展運算符可以將其轉(zhuǎn)為真正的數(shù)組撇寞，原因就在于NodeList對象實現(xiàn)了 Iterator 。
對于那些沒有部署 Iterator 接口的類似數(shù)組的對象泄朴，擴展運算符就無法將其轉(zhuǎn)為真正的數(shù)組重抖。*/
Map 和 Set 結(jié)構(gòu)，Generator 函數(shù)
let map = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]);
let arr = [...map.keys()]; // [1, 2, 3]
Generator 函數(shù)運行后祖灰，返回一個遍歷器對象钟沛，因此也可以使用擴展運算符。
const go = function*(){
yield 1;
yield 2;
yield 3;
};
[...go()] // [1, 2, 3]
// 變量go是一個 Generator 函數(shù)局扶，執(zhí)行后返回的是一個遍歷器對象恨统，對這個遍歷器對象執(zhí)行擴展運算符，就會將內(nèi)部遍歷得到的值三妈，轉(zhuǎn)為一個數(shù)組畜埋。
Array.from()
Array.from方法用于將兩類對象轉(zhuǎn)為真正的數(shù)組：類似數(shù)組的對象（array-like object）和可遍歷（iterable）的對象（包括 ES6 新增的數(shù)據(jù)結(jié)構(gòu) Set 和 Map）。
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// ES5的寫法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的寫法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
Array.from還可以接受第二個參數(shù)畴蒲，作用類似于數(shù)組的map方法悠鞍，用來對每個元素進行處理，將處理后的值放入返回的數(shù)組
Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);
Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]
Array.of()
Array.of方法用于將一組值模燥，轉(zhuǎn)換為數(shù)組咖祭。
這個方法的主要目的掩宜，是彌補數(shù)組構(gòu)造函數(shù)Array()的不足。因為參數(shù)個數(shù)的不同么翰，會導(dǎo)致Array()的行為有差異牺汤。
Array.of基本上可以用來替代Array()或new Array()，并且不存在由于參數(shù)不同而導(dǎo)致的重載浩嫌。它的行為非常統(tǒng)一檐迟。
Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]
---------------------------------------
Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1
Array.of() // []
Array.of(undefined) // [undefined]
數(shù)組實例的 copyWithin()
數(shù)組實例的copyWithin方法，在當(dāng)前數(shù)組內(nèi)部码耐，將指定位置的成員復(fù)制到其他位置（會覆蓋原有成員）追迟，然后返回當(dāng)前數(shù)組。也就是說伐坏，使用這個方法怔匣，會修改當(dāng)前數(shù)組。
它接受三個參數(shù)：
- target（必需）：從該位置開始替換數(shù)據(jù)桦沉。如果為負值每瞒，表示倒數(shù)。
- start（可選）：從該位置開始讀取數(shù)據(jù)纯露，默認為 0剿骨。如果為負值，表示倒數(shù)埠褪。
- end（可選）：到該位置前停止讀取數(shù)據(jù)浓利，默認等于數(shù)組長度。如果為負值钞速，表示倒數(shù)贷掖。
//[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]
// 將3號位復(fù)制到0號位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]
// -2相當(dāng)于3號位，-1相當(dāng)于4號位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]
// 將3號位復(fù)制到0號位
[].copyWithin.call({length: 5, 3: 1}, 0, 3)
// {0: 1, 3: 1, length: 5}
// 將2號位到數(shù)組結(jié)束渴语，復(fù)制到0號位
let i32a = new Int32Array([1, 2, 3, 4, 5]);
i32a.copyWithin(0, 2);
// Int32Array [3, 4, 5, 4, 5]
// 對于沒有部署 TypedArray 的 copyWithin 方法的平臺
// 需要采用下面的寫法
[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
// Int32Array [4, 2, 3, 4, 5]
數(shù)組實例的 find() 和 findIndex()
數(shù)組實例的find方法苹威，用于找出第一個符合條件的數(shù)組成員。它的參數(shù)是一個回調(diào)函數(shù)驾凶，所有數(shù)組成員依次執(zhí)行該回調(diào)函數(shù)牙甫，直到找出第一個返回值為true的成員，然后返回該成員调违。如果沒有符合條件的成員窟哺，則返回undefined
[1, 4, -5, 10].find((n) => n < 0)
// -5
//上面代碼找出數(shù)組中第一個小于 0 的成員。
[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
}) // 10
//find方法的回調(diào)函數(shù)可以接受三個參數(shù)技肩，依次為當(dāng)前的值且轨、當(dāng)前的位置和原數(shù)組。
數(shù)組實例的findIndex方法的用法與find方法非常類似，返回第一個符合條件的數(shù)組成員的位置旋奢，如果所有成員都不符合條件阿蝶，則返回-1
[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
}) // 2
這兩個方法都可以接受第二個參數(shù)，用來綁定回調(diào)函數(shù)的this對象黄绩。
function f(v){
return v > this.age;
}
let person = {name: 'John', age: 20};
[10, 12, 26, 15].find(f, person); // 26
數(shù)組實例的 fill()
fill方法使用給定值，填充一個數(shù)組玷过。
['a', 'b', 'c'].fill(7)
// [7, 7, 7]
new Array(3).fill(7)
// [7, 7, 7]
// fill方法用于空數(shù)組的初始化非常方便爽丹。數(shù)組中已有的元素，會被全部抹去
數(shù)組實例的 entries()辛蚊，keys() 和 values()
entries()粤蝎，keys()和values()用于遍歷數(shù)組。它們都返回一個遍歷器對象袋马，可以用for...of循環(huán)進行遍歷初澎，唯一的區(qū)別是：
- keys()是對鍵名的遍歷
- values()是對鍵值的遍歷
- entries()是對鍵值對的遍歷
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"
數(shù)組實例的 includes()
Array.prototype.includes方法返回一個布爾值，表示某個數(shù)組是否包含給定的值虑凛，與字符串的includes方法類似碑宴。ES2016 引入了該方法。
[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // false
[1, 2, NaN].includes(NaN) // true
該方法的第二個參數(shù)表示搜索的起始位置桑谍，默認為0延柠。如果第二個參數(shù)為負數(shù)，則表示倒數(shù)的位置锣披，如果這時它大于數(shù)組長度（比如第二個參數(shù)為-4贞间，但數(shù)組長度為3），則會重置為從0開始雹仿。
[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true
數(shù)組的空位
數(shù)組的空位指增热，數(shù)組的某一個位置沒有任何值。比如胧辽，Array構(gòu)造函數(shù)返回的數(shù)組都是空位
Array(3) // [, , ,]
ES5 對空位的處理峻仇，已經(jīng)很不一致了，大多數(shù)情況下會忽略空位票顾。
- forEach(), filter(), reduce(), every() 和some()都會跳過空位础浮。
- map()會跳過空位，但會保留這個值
- join()和toString()會將空位視為undefined奠骄，而undefined和null會被處理成空字符串豆同。
// forEach方法
[,'a'].forEach((x,i) => console.log(i)); // 1
// filter方法
['a',,'b'].filter(x => true) // ['a','b']
// every方法
[,'a'].every(x => x==='a') // true
// reduce方法
[1,,2].reduce((x,y) => return x+y) // 3
// some方法
[,'a'].some(x => x !== 'a') // false
// map方法
[,'a'].map(x => 1) // [,1]
// join方法
[,'a',undefined,null].join('#') // "#a##"
// toString方法
[,'a',undefined,null].toString() // ",a,,"
ES6 則是明確將空位轉(zhuǎn)為undefined。
- Array.from方法會將數(shù)組的空位含鳞，轉(zhuǎn)為undefined影锈，也就是說，這個方法不會忽略空位。
Array.from(['a',,'b'])
// [ "a", undefined, "b" ]
- 擴展運算符（...）也會將空位轉(zhuǎn)為undefined鸭廷。
[...['a',,'b']]
// [ "a", undefined, "b" ]
- copyWithin()會連空位一起拷貝骗奖。
[,'a','b',,].copyWithin(2,0) // [,"a",,"a"]
- fill()會將空位視為正常的數(shù)組位置。
new Array(3).fill('a') // ["a","a","a"]
- for...of循環(huán)也會遍歷空位吆倦。
let arr = [, ,];
for (let i of arr) {
console.log(1);
}
// 1
// 1
// 數(shù)組arr有兩個空位灵临，for...of并沒有忽略它們。如果改成map方法遍歷讼载，空位是會跳過的轿秧。
- entries()、keys()咨堤、values()菇篡、find()和findIndex()會將空位處理成undefined
// entries()
[...[,'a'].entries()] // [[0,undefined], [1,"a"]]
// keys()
[...[,'a'].keys()] // [0,1]
// values()
[...[,'a'].values()] // [undefined,"a"]
// find()
[,'a'].find(x => true) // undefined
// findIndex()
[,'a'].findIndex(x => true) // 0
注：本文內(nèi)容整理自阮一峰《ECMAScript6 入門》一書，如有侵權(quán)請聯(lián)系刪除一喘。
