成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

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

newtrek / 2589人閱讀

摘要：更重要的是，代碼意圖也直觀數(shù)組長(zhǎng)度，每一項(xiàng)按照約定的規(guī)則進(jìn)行初始化。上面代碼創(chuàng)建了一個(gè)長(zhǎng)度為的數(shù)組其中的項(xiàng)為數(shù)字。的強(qiáng)大不止于此，它還能接受一個(gè)映射函數(shù)上面代碼中，被直接傳遞給方法，從而將它包含的值轉(zhuǎn)換成了數(shù)組。

es6新增了二種方法：Array.of()和Array.from()，它們有什么用途呢？在平時(shí)的開(kāi)發(fā)中能給我們帶來(lái)什么方便呢？本篇將從一個(gè)創(chuàng)建數(shù)組的小問(wèn)題開(kāi)始，逐步揭開(kāi)它們的面紗。
一個(gè)問(wèn)題

首先，我們來(lái)看一個(gè)問(wèn)題，我需要?jiǎng)?chuàng)建一個(gè)共81項(xiàng)的數(shù)組，有9行，每行9個(gè)數(shù)（從1-9），在頁(yè)面上進(jìn)行展示，如下：

怎么做呢？可以這樣：

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)

真的不優(yōu)雅！一看就是菜雞程序員寫(xiě)的，但不管怎么樣，的確實(shí)現(xiàn)了功能。
那規(guī)模加大，需要的是810項(xiàng)的數(shù)組呢？那就需要換一種實(shí)現(xiàn)方式了，如下：

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

看上去是不錯(cuò)，但容易讓人困惑，閱讀起來(lái)也不直觀，又是apply，又是null的，有點(diǎn)讓人抓狂。
可能有人會(huì)說(shuō)，用es6的Array.from()來(lái)做?。?/p> 

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

不錯(cuò)哦，代碼量變少了。更重要的是，代碼意圖也直觀：數(shù)組長(zhǎng)度810，每一項(xiàng)按照約定的規(guī)則進(jìn)行初始化。

看完了問(wèn)題，接下來(lái)具體說(shuō)說(shuō)這二個(gè)方法的誕生背景和用法，先來(lái)看Array.of

Array.of

es6之前，最常用的創(chuàng)建數(shù)組有如下兩種方式，一種是字面量方式，還一種是new Array()方式：

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

這里要重點(diǎn)提一下new Array()方式，因?yàn)樗幸粋€(gè)缺陷，如果要用這種方式創(chuàng)建一個(gè)數(shù)組，其中就只有一個(gè)數(shù)字3，它居然無(wú)法做到！

var arr = new Array(3)

上面只會(huì)得到一個(gè)長(zhǎng)度為3的數(shù)組（各項(xiàng)都是empty），而不是一個(gè)長(zhǎng)度為1的數(shù)組（其中的項(xiàng)為數(shù)字3）。
我給你一個(gè)數(shù)字3，讓你給我存到數(shù)組中，你給我一個(gè)長(zhǎng)度為3的數(shù)組？驚不驚喜，意不意外？

還好，ES6引入了Array.of()方法來(lái)解決這個(gè)問(wèn)題。

let arr = Array.of(3)

上面代碼創(chuàng)建了一個(gè)長(zhǎng)度為1的數(shù)組（其中的項(xiàng)為數(shù)字3）。
相比new Array()這種方式，Array.of()的方式顯得更明了，我需要存什么，扔給它，它就給我存到數(shù)組中，不會(huì)給我意外和驚嚇。

Array.from

可能會(huì)有人問(wèn)，既然已經(jīng)新增了Array.of()這種方式，還需要Array.from()方式嗎？他們有區(qū)別呢？
簡(jiǎn)單點(diǎn)說(shuō)，Array.from()適用于將非數(shù)組對(duì)象轉(zhuǎn)換為數(shù)組的場(chǎng)景，它的初衷就是為了解決將非數(shù)組對(duì)象轉(zhuǎn)換為數(shù)組的問(wèn)題。
我們來(lái)看一個(gè)例子：

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

我們知道，JS函數(shù)中有一個(gè)arguments對(duì)象，arguments是一個(gè)類(lèi)數(shù)組對(duì)象。
上面代碼中，用Array.from()將arguments轉(zhuǎn)換成真正的數(shù)組并返回。多方便啊，就一個(gè)方法搞定。
而在es6之前，如果要將arguments轉(zhuǎn)換為數(shù)組，你得自己寫(xiě)一個(gè)類(lèi)似的轉(zhuǎn)換方法，多麻煩啊。

Array.from()的強(qiáng)大不止于此，它還能接受一個(gè)映射函數(shù)：

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

上面代碼中，arguments被直接傳遞給Array.from()方法，從而將它包含的值轉(zhuǎn)換成了數(shù)組。
映射函數(shù)對(duì)每個(gè)數(shù)都進(jìn)行了立方運(yùn)算，因此目標(biāo)數(shù)組的內(nèi)容就是[ 1, 27, 125 ]，Array.from()不僅能夠?qū)?b>非數(shù)組對(duì)象轉(zhuǎn)換為數(shù)組，還能按照我們想要的方式進(jìn)行轉(zhuǎn)換，強(qiáng)大！

