Array.from和 Array.of

i涵涵發表於2019-02-21

（Array.from和 Array.of）

ES6新增了很多陣列操作的方法。但是，Array.from和Array.of 並不在陣列的原型物件上。或者說，並不是一個動態的方法。

所以，我們是不可以直接在陣列上去呼叫這個方法的。

const arr = ["one", "two"];

arr.from() //報錯 類陣列物件 我們常常說到的類陣列物件類陣列物件，那麼，什麼是類陣列物件呢？

  • 吃飯
  • 睡覺
  • 打豆豆
  • 刷牙
  • 吃宵夜

image

我們可以看到這個物件的構造器並不是我們的Array，而是NodeList。那麼，我們說，這種帶有length屬性。構造器卻不是Array的物件就叫做類陣列物件。

那麼實際上，我們常常需要去使用陣列的方法，去操作這些類陣列物件。

例如，我現在需要取得上例的todo。將內容存起來。

上例執行後將會直接報錯，因為類陣列物件不是陣列物件，並不具備我們的map方法。 那麼，如何去實現呼叫map方法呢？

Array.from() 在ES6當中,我們可以通過使用Array.from()來將類陣列物件直接轉換成陣列物件。

const list = document.querySelectorAll('li');
var listArr = Array.from(list);
const todos = listArr.map(val => val.innerText);
複製程式碼

當然，這樣寫總感覺程式碼還不夠美觀。那麼其實，Array.from有第二個引數，第二個引數就類似的是我們的map方法。

const list = document.querySelectorAll('li');
const todos = Array.from(list,val => val.innerText);
console.log(todos)
複製程式碼

Array.of() 我們知道，在我們使用陣列的構造器函式去新建一個陣列的時候。

var arr = new Array(10);

傳入一個引數的時候，將會生成陣列的長度。

var arr = new Array(1,2,3); console.log(arr);//[1,2,3]; 將會生成一個陣列。

那麼ES6就為了避免這種情況發生，設計了Array.of()。來使無論傳入多少個引數，都可以直接生成一個陣列。

var arr = Array.of(1); console.log(arr); //[1]; var arr1 = Array.of(2,3); console.log(arr1); //[2,3];

相關文章