如何迭代nodeList功能樣式

Question

我經常想用forEach或map遍歷NodeList。我的簡化代碼是這樣的：

var nodeListMap = Array.prototype.map; 
var els = document.querySelectorAll('.classname'); 
nodeListMap.call(els, function(el){...}); 

這工作正常。但是，我寧願沒有map.call，但如果我這樣做...

var nodeListMap = Array.prototype.map.call; 
var els = document.querySelectorAll('.classname'); 
nodeListMap(els, function(el){...}); 

然後返回

TypeError: object is not a function 

我如何修改代碼，所以我根本就nodeListMap(array, fn)？

Answer 1

這可能是最簡單的只是寫自己的函數，「做正確的事」

function map() { 
    var args = [].slice.call(arguments, 0); 
    var ctx = args.shift(); 
    return [].map.apply(ctx, args); 
} 

那麼這將爲任何僞數組對象工作。

編輯此代碼更新，以確保所有參數傳遞給.map，即使ECMA在未來增加更多。

Answer 2

Array.prototype.map.call只是讓你call功能（Function.prototype.call），沒有上下文。您需要將其綁定到map功能：

var nodeListMap = Function.prototype.call.bind(Array.prototype.map); 

如果你不想使用bind，你也可以寫

function nodeListMap(_list /* … */) { 
    return Function.prototype.call.apply(Array.prototype.map, arguments); 
} 

Answer 3

另一種辦法是添加此功能的原型節點列表：

NodeList.prototype.map = function(step){ 
    return Array.prototype.map.call(this, step); 
}; 
NodeList.prototype.forEach = function(step){ 
    return Array.prototype.forEach.call(this, step); 
}; 

有了這個，你可能只需要調用：

els.map(function(el){...}); 

應該指出的是，有些人可能會因爲這種方式修改NodeList的原型而皺眉，但我個人並沒有真正看到它的問題。

或者，如果您需要設置this對象：

NodeList.prototype.map = function(step){ 
    return Array.prototype.map.call(this, step, Array.prototype.slice.call(arguments, 1)); 
}; 
NodeList.prototype.forEach = function(step){ 
    return Array.prototype.forEach.call(this, step, Array.prototype.slice.call(arguments, 1)); 
}; 

注：上面有一個副作用，就是當你不通過第二個參數，this成爲空的數組，而不是window。

或

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