注意：Array.from()方法不僅可用于類(lèi)數(shù)組對(duì)象，也可用于可迭代對(duì)象，更多請(qǐng)參考Array.from()

總結(jié)

準(zhǔn)確來(lái)說(shuō)，Array.from()并不能算創(chuàng)建數(shù)組的一種方式，畢竟它的初衷是為了解決將非數(shù)組對(duì)象轉(zhuǎn)換為數(shù)組的問(wèn)題。
但話說(shuō)回來(lái)，既然它能將非數(shù)組對(duì)象轉(zhuǎn)換為數(shù)組，所以也可以說(shuō)，它算創(chuàng)建數(shù)組的一種方式。
恭喜！讀完本篇，你知道了至少四種創(chuàng)建數(shù)組的方式了。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/102299.html

相關(guān)文章

  • JS的內(nèi)置對(duì)象系列：Array（一）

    摘要：日常開(kāi)發(fā)過(guò)程中，發(fā)現(xiàn)自己對(duì)很多原生方法都不知道，有些早已實(shí)現(xiàn)的方法，卻傻乎乎自己去實(shí)現(xiàn)，因此萌生了總結(jié)和練習(xí)內(nèi)置對(duì)象方法的想法。 日常開(kāi)發(fā)過(guò)程中，發(fā)現(xiàn)自己對(duì)很多原生方法都不知道，有些早已實(shí)現(xiàn)的方法，卻傻乎乎自己去實(shí)現(xiàn)，因此萌生了總結(jié)和練習(xí)JS內(nèi)置對(duì)象方法的想法。以下內(nèi)容可能并不有趣，請(qǐng)謹(jǐn)慎觀看?，參考自MDN Array對(duì)象的屬性 Array.length 這個(gè)大家都再熟悉不過(guò)啦...

    張紅新 評(píng)論0 收藏0

  • ES6 舊瓶新酒

    摘要：本文是系列的第二篇，前一篇走馬觀花概要介紹了，這一篇標(biāo)題之所以叫舊瓶新酒，是想介紹那些原來(lái)就被廣泛使用的對(duì)象，例如，對(duì)這些對(duì)象擴(kuò)展了一些很有用的新方法。用于監(jiān)聽(tīng)取消監(jiān)聽(tīng)數(shù)組的變化，指定回調(diào)函數(shù)。在中已被建議撤銷(xiāo)。 本文是 ES6 系列的第二篇，前一篇《ES6 走馬觀花》概要介紹了ES6，這一篇標(biāo)題之所以叫舊瓶新酒，是想介紹那些原來(lái)就被廣泛使用的JS對(duì)象，例如String、Array，E...

    未東興 評(píng)論0 收藏0

  • 重讀《學(xué)習(xí)JavaScript數(shù)據(jù)結(jié)構(gòu)與算法-第三版》- 第3章 數(shù)組（二）

    摘要：定場(chǎng)詩(shī)守法朝朝憂悶，強(qiáng)梁夜夜歡歌損人利己騎馬騾，正值公平挨餓修橋補(bǔ)路瞎眼，殺人放火兒多我到西天問(wèn)我佛，佛說(shuō)我也沒(méi)轍前言讀學(xué)習(xí)數(shù)據(jù)結(jié)構(gòu)與算法第章數(shù)組，本小節(jié)將繼續(xù)為各位小伙伴分享數(shù)組的相關(guān)知識(shí)數(shù)組的新功能。 定場(chǎng)詩(shī) 守法朝朝憂悶，強(qiáng)梁夜夜歡歌； 損人利己騎馬騾，正值公平挨餓； 修橋補(bǔ)路瞎眼，殺人放火兒多； 我到西天問(wèn)我佛，佛說(shuō)：我也沒(méi)轍！ 前言 讀《學(xué)習(xí)JavaScript數(shù)據(jù)結(jié)構(gòu)與算法...

    William_Sang 評(píng)論0 收藏0

  • 【重溫基礎(chǔ)】10.數(shù)組

    摘要：本文是重溫基礎(chǔ)系列文章的第十篇。返回一個(gè)由回調(diào)函數(shù)的返回值組成的新數(shù)組。返回一個(gè)數(shù)組迭代器對(duì)象，該迭代器會(huì)包含所有數(shù)組元素的鍵值對(duì)?；卣{(diào)函數(shù)接收三個(gè)參數(shù)，當(dāng)前值當(dāng)前位置和原數(shù)組。 本文是 重溫基礎(chǔ) 系列文章的第十篇。 今日感受：平安夜，多棒。 系列目錄： 【復(fù)習(xí)資料】ES6/ES7/ES8/ES9資料整理(個(gè)人整理) 【重溫基礎(chǔ)】1.語(yǔ)法和數(shù)據(jù)類(lèi)型 【重溫基礎(chǔ)】2.流程控制和錯(cuò)誤...

    DangoSky 評(píng)論0 收藏0

  • ES6數(shù)組 - 新增的創(chuàng)建數(shù)組的方法

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

    e10101 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<