ES6+ Array.from()

1. 前言

在前端開發(fā)中經(jīng)常會(huì)遇到類數(shù)組，但是我們不能直接使用數(shù)組的方法，需要先把類數(shù)組轉(zhuǎn)化為數(shù)組。本節(jié)介紹 ES6 數(shù)組的新增方法 Array.from()，該方法用于將類數(shù)組對(duì)象（array-like）和可遍歷的對(duì)象（iterable）轉(zhuǎn)換為真正的數(shù)組進(jìn)行使用。

2. 方法詳情

2.1 基本語法

Array.from() 方法會(huì)接收一個(gè)類數(shù)組對(duì)象然后返回一個(gè)真正的數(shù)組實(shí)例，返回的數(shù)組可以調(diào)用數(shù)組的所有方法。

語法使用：

Array.from(arrayLike[, mapFn[, thisArg]])

參數(shù)解釋：

2.2 類數(shù)組轉(zhuǎn)化

所謂類數(shù)組對(duì)象，就是指可以通過索引屬性訪問元素，并且對(duì)象擁有 length 屬性，類數(shù)組對(duì)象一般是以下這樣的結(jié)構(gòu)：

var arrLike = {
  '0': 'apple',
  '1': 'banana',
  '2': 'orange',
  length: 3
};

在 ES5 中沒有對(duì)應(yīng)的方法將類數(shù)組轉(zhuǎn)化為數(shù)組，但是可以借助 call 和 apply 來實(shí)現(xiàn)：

var arr = [].slice.call(arrLike);
// 或
var arr = [].slice.apply(arrLike);

有了 ES6 的 Array.from() 就更簡(jiǎn)單了，對(duì)類數(shù)組對(duì)象直接操作，即可得到數(shù)組。

var arr = Array.from(arrLike);
console.log(arr)  // ['apple', 'banana', 'orange']

2.3 第二個(gè)參數(shù) —— 回調(diào)函數(shù)

在 Array.from 中第二個(gè)參數(shù)是一個(gè)類似 map 函數(shù)的回調(diào)函數(shù)，該回調(diào)函數(shù)會(huì)依次接收數(shù)組中的每一項(xiàng)作為傳入的參數(shù)，然后對(duì)傳入值進(jìn)行處理，最得到一個(gè)新的數(shù)組。
Array.from(obj, mapFn, thisArg) 也可以用 map 改寫成這樣 Array.from(obj).map(mapFn, thisArg)。

var arr = Array.from([1, 2, 3], function (x) {
  return 2 * x;
});
var arr = Array.from([1, 2, 3]).map(function (x) {
  return 2 * x;
});
//arr: [2, 4, 6]

上面的例子展示了，Array.from 的參數(shù)可以使用 map 方法來進(jìn)行替換，它們是等價(jià)的操作。

2.4 第三個(gè)參數(shù) ——this

Array.from 中第三個(gè)參數(shù)可以對(duì)回調(diào)函數(shù)中 this 的指向進(jìn)行綁定，該參數(shù)是非常有用的，我們可以將被處理的數(shù)據(jù)和處理對(duì)象分離，將各種不同的處理數(shù)據(jù)的方法封裝到不同的的對(duì)象中去，處理方法采用相同的名字。

在調(diào)用 Array.from 對(duì)數(shù)據(jù)對(duì)象進(jìn)行轉(zhuǎn)換時(shí)，可以將不同的處理對(duì)象按實(shí)際情況進(jìn)行注入，以得到不同的結(jié)果，適合解耦。

let obj = {
  handle: function(n){
    return n + 2
  }
}

Array.from([1, 2, 3, 4, 5], function (x){
  return this.handle(x)
}, obj)
// [3, 4, 5, 6, 7]

定義一個(gè) obj 對(duì)象可以認(rèn)作是，Array.from 回調(diào)函數(shù)中處理數(shù)據(jù)的方法集合，handle 是其中的一個(gè)方法，把 obj 作為第三個(gè)參數(shù)傳給 Array.from 這樣在回調(diào)函數(shù)中可以通過 this 來拿到 obj 對(duì)象。

