JavaScript中Array.from()的超全用法詳解
Array.from方法用于將兩類對象轉(zhuǎn)為真正的數(shù)組:類似數(shù)組的對象(array-like object)和可遍歷(iterable)的對象(包括 ES6 新增的數(shù)據(jù)結(jié)構(gòu) Set 和 Map)。
下面是一個類似數(shù)組的對象,Array.from將它轉(zhuǎn)為真正的數(shù)組。
let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3 }; // ES6的寫法 let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
實際應(yīng)用中,常見的類似數(shù)組的對象是 DOM 操作返回的 NodeList 集合,以及函數(shù)內(nèi)部的arguments對象。Array.from都可以將它們轉(zhuǎn)為真正的數(shù)組。
// NodeList對象 let ps = document.querySelectorAll('p'); Array.from(ps).filter(p => { return p.textContent.length > 100; }); // arguments對象 function foo() { var args = Array.from(arguments); // ... }
上面代碼中,querySelectorAll方法返回的是一個類似數(shù)組的對象,可以將這個對象轉(zhuǎn)為真正的數(shù)組,再使用filter方法。
只要是部署了 Iterator 接口的數(shù)據(jù)結(jié)構(gòu),Array.from都能將其轉(zhuǎn)為數(shù)組。
Array.from('hello') // ['h', 'e', 'l', 'l', 'o'] let namesSet = new Set(['a', 'b']) Array.from(namesSet) // ['a', 'b']
上面代碼中,字符串和 Set 結(jié)構(gòu)都具有 Iterator 接口,因此可以被Array.from轉(zhuǎn)為真正的數(shù)組。
如果參數(shù)是一個真正的數(shù)組,Array.from會返回一個一模一樣的新數(shù)組。
Array.from([1, 2, 3]) // [1, 2, 3]
值得提醒的是,擴展運算符(...)也可以將某些數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)為數(shù)組。
// arguments對象 function foo() { const args = [...arguments]; } // NodeList對象 [...document.querySelectorAll('div')]
擴展運算符背后調(diào)用的是遍歷器接口(Symbol.iterator),如果一個對象沒有部署這個接口,就無法轉(zhuǎn)換。Array.from方法還支持類似數(shù)組的對象。所謂類似數(shù)組的對象,本質(zhì)特征只有一點,即必須有l(wèi)ength屬性。因此,任何有l(wèi)ength屬性的對象,都可以通過Array.from方法轉(zhuǎn)為數(shù)組,而此時擴展運算符就無法轉(zhuǎn)換。
Array.from({ length: 3 }); // [ undefined, undefined, undefined ]
上面代碼中,Array.from返回了一個具有三個成員的數(shù)組,每個位置的值都是undefined。擴展運算符轉(zhuǎn)換不了這個對象。
對于還沒有部署該方法的瀏覽器,可以用Array.prototype.slice方法替代。
const toArray = (() => Array.from ? Array.from : obj => [].slice.call(obj) )();
Array.from還可以接受第二個參數(shù),作用類似于數(shù)組的map方法,用來對每個元素進行處理,將處理后的值放入返回的數(shù)組。
Array.from(arrayLike, x => x * x); // 等同于 Array.from(arrayLike).map(x => x * x); Array.from([1, 2, 3], (x) => x * x) // [1, 4, 9]
下面的例子是取出一組 DOM 節(jié)點的文本內(nèi)容。
let spans = document.querySelectorAll('span.name'); // map() let names1 = Array.prototype.map.call(spans, s => s.textContent); // Array.from() let names2 = Array.from(spans, s => s.textContent)
下面的例子將數(shù)組中布爾值為false的成員轉(zhuǎn)為0。
Array.from([1, , 2, , 3], (n) => n || 0) // [1, 0, 2, 0, 3]
另一個例子是返回各種數(shù)據(jù)的類型。
function typesOf () { return Array.from(arguments, value => typeof value) } typesOf(null, [], NaN) // ['object', 'object', 'number']
如果map函數(shù)里面用到了this關(guān)鍵字,還可以傳入Array.from的第三個參數(shù),用來綁定this。
Array.from()可以將各種值轉(zhuǎn)為真正的數(shù)組,并且還提供map功能。這實際上意味著,只要有一個原始的數(shù)據(jù)結(jié)構(gòu),你就可以先對它的值進行處理,然后轉(zhuǎn)成規(guī)范的數(shù)組結(jié)構(gòu),進而就可以使用數(shù)量眾多的數(shù)組方法。
Array.from({ length: 2 }, () => 'jack') // ['jack', 'jack']
上面代碼中,Array.from的第一個參數(shù)指定了第二個參數(shù)運行的次數(shù)。這種特性可以讓該方法的用法變得非常靈活。
Array.from()的另一個應(yīng)用是,將字符串轉(zhuǎn)為數(shù)組,然后返回字符串的長度。因為它能正確處理各種 Unicode 字符,可以避免 JavaScript 將大于\uFFFF的 Unicode 字符,算作兩個字符的 bug。
function countSymbols(string) { return Array.from(string).length; }
到此這篇關(guān)于JavaScript中Array.from()的超全用法詳解的文章就介紹到這了,更多相關(guān)JavaScript Array.from內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS & JQuery 動態(tài)添加 select option
這篇文章主要介紹了JS & JQuery 動態(tài)添加 select option 的相關(guān)資料,非常不錯具有參考借鑒價值,感興趣的朋友一起看下吧2016-06-06JavaScript的String字符串對象常用操作總結(jié)
String對象用于存儲字符串?dāng)?shù)據(jù),這里我們做了JavaScript的String字符串對象常用操作總結(jié),需要的朋友可以參考下2016-05-05JavaScript實現(xiàn)動態(tài)添加Form表單元素的方法示例
這篇文章主要介紹了JavaScript實現(xiàn)動態(tài)添加Form表單元素的方法,結(jié)合實例形式分析了javascript表單元素操作相關(guān)函數(shù)使用方法與相關(guān)注意事項,需要的朋友可以參考下2017-08-08JavaScript循環(huán)_動力節(jié)點Java學(xué)院整理
這篇文章主要為大家詳細介紹了JavaScript循環(huán)的相關(guān)資料,JavaScript的兩種循環(huán)方式,一種是for循環(huán),另while一種是循環(huán)具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06使用mini-define實現(xiàn)前端代碼的模塊化管理
這篇文章主要介紹了使用mini-define實現(xiàn)前端代碼的模塊化管理,十分不錯的一篇文章,這里推薦給有需要的小伙伴。2014-12-12JavaScript 實現(xiàn)自己的安卓手機自動化工具腳本(推薦)
這篇文章主要介紹了 JavaScript 實現(xiàn)自己的安卓手機自動化工具腳本,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05JavaScript中的二進制數(shù)據(jù)處理方法詳解
Blob、ArrayBuffer和Buffer是JavaScript中用于表示和操作二進制數(shù)據(jù)的三種主要方式,本文將深入探討這些概念,以及它們?nèi)绾卧贘avaScript中使用,需要的可以參考一下2023-06-06