JavaScript 中将节点列表转换为数组

在事情成功之前，一切总看似不可能。——<纳尔逊·曼德拉>

querySelectorAll 方法返回一个称为节点列表的类似数组的对象。这些数据结构被称为 “类数组”，因为它们看起来像一个数组，但不能与诸如 map 和的数组方法一起使用forEach。这是一种将节点列表转换为DOM元素数组的快速，安全且可重用的方法：

const nodelistToArray = Array.apply(null, nodelist);

//later on ..

nodelistToArray.forEach(...);
nodelistToArray.map(...);
nodelistToArray.slice(...);

apply 方法用于将参数数组传递给具有给定this值的函数。
MDN声明apply将采用类似数组的对象，这正是 querySelectorAll 返回的结果。MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
由于我们不需要this在函数的上下文中指定的值，因此我们传入null或0。结果是一个实际的DOM元素数组，其中包含所有可用的数组方法。

或者，可以使用Array.prototype.slice结合 Function.prototype.call或 Function.prototype.apply 将类似数组的对象用作的值this：

const nodelist = document.querySelectorAll('div');
const nodelistToArray = Array.prototype.slice.call(nodelist); // or equivalently Array.prototype.slice.apply(nodelist);

//later on ..

nodelistToArray.forEach(...);
nodelistToArray.map(...);
nodelistToArray.slice(...);

或者，如果您使用的是ES2015，则可以使用 扩展运算符...

const nodelist = [...document.querySelectorAll('div')]; // returns a real array

//later on ..

nodelist.forEach(...);
nodelist.map(...);
nodelist.slice(...);

参考

关注【公众号】，了解更多。

赏

支付宝打赏

微信打赏

赞赏一下坚持原创技术分享，您的支持将鼓励我继续创作！

参考

FEATURED TAGS

FRIENDS