关联数组对象上的 JavaScript foreach 循环

javascript arrays foreach

2022-08-30 01:09:58

为什么我的 for-each 循环不迭代我的 JavaScript 关联数组对象？

// Defining an array
var array = [];

// Assigning values to corresponding keys
array["Main"] = "Main page";
array["Guide"] = "Guide page";
array["Articles"] = "Articles page";
array["Forum"] = "Forum board";

// Expected: loop over every item,
// yet it logs only "last" assigned value - "Forum"
for (var i = 0; i < array.length; i++) {
    console.log(array[i]);
}

jQuery可能会有所帮助：https://api.jquery.com/jQuery.each/each()

答案 1

该属性仅跟踪具有数字索引（键）的属性。您正在使用字符串作为键。.length

您可以执行以下操作：

var arr_jq_TabContents = {}; // no need for an array

arr_jq_TabContents["Main"] = jq_TabContents_Main;
arr_jq_TabContents["Guide"] = jq_TabContents_Guide;
arr_jq_TabContents["Articles"] = jq_TabContents_Articles;
arr_jq_TabContents["Forum"] = jq_TabContents_Forum;

for (var key in arr_jq_TabContents) {
    console.log(arr_jq_TabContents[key]);
}

为了安全起见，最好在这样的循环中确保没有一个属性是继承的意外结果：

for (var key in arr_jq_TabContents) {
  if (arr_jq_TabContents.hasOwnProperty(key))
    console.log(arr_jq_TabContents[key]);
}

edit - 现在注意该功能在现代浏览器和Node等中可用可能是一个好主意。该函数以数组的形式返回对象的“own”键：Object.keys()

Object.keys(arr_jq_TabContents).forEach(function(key, index) {
  console.log(this[key]);
}, arr_jq_TabContents);

传递给的回调函数由返回的数组中的每个键和键的索引一起调用。它还传递了函数迭代的数组，但该数组对我们并不真正有用;我们需要原始对象。这可以直接通过名称访问，但是（在我看来）显式传递它更好一些，这是通过将第二个参数传递给原始对象来完成的，该参数将绑定为回调内部。（刚刚看到在下面的评论中注意到了这一点。.forEach()Object.keys().forEach()this

答案 2

这是非常简单的方法。优点是您也可以获得密钥：

for (var key in array) {
    var value = array[key];
    console.log(key, value);
}

对于 ES6：

array.forEach(value => {
  console.log(value)
})

对于 ES6（如果需要值、索引和数组本身）：

array.forEach((value, index, self) => {
  console.log(value, index, self)
})