本文實例講述了ES6數組的擴展。分享給大家供大家參考，具體如下：

1. Array.from()

Array.from()將類數組(array-like)對象與可遍歷的對象轉化為數組并返回。

下面是一個類數組

let arr = {  '0':'a',  '1':'b',  '2':'c',  length:3};

ES5我們可能都會這樣寫：

var arr1=[].slice.call(arr);

ES6可以把一個類數組轉化為一個真正的數組

var arr2=Array.from(arr)

實際應用中，常見的類似數組的對象是DOM操作返回NodeList集合，以及函數內部的arguments對象。array.from將他們轉換成真正的數組。

// NodeList對象let ps = document.querySelectorAll('p');Array.from(ps).forEach(function (p) { console.log(p);});// arguments對象function foo() { var args = Array.from(arguments); // ...}

上面代碼中，querySelectorAll方法返回的是一個類似數組的對象，只有將這個對象轉為真正的數組，才能使用forEach方法。

只要是部署了Iterator接口的數據結構，Array.from都能將其轉為數組。

Array.from('hello')// ['h', 'e', 'l', 'l', 'o']let namesSet = new Set(['a', 'b'])Array.from(namesSet) // ['a', 'b']

上面代碼中，字符串和Set結構都具有Iterator接口，因此可以被Array.from轉為真正的數組。

如果參數是一個真正的數組，Array.from會返回一個一模一樣的新數組。

Array.from([1, 2, 3])// [1, 2, 3]

值得提醒的是，擴展運算符（...）也可以將某些數據結構轉為數組。

// arguments對象function foo() { var args = [...arguments];}// NodeList對象[...document.querySelectorAll('div')]

擴展運算符背后調用的是遍歷器接口（Symbol.iterator），如果一個對象沒有部署這個接口，就無法轉換。

Array.from方法則是還支持類似數組的對象。所謂類似數組的對象，本質特征只有一點，即必須有length屬性。因此，任何有length屬性的對象，都可以通過Array.from方法轉為數組，而此時擴展運算符就無法轉換。

Array.from({ length: 3 });// [ undefined, undefined, undefined ]

上面代碼中，Array.from返回了一個具有三個成員的數組，每個位置的值都是undefined。擴展運算符轉換不了這個對象。

對于還沒有部署該方法的瀏覽器，可以用Array.prototype.slice方法替代。

const toArray = (() => Array.from ? Array.from : obj => [].slice.call(obj))();

Array.from還可以接受第二個參數，作用類似于數組的map方法，用來對每個元素進行處理，將處理后的值放入返回的數組。

Array.from(arrayLike, x => x * x);// 等同于Array.from(arrayLike).map(x => x * x);Array.from([1, 2, 3], (x) => x * x)// [1, 4, 9]