在 javascript 中的对象数组上应用 forEach 方法

Question

这里我有四个输入按钮，我想为每个 them.If 添加事件处理程序我使用 for 循环我必须处理 closures.Actually 我正在尝试了解如何管理 forEach 方法对于像 object.This 这样的数组是我能做到的最接近的解决方案 manage.As 如果我们想使用数组 methods.I 我们必须遇到与闭包相关的问题必须使用 object.keys 来获取索引和在 them.Though 上应用 forEach 听起来很奇怪，但我对此并不满意 solution.Can 它更简单？我如何直接在存储在 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.getElementsByTagNamereturns你一个"host object"。这些对象在浏览器之间的行为可能不同。

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'>

Answer 2

ES6解决方案

ES6 Array.from方法可以将类数组对象转换为数组:

    var buttons = document.getElementsByTagName('input');

    Array.from(buttons).forEach(el=>{
      el.addEventListener('click', 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'>

在 javascript 中的对象数组上应用 forEach 方法

apply forEach method on array like objects in javascript

javascript

arrays

foreach

nodelist