javascript - NodeList.prototype.forEach = Array.prototype.forEach;

Question

您是否发现以下任何问题：

NodeList.prototype.forEach = Array.prototype.forEach;

通常forEach只是数组的一个属性，但是通过将其设置为所有NodeLists 的属性，无需将 a 转换NodeList为数组，然后就可以使用forEach.

Answer 1

通过原型扩展 DOM 的功能通常不是一个好主意，尤其是在旧版本的 IE 中（文章）。

但是，Array.prototype.forEach即使不将其添加到原型链或将其转换NodeList为数组，您也可以简单地使用：

var list = document.querySelectorAll(".some.query");
Array.prototype.forEach.call(list, function(el){ /* ... */ });

/* or */
var forEach = function(ctn, callback){
    return Array.prototype.forEach.call(ctn, callback);
}
forEach(list, function(el){ /* ... */ });

另请参阅 MDN：为什么我不能在forEachmapNodeList.

Answer 2

如果您正在开发一个将被其他人使用的库，那么这样做不是一个好主意。

如果它只是您自己的代码（即网站），那么我想这没什么大不了的。不过，您可能应该保护它，因为将来浏览器将原生支持NodeList.prototype.forEach（Chrome 已经支持）。

if (!NodeList.prototype.forEach) {
  NodeList.prototype.forEach = Array.prototype.forEach;
}

Answer 3

正如 Zeta 所说，最好使用便利功能。但是，此版本将允许您为其提供上下文。

var forEach = function(list, callback, context){
  return Array.prototype.forEach.call(list, callback, context);
};

Answer 4

NodeList.prototype.forEach()现在可在大多数浏览器中使用： https ://developer.mozilla.org/fr/docs/Web/API/NodeList/forEach

浏览器兼容性表： https ://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach#Browser_Compatibility