摘要：數(shù)組的擴(kuò)展將類(lèi)數(shù)組對(duì)象和可遍歷對(duì)象轉(zhuǎn)化為真正的數(shù)組。這兩個(gè)函數(shù)的參數(shù)都是回調(diào)函數(shù)。遍歷數(shù)組找到符合條件回調(diào)函數(shù)返回為的第一個(gè)值返回其值返回其下標(biāo)。這三個(gè)方法用來(lái)遍歷數(shù)組返回一個(gè)遍歷器供使用其中是對(duì)鍵的遍歷是對(duì)值的遍歷是對(duì)鍵值對(duì)的遍歷。

Array, from()

將類(lèi)數(shù)組對(duì)象和可遍歷對(duì)象轉(zhuǎn)化為真正的數(shù)組。

var arrayLike = {
  "0" : "a",
  "1" : "b",
  "2" : "c",
  "length": 3
}

var arr;
//ES5
arr = [].slice.call(arrayLike);    //arr=["a", "b", "c"]

//ES6
arr = Array.from(arrayLike);    //arr=["a", "b", "c"]

和它類(lèi)似的是擴(kuò)展運(yùn)算符, 一樣可以實(shí)現(xiàn)該功能(要求對(duì)象具有遍歷器接口):

function(){
  var arg = [...arguments];   //轉(zhuǎn)化 arguments 為數(shù)組
}

Array.from() 接受第二參數(shù)(函數(shù)), 用來(lái)映射結(jié)果, 相當(dāng)于 map, 并且可以用第三個(gè)參數(shù)綁定 this:

Array.from(obj, func, context);
//等價(jià)于
Array.from(obj).map(func, context);

技巧, 用 Array.from() 指定函數(shù)運(yùn)行次數(shù):

var i = 0;
Array.from({length: 3}, ()=>i++);   //[0, 1, 2]

建議：使用Array.from方法，將類(lèi)似數(shù)組的對(duì)象轉(zhuǎn)為數(shù)組。

Array.of()

將多個(gè)值組成數(shù)組:

Array.of(2, 3, 5);   //[2, 3, 5]
Array.of(2);   //[2]
Array.of();   //[]
Array.of(undefined);   //[undefined]

Array.prototype.copyWithin()

函數(shù)參數(shù)是 Array.prototype.copyWithin(target, start=0, end=this.length), 對(duì)當(dāng)前數(shù)組, 從截取下標(biāo)為 start 到 end 的值, 從target 位置開(kāi)始覆蓋 this 中的值。如果 start 或 end 為負(fù)數(shù)則倒數(shù)。

[1, 2, 3, 4, 5].copyWithin(0, 3, 4);   //[4, 2, 3, 4, 5]

[1, 2, 3, 4, 5].copyWithin(0, -2, -1);   //[4, 2, 3, 4, 5]

[].copyWithin.call({length: 5, 3: 1}, 0, 3);   //{0: 1, 3: 1, length: 5}

var i32a = new Int32Array([1, 2, 3, 4, 5]);
i32a.copyWithin(0, 2);   //[3, 4, 5, 4, 5]

Array.prototype.find(), Array.prototype.findIndex()

這兩個(gè)函數(shù)的參數(shù)都是回調(diào)函數(shù)。遍歷數(shù)組, 找到符合條件(回調(diào)函數(shù)返回為true)的第一個(gè)值, find()返回其值, findIndex()返回其下標(biāo)。如果沒(méi)找到符合條件的值find()返回undefined, findIndex()返回-1。

[1, 2, -3, 4].find((item) => item < 0);   //-3
[1, 2, -3, 4].findIndex((item) => item < 0);   //2

[NaN].findIndex(y => y !== y);   //0
[NaN].indexOf(NaN);   //-1, indexOf 找不到 NaN

這兩個(gè)函數(shù)還接受第二參數(shù), 用來(lái)綁定回調(diào)函數(shù)中的 this

Array.prototype.fill()

完整形式: Array.prototype.fill(value, start=0, end=this.length), 對(duì)數(shù)組 start 到 end 直接部分填充 value, 覆蓋原有值。

[1, 2, 3, 4, 5].fill("a", 2, 4);    //[1, 2, "a", "a", 5];
var arr = new Array(5).fill(0);   //arr = [0, 0, 0, 0, 0];

Array.prototype.entries(), Array.prototype.keys(), Array.prototype.values()

這三個(gè)方法, 用來(lái)遍歷數(shù)組, 返回一個(gè)遍歷器, 供 for...of 使用, 其中 keys()是對(duì)鍵的遍歷, values() 是對(duì)值的遍歷, entires()是對(duì)鍵值對(duì)的遍歷。babel 已實(shí)現(xiàn)

var a = ["a", "b", "c"];

for(let item of a.values()){
  console.log(item);     //依次輸出 "a", "b", "c"
}

for(let key of a.keys()){
  console.log(key);     //依次輸出 0, 1, 2
}
for(let pair of a.entries()){
  console.log(pair);     //依次輸出 [0, "a"], [1, "b"], [2, "c"]
}

