在Javascript中,将NodeList转换为数组的最佳方法是什么?
DOM方法document.querySelectorAll()
(和其他几个)返回一个NodeList
。
要在列表上进行操作,例如使用forEach()
,必须先将NodeList
转换为Array
。
什么是将NodeList
转换为Array
的最佳方式?
有了ES6,你可以简单地做到:
const spanList = [...document.querySelectorAll("span")];
有了ES6,你可以使用Array.from(myNodeList)
。 然后使用你最喜欢的数组方法。
var myNodeList = document.querySelectorAll('.my-selector'); // ALT 1 Array.from(myNodeList).forEach(function(el) { console.log(el); });
使用ES6垫片也可以在旧版浏览器中使用。
如果你正在使用一个转译器(例如Babel),还有两个select:
var myNodeList = document.querySelectorAll('.my-selector'); // ALT 2 for (var el of myNodeList) { el.classList.add('active'); // or some other action } // ALT 3 [...myNodeList].forEach((el) => { console.log(el); });
您可以使用Array
原型中的slice
方法将其转换为数组:
var elList = document.querySelectorAll('.viewcount'); elList = Array.prototype.slice.call(elList, 0);
此外,如果您只需要forEach
,则可以从Array
原型调用它 ,而不首先将其强制转换为数组:
var elList = document.querySelectorAll('.viewcount'); Array.prototype.forEach.call(elList, function(el) { console.log(el); });
在ES6中,您可以使用新的Array.from
函数将其转换为数组:
Array.from(elList).forEach(function(el) { console.log(el); });
目前这只是在stream血的浏览器中,但是如果你使用的是一个polyfill服务,你将可以全面访问这个function。
如果您使用的是ES6转换器 ,您甚至可以使用for..of
循环:
for (var element of document.querySelectorAll('.some .elements')) { // use element here }
为什么转换? – 直接在元素集合上call
Array的函数;)
[].forEach.call( $('a'), function( v, i) { // do something });
假设$是你的别名querySelectorAll ,当然
编辑:ES6允许甚至更短的语法[...$('a')]
( 仅在Firefox中工作,截至2014年5月 )
它必须是forEach
吗? 你可以简单地使用for
循环遍历列表:
for (var i = 0; i < elementList.length; i++) { doSomethingWith(elementlist.item(i)); }
要在javascript中对列表进行操作,例如使用forEach(),必须将NodeList转换为Array。
这不一定是真的。 你可以添加.forEach()从数组到NodeList ,它工作正常:
if ( ! NodeList.prototype.forEach ) { NodeList.prototype.forEach = Array.prototype.forEach; }
您现在可以运行:
myNodeList.forEach(function(node){...})
像Arrays一样遍历NodeLists。
这产生比.call()无处不在的更短,更干净的代码。
ES6允许很酷的方式,如var nodeArray = Array.from(nodeList)
但我最喜欢的是新的传播运算符。
var nodeArray = Array(...nodeList);
假设elems是一个nodeList:
var elems = document.querySelectorAll('select option:checked');
那么它可以变成一个数组如下:
var values = [].map.call(elems, function(obj) { return obj.value; });
参考: https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map#Example : _using_map_generically_querySelectorAll