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

newtrek 發布于2019-08-23 15:36 / 2577人閱讀

摘要：更重要的是，代碼意圖也直觀數組長度，每一項按照約定的規則進行初始化。上面代碼創建了一個長度為的數組其中的項為數字。的強大不止于此，它還能接受一個映射函數上面代碼中，被直接傳遞給方法，從而將它包含的值轉換成了數組。

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()并不能算創建數組的一種方式，畢竟它的初衷是為了解決將非數組對象轉換為數組的問題。
但話說回來，既然它能將非數組對象轉換為數組，所以也可以說，它算創建數組的一種方式。
恭喜！讀完本篇，你知道了至少四種創建數組的方式了。

GPU云服務器云服務器 es6-系列白話大數據和機器學習系列一云服務器產品系列和價格

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102299.html

JS的內置對象系列：Array（一）

摘要：日常開發過程中，發現自己對很多原生方法都不知道，有些早已實現的方法，卻傻乎乎自己去實現，因此萌生了總結和練習內置對象方法的想法。日常開發過程中，發現自己對很多原生方法都不知道，有些早已實現的方法，卻傻乎乎自己去實現，因此萌生了總結和練習JS內置對象方法的想法。以下內容可能并不有趣，請謹慎觀看?，參考自MDN Array對象的屬性 Array.length 這個大家都再熟悉不過啦...

張紅新 2019-08-20 14:35 評論0 收藏0
ES6 舊瓶新酒

摘要：本文是系列的第二篇，前一篇走馬觀花概要介紹了，這一篇標題之所以叫舊瓶新酒，是想介紹那些原來就被廣泛使用的對象，例如，對這些對象擴展了一些很有用的新方法。用于監聽取消監聽數組的變化，指定回調函數。在中已被建議撤銷。本文是 ES6 系列的第二篇，前一篇《ES6 走馬觀花》概要介紹了ES6，這一篇標題之所以叫舊瓶新酒，是想介紹那些原來就被廣泛使用的JS對象，例如String、Array，E...

未東興 2019-08-21 10:48 評論0 收藏0
重讀《學習JavaScript數據結構與算法-第三版》- 第3章數組（二）

摘要：定場詩守法朝朝憂悶，強梁夜夜歡歌損人利己騎馬騾，正值公平挨餓修橋補路瞎眼，殺人放火兒多我到西天問我佛，佛說我也沒轍前言讀學習數據結構與算法第章數組，本小節將繼續為各位小伙伴分享數組的相關知識數組的新功能。定場詩守法朝朝憂悶，強梁夜夜歡歌；損人利己騎馬騾，正值公平挨餓；修橋補路瞎眼，殺人放火兒多；我到西天問我佛，佛說：我也沒轍！前言讀《學習JavaScript數據結構與算法...

William_Sang 2019-08-26 14:01 評論0 收藏0
【重溫基礎】10.數組

摘要：本文是重溫基礎系列文章的第十篇。返回一個由回調函數的返回值組成的新數組。返回一個數組迭代器對象，該迭代器會包含所有數組元素的鍵值對。回調函數接收三個參數，當前值當前位置和原數組。本文是重溫基礎系列文章的第十篇。今日感受：平安夜，多棒。系列目錄：【復習資料】ES6/ES7/ES8/ES9資料整理(個人整理) 【重溫基礎】1.語法和數據類型【重溫基礎】2.流程控制和錯誤...

DangoSky 2019-08-23 14:19 評論0 收藏0
ES6數組 - 新增的創建數組的方法

摘要：它主要用在以類數組對象和可迭代對象為藍本，創建對應的數組。類數組對象我們最熟悉的類數組對象，應該就是的對象了。在ES6之前，創建數組的方式有2種：一: 通過數組字面量 let array = [1,2,3]; console.log(array);//[1,2,3] 二: 通過new Array()創建數組 let array = new Array(1, 2, 3); conso...

e10101 2019-08-26 10:28 評論0 收藏0