javascript - 像javascript中的对象一样在数组上应用forEach方法

Question

这里我有四个输入按钮，我想为每个输入按钮添加事件处理程序。如果我使用 for 循环，我必须处理闭包。实际上，我想了解如何管理像对象这样的数组的 forEach 方法。这是我能管理的最接近的解决方案。因为如果我们想使用数组方法，我们必须遇到与闭包相关的问题。我不得不使用 object.keys 来获取索引并在它们上应用 forEach。虽然听起来很奇怪，但我不太了解对这个解决方案感到满意。它可以更简单吗？我如何直接在存储在 Buttons 变量中的 nodeList 上管理 forEach

function change(){
    var buttons=document.getElementsByTagName('input');
    var keys=Object.keys(buttons);

    keys.forEach(function(el,indx,arr){
        if(el != 'length'){
            this[el].addEventListener('click', function(e){ 
                alert(e.target.value);
            });
        }
    }, buttons);
}

change();

<input type='button' value='button1'> 
<input type='button' value='button2'> 
<input type='button' value='button3'> 
<input type='button' value='button4'> 

Answer 1

document.getElementsByTagName 返回一个“宿主对象”。这些对象在浏览器之间的行为可能不同。

buttons 是一个 NodeList ，不是数组。 Object.keys 在这里可能无法按预期工作，因为它可能具有 更多 属性，而不仅仅是索引和 length。

NodeList ( https://developer.mozilla.org/en-US/docs/Web/API/NodeList) 的文档有一些将其转换为数组的示例，以及如何将其与 .forEach 一起使用。

我通常使用的方法没有列在文档页面上。我通常使用:

var arr = Array.prototype.slice.call(buttons);

_{查看此问题以获取更多信息:Fastest way to convert JavaScript NodeList to Array?}

然后你可以这样做:

arr.forEach(function(el){
    el.addEventListener('click', function(e){ 
        alert(e.target.value);
    });
});

这是一个演示:

var buttons = document.getElementsByTagName('input');
var arr = Array.prototype.slice.call(buttons);
arr.forEach(function(el) {
  el.addEventListener('click', function(e) {
    alert(e.target.value);
  });
});

<input type='button' value='button1'>
<input type='button' value='button2'>
<input type='button' value='button3'>
<input type='button' value='button4'>