2.5 從字符串里生成數(shù)組

Array.from() 在傳入字符串時(shí)，會(huì)把字符串的每一項(xiàng)都拆成單個(gè)的字符串作為數(shù)組中的一項(xiàng)。

Array.from('imooc'); 
// [ "i", "m", "o", "o", "c" ]

2.6 從 Set 中生成數(shù)組

用 Set 定義的數(shù)組對(duì)象，可以使用 Array.from() 得到一個(gè)正常的數(shù)組。

const set = new Set(['a', 'b', 'c', 'd']);
Array.from(set);
// [ "a", "b", "c", "d" ]

上面的代碼中創(chuàng)建了一個(gè) Set 數(shù)據(jù)結(jié)構(gòu)，把實(shí)例傳入 Array.from() 可以得到一個(gè)真正的數(shù)組。

2.7 從 Map 中生成數(shù)組

Map 對(duì)象保存的是一個(gè)個(gè)鍵值對(duì)，Map 中的參數(shù)是一個(gè)數(shù)組或是一個(gè)可迭代的對(duì)象。 Array.from() 可以把 Map 實(shí)例轉(zhuǎn)換為一個(gè)二維數(shù)組。

const map = new Map([[1, 2], [2, 4], [4, 8]]);

Array.from(map);  // [[1, 2], [2, 4], [4, 8]]

3. 使用案例

3.1 創(chuàng)建一個(gè)包含從 0 到 99 (n) 的連續(xù)整數(shù)的數(shù)組

1. 一般情況下我們可以使用 for 循環(huán)來實(shí)現(xiàn)。

var arr = [];
for(var i = 0; i <= 99; i++) {
  arr.push(i);
}

這種方法的主要優(yōu)點(diǎn)是最直觀了，性能也最好的，但是很多時(shí)候我們不想使用 for 循環(huán)來進(jìn)行操作。

1. 使用 Array 配合 map 來實(shí)現(xiàn)。

var arr = Array(100).join(' ').split('').map(function(item,index){return index});

Array (100) 創(chuàng)建了一個(gè)包含 100 個(gè)空位的數(shù)組，但是這樣創(chuàng)建出來的數(shù)組是沒法進(jìn)行迭代的。所以要通過字符串轉(zhuǎn)換，覆蓋 undefined，最后調(diào)用 map 修改元素值。

1. 使用 es6 的 Array.from 實(shí)現(xiàn)。

var arr = Array.from({length:100}).map(function(item,index){return index});

Array.from({length:100}) 可以定義一個(gè)可迭代的數(shù)組，數(shù)組的每一項(xiàng)都是 undefined，這樣就非常方便的定義出所需要的數(shù)組了，但是這樣定義的數(shù)組性能最差，具體可以參考 constArray 的測(cè)試結(jié)果。

3.2 數(shù)組去重合并

function combine(){ 
  let arr = [].concat.apply([], arguments);  //沒有去重復(fù)的新數(shù)組 
  return Array.from(new Set(arr));
} 

var m = [1, 2, 2], n = [2,3,3]; 
console.log(combine(m,n));                     // [1, 2, 3]

首先定義一個(gè)去重?cái)?shù)組函數(shù)，通過 concat 把傳入的數(shù)組進(jìn)行合并到一個(gè)新的數(shù)組中去，通過 new Set () 可以對(duì) arr 進(jìn)行去重操作，再使用 Array.from() 返回一個(gè)拷貝后的數(shù)組。

4. 小結(jié)

本節(jié)講解了字符串的 Array.from() 方法的使用，用于將類數(shù)組對(duì)象和可迭代的對(duì)象轉(zhuǎn)化真正的數(shù)組，在編程中主要用于更加方便的初始化一個(gè)有默認(rèn)值的數(shù)組，還可以用于將獲取的 html 的 DOM 對(duì)象轉(zhuǎn)化為數(shù)組，可以使用數(shù)組方法進(jìn)行操作。