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

Array, from()

將類數(shù)組對象和可遍歷對象轉(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"]

和它類似的是擴展運算符, 一樣可以實現(xiàn)該功能(要求對象具有遍歷器接口):

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

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

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

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

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

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

Array.of()

將多個值組成數(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), 對當前數(shù)組, 從截取下標為 start 到 end 的值, 從target 位置開始覆蓋 this 中的值。如果 start 或 end 為負數(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()

這兩個函數(shù)的參數(shù)都是回調(diào)函數(shù)。遍歷數(shù)組, 找到符合條件(回調(diào)函數(shù)返回為true)的第一個值, find()返回其值, findIndex()返回其下標。如果沒找到符合條件的值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

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

Array.prototype.fill()

完整形式: Array.prototype.fill(value, start=0, end=this.length), 對數(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()

這三個方法, 用來遍歷數(shù)組, 返回一個遍歷器, 供 for...of 使用, 其中 keys()是對鍵的遍歷, values() 是對值的遍歷, entires()是對鍵值對的遍歷。babel 已實現(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"]
}

當然也可以用遍歷器的 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()

這是個 ES7 的方法, 判斷數(shù)組中是否含有某個值, 含有則返回 true, 否則返回 false。可以用第二個參數(shù)指定查找起始點(小于0倒數(shù))。

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

數(shù)組的空位

我們比較以下兩個數(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é)合手冊內(nèi)容如下就很好理解這個問題：

“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ù)組成員可以省略。只要逗號前面沒有任何表達式，數(shù)組的length屬性就會加1，并且相應(yīng)增加其后成員的位置索引。被省略的成員不會被定
義。如果被省略的成員是數(shù)組最后一個成員，則不會導(dǎo)致數(shù)組length屬性增加。”

很明顯, 一個完全空的數(shù)組是沒有東西的, 而填充了undefined的數(shù)組并不是空的。
結(jié)合 ES5, 發(fā)現(xiàn)不同函數(shù)方法對空位處理方式是不一樣的:

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

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

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

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

Array.from(), 擴展運算符(...), for...of, entires(), keys(), values(), find(), findIndex() 會視空值為 undefined

如果你記不住這些, 或者為了程序的健壯性, 可維護性, 盡量避免在數(shù)組中出現(xiàn)空值。
舉個實例, 理解一下這個問題:

新建一個長為200的數(shù)組, 并初始化每個位置的值等于其索引

//錯誤方法
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)

這是一個 ES7 的功能, 暫時還沒能實現(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 通過 for...of 直接從 a1 生成。但是它的功能不僅僅這么簡單, 還可以有 if 條件:

var a1 = [1, 2, 3, 4];
var a3 = [for( i of a1) if(i > 2) i * 2];   //a3=[6, 8]

這樣, 我們可以簡單的用數(shù)組推導(dǎo)模擬 map(), filter() 方法了。比如上面2個例子等價于:

var a1 = [1, 2, 3, 4];
var a2 = a1.map( (i) => i * 2 );
var a3 = a1.filter( (i) => i > 2 ).map( (i) => i * 2 );

當然我們還可以用多個 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)建了一個作用域, 其內(nèi)部新建的變量, 等同于用 let 關(guān)鍵字聲明的變量。除此之外, 字符串也可以被視為數(shù)組, 所以同樣可以使用數(shù)組推導(dǎo):

[for(c of "abcde"). c+"."].join("");  //"a.2.3.4.5."