當(dāng)然也可以用遍歷器的 next() 方法遍歷

var a = ["a", "b", "c"];
var values = a.values();
console.log(values.next().value);   //"a"
console.log(values.next().value);   //"b"
console.log(values.next().value);   //"c"

Array.prototype.includes()

這是個(gè) ES7 的方法, 判斷數(shù)組中是否含有某個(gè)值, 含有則返回 true, 否則返回 false?？梢杂玫诙€(gè)參數(shù)指定查找起始點(diǎn)(小于0倒數(shù))。

//該方法同樣可以找到 NaN, 而 indexOf 不行
[1, 2, NaN].includes(NaN);   //true
[1, 2, 3, 4, 5].includes(2, 3);  //false

數(shù)組的空位

我們比較以下兩個(gè)數(shù)組:

var empty = new Array(3);  //[, , , ]
var unempty = new Array(3).fill(undefined);   //[undefined, undefined, undefined]

console.log(0 in empty);     //false
console.log(0 in unempty);   //true

結(jié)合手冊(cè)內(nèi)容如下就很好理解這個(gè)問(wèn)題：

“Array elements may be elided at the beginning, middle or end of the element list. Whenever a comma in the element list is not preceded by
an AssignmentExpression (i.e., a comma at the beginning or after another comma), the missing array element contributes to the length of the
Array and increases the index of subsequent elements. Elided array elements are not defined. If an element is elided at the end of an array,
that element does not contribute to the length of the Array.”
摘自ECMAScript? 2015 Language Specification

翻譯如下。

"數(shù)組成員可以省略。只要逗號(hào)前面沒(méi)有任何表達(dá)式，數(shù)組的length屬性就會(huì)加1，并且相應(yīng)增加其后成員的位置索引。被省略的成員不會(huì)被定
義。如果被省略的成員是數(shù)組最后一個(gè)成員，則不會(huì)導(dǎo)致數(shù)組length屬性增加?！?/pre>
很明顯, 一個(gè)完全空的數(shù)組是沒(méi)有東西的, 而填充了undefined的數(shù)組并不是空的。
結(jié)合 ES5, 發(fā)現(xiàn)不同函數(shù)方法對(duì)空位處理方式是不一樣的:


forEach(), filter(), every(), some() 會(huì)忽略空值

map(), copyWithin() 會(huì)保留空值, 但不做處理

join(), toString(), 會(huì)把空值處理為空字符串

fill() 不區(qū)分空值與非空值

Array.from(), 擴(kuò)展運(yùn)算符(...), for...of, entires(), keys(), values(), find(), findIndex() 會(huì)視空值為 undefined


如果你記不住這些, 或者為了程序的健壯性, 可維護(hù)性, 盡量避免在數(shù)組中出現(xiàn)空值。
舉個(gè)實(shí)例, 理解一下這個(gè)問(wèn)題:
新建一個(gè)長(zhǎng)為200的數(shù)組, 并初始化每個(gè)位置的值等于其索引
//錯(cuò)誤方法
var arr = new Array(200).map(function(item, index){
  return index;
});
console.log(arr);    //[undefined × 200]
//正確做法
var arr = new Array(200).join().split(",").map(function(item, index){
  return index;
});
console.log(arr);    //[1, 2, 3, ..., 200]
數(shù)組推導(dǎo)
這是一個(gè) ES7 的功能, 暫時(shí)還沒(méi)能實(shí)現(xiàn)。我們可以先看一下它如何推導(dǎo)的:
var a1 = [1, 2, 3, 4];
var a2 = [for( i of a1) i * 2];   //a2=[2, 4, 6, 8]
不難看出, 數(shù)組 a2 通過(guò) for...of 直接從 a1 生成。但是它的功能不僅僅這么簡(jiǎn)單, 還可以有 if 條件:
var a1 = [1, 2, 3, 4];
var a3 = [for( i of a1) if(i > 2) i * 2];   //a3=[6, 8]
這樣, 我們可以簡(jiǎn)單的用數(shù)組推導(dǎo)模擬 map(), filter() 方法了。比如上面2個(gè)例子等價(jià)于:
var a1 = [1, 2, 3, 4];
var a2 = a1.map( (i) => i * 2 );
var a3 = a1.filter( (i) => i > 2 ).map( (i) => i * 2 );
當(dāng)然我們還可以用多個(gè) for...of 構(gòu)成循環(huán)嵌套:
var a = ["x1", "x2"];
var b = ["y1", "y2"];

[for(i of a) for(j of b), console.log(i+", "+j)];
//輸出
//["x1", "y1"]
//["x1", "y2"]
//["x2", "y1"]
//["x2", "y2"]
數(shù)組推導(dǎo)由 [] 構(gòu)建了一個(gè)作用域, 其內(nèi)部新建的變量, 等同于用 let 關(guān)鍵字聲明的變量。除此之外, 字符串也可以被視為數(shù)組, 所以同樣可以使用數(shù)組推導(dǎo):
[for(c of "abcde"). c+"."].join("");  //"a.2.3.4.5."