白話es6系列一：Array.of()和Array.from()

es6新增了二種方法：Array.of()和Array.from()，它們有什麼用途呢？在平時的開發中能給咱們帶來什麼方便呢？本篇將從一個建立數組的小問題開始，逐步揭開它們的面紗。

一個問題

首先，咱們來看一個問題，我須要建立一個共81項的數組，有9行，每行9個數（從1-9），在頁面上進行展現，以下：

怎麼作呢？能夠這樣：

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
arr = arr.concat(arr)
arr = arr.concat(arr)
arr = arr.concat(arr)
arr = arr.concat([1, 2, 3, 4, 5, 6, 7, 8, 9])

console.table(arr)

真的不優雅！一看就是菜雞程序員寫的，但無論怎麼樣，的確實現了功能。
那規模加大，須要的是810項的數組呢？那就須要換一種實現方式了，以下：

let arr = Array.apply(null, { length: 810 })
  .map((item, index) => {
    return {
      id: index,
      number: index % 9 + 1
    }
  })

看上去是不錯，但容易讓人困惑，閱讀起來也不直觀，又是apply，又是null的，有點讓人抓狂。
可能有人會說，用es6的Array.from()來作啊：

let arr = Array.from({ length: 810 }, (item, index) => ({
  id: index,
  number: index % 9 + 1
}))

不錯哦，代碼量變少了。更重要的是，代碼意圖也直觀：數組長度810，每一項按照約定的規則進行初始化。

看完了問題，接下來具體說說這二個方法的誕生背景和用法，先來看Array.of

Array.of

es6以前，最經常使用的建立數組有以下兩種方式，一種是字面量方式，還一種是new Array()方式：

var arr1 = [1, 3, 5]
var arr2 = new Array(1, 3, 5)

這裏要重點提一下new Array()方式，由於它有一個缺陷，若是要用這種方式建立一個數組，其中就只有一個數字3，它竟然沒法作到！

var arr = new Array(3)

上面只會獲得一個長度爲3的數組（各項都是empty），而不是一個長度爲1的數組（其中的項爲數字3）。
我給你一個數字3，讓你給我存到數組中，你給我一個長度爲3的數組？驚不驚喜，意不意外？

還好，ES6引入了Array.of()方法來解決這個問題。

let arr = Array.of(3)

上面代碼建立了一個長度爲1的數組（其中的項爲數字3）。
相比new Array()這種方式，Array.of()的方式顯得更明瞭，我須要存什麼，扔給它，它就給我存到數組中，不會給我意外和驚嚇。

Array.from

可能會有人問，既然已經新增了Array.of()這種方式，還須要Array.from()方式嗎？他們有區別呢？
簡單點說，Array.from()適用於將非數組對象轉換爲數組的場景，它的初衷就是爲了解決將非數組對象轉換爲數組的問題。
咱們來看一個例子：

function makeArray() {
  return Array.from(arguments);
}
let arr = makeArray('a', 'b', 'c');

咱們知道，JS函數中有一個arguments對象，arguments是一個類數組對象。
上面代碼中，用Array.from()將arguments轉換成真正的數組並返回。多方便啊，就一個方法搞定。
而在es6以前，若是要將arguments轉換爲數組，你得本身寫一個相似的轉換方法，多麻煩啊。

Array.from()的強大不止於此，它還能接受一個映射函數：

function cube() {
  return Array.from(arguments, value => value ** 3);
}
let arr = cube(1, 3, 5);

上面代碼中，arguments被直接傳遞給Array.from()方法，從而將它包含的值轉換成了數組。
映射函數對每一個數都進行了立方運算，所以目標數組的內容就是[ 1, 27, 125 ]，Array.from()不只可以將非數組對象轉換爲數組，還能按照咱們想要的方式進行轉換，強大！

注意：Array.from()方法不只可用於類數組對象，也可用於可迭代對象，更多請參考Array.from()

總結

準確來講，Array.from()並不能算建立數組的一種方式，畢竟它的初衷是爲了解決將非數組對象轉換爲數組的問題。
但話說回來，既然它能將非數組對象轉換爲數組，因此也能夠說，它算建立數組的一種方式。
恭喜！讀完本篇，你知道了至少四種建立數組的方式了。😱