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

Array, from()

將類數組對象和可遍歷對象轉化為真正的數組。

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"]

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

function(){
  var arg = [...arguments];   //轉化 arguments 為數組
}

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

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

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

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

建議：使用Array.from方法，將類似數組的對象轉為數組。

Array.of()

將多個值組成數組:

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

Array.prototype.copyWithin()

函數參數是 Array.prototype.copyWithin(target, start=0, end=this.length), 對當前數組, 從截取下標為 start 到 end 的值, 從target 位置開始覆蓋 this 中的值。如果 start 或 end 為負數則倒數。

[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()

這兩個函數的參數都是回調函數。遍歷數組, 找到符合條件(回調函數返回為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

這兩個函數還接受第二參數, 用來綁定回調函數中的 this

Array.prototype.fill()

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

這三個方法, 用來遍歷數組, 返回一個遍歷器, 供 for...of 使用, 其中 keys()是對鍵的遍歷, values() 是對值的遍歷, entires()是對鍵值對的遍歷。babel 已實現

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 的方法, 判斷數組中是否含有某個值, 含有則返回 true, 否則返回 false。可以用第二個參數指定查找起始點(小于0倒數)。

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

數組的空位

我們比較以下兩個數組:

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

結合手冊內容如下就很好理解這個問題：

“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

翻譯如下。

"數組成員可以省略。只要逗號前面沒有任何表達式，數組的length屬性就會加1，并且相應增加其后成員的位置索引。被省略的成員不會被定
義。如果被省略的成員是數組最后一個成員，則不會導致數組length屬性增加。”

很明顯, 一個完全空的數組是沒有東西的, 而填充了undefined的數組并不是空的。
結合 ES5, 發現不同函數方法對空位處理方式是不一樣的:

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

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

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

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

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

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

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

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

數組推導

這是一個 ES7 的功能, 暫時還沒能實現。我們可以先看一下它如何推導的:

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

不難看出, 數組 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]

這樣, 我們可以簡單的用數組推導模擬 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 構成循環嵌套:

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"]

數組推導由 [] 構建了一個作用域, 其內部新建的變量, 等同于用 let 關鍵字聲明的變量。除此之外, 字符串也可以被視為數組, 所以同樣可以使用數組推導:

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