ECMAScript6(6)：數組的擴展

數組的擴展

• 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."