Array.from的妙用

developerworks 發(fā)布于2019-08-19 17:36 / 1455人閱讀

摘要：所謂對象指具有數組某些行為的對象，表現出來的特征就是具有屬性。不考慮兼容性的話，我們就可以直接用了。前面說了的一些內容，既然標題說了妙用自然還要來點新的東西。好用歸好用，不過在性能上卻有些尷尬。

es6新特性中Array類多了一個靜態(tài)方法from，這個方法作用是將一個ArrayLike對象或者Iterable對象轉換成一個Array，本文只討論ArrayLike對象相關內容。

所謂ArrayLike對象指具有數組某些行為的對象，表現出來的特征就是具有length屬性。

var obj = {
    "0" : 1,
    length: 1
};

這一類對象不能調用數組所具有的方法(push/forEach/map之類)，最常見的有兩種：DOM中的NodeList和函數中的arguments。

在平常開發(fā)中，我們經常遇到需要將這兩種對象轉化為真正數組的場景，一般我們是這么寫：

var args = [].slice.call(arguments);
var imgs = [].slice.call(document.querySelectorAll("img"));

現在我們有了Array.from，可以這樣寫。

var args = Array.from(arguments);
var imgs = Array.from(document.querySelectorAll("img"));

不考慮兼容性的話，我們就可以直接用Array.from了。前面說了Array.from的一些內容，既然標題說了妙用,自然還要來點新的東西。

有時我們會遇到這樣的場景，需要創(chuàng)建一個包含從0到99(n)的連續(xù)整數的數組。以前我們會這樣寫

var arr = [];
for(var i = 0; i <= 99; i++) {
    arr.push(i);
}

這種方法最直觀了，性能也很好。只是不喜歡寫for循環(huán)的同學可能不會這樣寫，所以有人搞出了下面這種寫法

var arr = Array(100).join(" ").split("").map(function(item,index){return index});

這種方法中Array(100)創(chuàng)建了一個包含100個空位的數組。

但是這樣的數組是沒法迭代的(參考forEach方法的定義)，

所以要通過字符串轉換，覆蓋undefined，最后調用map修改元素值。

有了es6,用Array.from的寫法是這樣的

var arr = Array.from({length:100}).map(function(item,index){return index});

這種方法中Array.from({length:100})也是創(chuàng)建了一個包含100個undefined的數組，

但是這個數組可以迭代([].slice.call({length:100})創(chuàng)建的不可迭代)，可以直接調用map方法。

上面的代碼其實包含了一個重要的信息，Array.from創(chuàng)建的數組是可以迭代的(參考Array.from方法的定義)，

即使元素值都是undefined。所以Array.from還可以用來實現次數確定的循環(huán)遍歷。例如在寫React組件時，有時要map迭代確定次數，生成html。

Array.from好用歸好用，不過在性能上卻有些尷尬。上面三種方法第一種性能最好，第二種次之，第三種最差。具體數據可以看這里constarray

云服務器 GPU云服務器獲取oss的object的鏈接地址的方法云計算的的發(fā)展云計算的特征的是一個機柜的的價格

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

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

js常用小技巧黑科技 - javascript(js) commonly used skill

摘要：原文地址小數取整妙用隱式轉換數字字符串轉轉時間戳數組多維數組轉逗號分隔字符串解構交換的值擴展運算符取數組最大值生成時間字符串轉數組合并對象等同于常用方法數字前補數組元素為對象的去重數組求和金錢格式化短路邏輯代替生成指定長度數組正則進階捕原文地址 https://github.com/TigerHee/s... 小數取整： 1.234 | 0 ~~1.234 1.234 >...

shadowbook 2019-08-26 11:59 評論0 收藏0
JS數組方法匯總

Javascript原生方法注意:js數組每一項可以保存任何類型的數據，比如第一個元素是字符串，第二個元素是數字，第三個元素是對象創(chuàng)建數組 tips: 建議使用數組字面量方式【簡單】 var colors = new Array() var colors = new Array(red,blue) var colors = []; var colors = [red,blue]; 檢測數組 ...

wean 2019-08-26 11:31 評論0 收藏0
JavaScript中的this妙用

摘要：關鍵字始腳本能夠根據使用這個關鍵字的上下文將值傳遞給函數。替我們完成的工作之一是從鏈接獲得也就是標簽的屬性。實際上，可以讓站點上的所有鏈接都調用這個相同的代碼，這一行代碼都會自動獲得相應的值。 JavaScript關鍵字this始JS腳本能夠根據使用這個關鍵字的上下文將值傳遞給函數。我們先來看如下一個網頁，在用戶單擊鏈接之后，彈出一個alert框，然后再轉到href屬性所指的網頁HTM...

jayzou 2019-08-19 17:47 評論0 收藏0
#關于setTimeout的妙用

摘要：如果對當前元素的點擊事件處理加上的話，那么執(zhí)行順序就會改變?yōu)楦冈禺斍霸亍＿@樣的結果會導致新內容很晚才能渲染完成，很多時候我們需要讓界面先渲染完成之后在去調用引擎來執(zhí)行，那么可以使用來延遲引擎的調用關于setTimeout的妙用定義在指定的延遲時間之后調用一個函數或執(zhí)行一個代碼片段這個是setTimeout最主要的功能，但也是很坑的地方，首先javascript其實是運行在單...

崔曉明 2019-08-20 12:12 評論0 收藏0
return/break語句的妙用

摘要：在里面，一般我們想讓程序在里面執(zhí)行到一半時，經過判斷或者完成某種操作后停止執(zhí)行后面的代碼，會用結束掉?？梢栽谥虚g加入多個作為斷點，控制邏輯的流程。在JavaScript里面，一般我們想讓程序在function里面執(zhí)行到一半時，經過判斷或者完成某種操作后停止執(zhí)行后面的代碼，會用return結束掉function。例如： //去除前后的空格function spaceWord(vRet...

Batkid 2019-08-23 15:58 評論0 收藏0