JavaScript 关联数组上的 foreach 循环 object

Question

为什么我的 for-each 循环没有遍历我的 JavaScript 关联数组 object？

// 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 each()可能会有帮助： https://api.jquery.com/jQuery.each/

Answer 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]);
}

编辑——现在注意到Object.keys()函数在现代浏览器和 Node 等中可用可能是个好主意。该函数返回对象的“自己的”键，作为数组：

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

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

Answer 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)
})

Answer 3

如果 Node.js 或浏览器支持Object.entries() ，它可以用作使用Object.keys()的替代方法（ Pointy 的回答）。

 const h = { a: 1, b: 2 }; Object.entries(h).forEach(([key, value]) => console.log(value)); // logs 1, 2

在此示例中， forEach使用数组的解构赋值。

Answer 4

已经有一些简单的示例，但我从您对问题的措辞中注意到，您可能来自 PHP 背景，并且您期望 JavaScript 以相同的方式工作 - 事实并非如此。 PHP array与 JavaScript Array非常不同。

在 PHP 中，关联数组可以完成数字索引数组的array_*功能（ array_*函数可以工作，您可以对其进行count()等）。 您只需创建一个数组并开始分配给字符串索引而不是数字。

在 JavaScript 中，一切都是对象（原始类型除外：字符串、数字、布尔值），数组是一种特定的实现，可以让您拥有数字索引。 任何推送到数组的东西都会影响它的length ，并且可以使用 Array 方法（ map 、 forEach 、 reduce 、 filter 、 find等）进行迭代。但是，因为一切都是一个对象，所以你总是可以自由地简单地分配属性，因为这是你对任何对象所做的事情。 方括号表示法只是访问属性的另一种方式，因此在您的情况下：

array['Main'] = 'Main Page';

实际上相当于：

array.Main = 'Main Page';

根据您的描述，我的猜测是您想要一个“关联数组”，但对于 JavaScript，这是使用对象作为哈希图的简单情况。 另外，我知道这是一个例子，但避免只描述变量类型（例如array ）的无意义名称，以及基于它应该包含的内容（例如pages ）的名称。 简单的对象没有很多好的直接迭代方法，所以我们通常会首先使用Object方法（在本例中为Object.keys —— 现在还有entries和values被添加到某些浏览器中），我们将首先将其转换为数组。可以循环。

// Assigning values to corresponding keys
const pages = {
  Main: 'Main page',
  Guide: 'Guide page',
  Articles: 'Articles page',
  Forum: 'Forum board',
};

Object.keys(pages).forEach((page) => console.log(page));

Answer 5

arr_jq_TabContents[key]将数组视为 0 索引形式。

Answer 6

这是使用关联数组作为通用对象类型的简单方法：

 Object.prototype.forEach = function(cb){ if(this instanceof Array) return this.forEach(cb); let self = this; Object.getOwnPropertyNames(this).forEach( (k)=>{ cb.call(self, self[k], k); } ); }; Object({a:1,b:2,c:3}).forEach((value, key)=>{ console.log(`key/value pair: ${key}/${value}`); });

Answer 7

在大多数情况下，这（基本上）是不正确的：

var array = [];
array["Main"] = "Main page";

这会在名为Main的数组上创建一个非元素属性。 尽管数组是对象，但通常您不想在它们上创建非元素属性。

如果array这些名称索引array ，通常会使用Map或普通对象，而不是数组。

使用Map (ES2015+)，我将其称为map因为我很有创意：

let map = new Map();
map.set("Main", "Main page");

然后使用它的values 、 keys或entries方法中的迭代器对其进行迭代，例如：

for (const value of map.values()) {
    // Here, `value` will be `"Main page"`, etc.
}

使用一个普通对象，我创造性地将其称为obj ：

let obj = Object.create(null); // Creates an object with no prototype
obj.Main = "Main page"; // Or: `obj["Main"] = "Main page";`

然后您将使用Object.keys 、 Object.values或Object.entries迭代其内容，例如：

for (const value of Object.values(proches_X)) {
    // Here, `value` will be `"Main page"`, etc.
}

Answer 8

似乎几乎每个答案都不是最初提出的问题。

foreach-loop 不起作用似乎有点不对劲。 并且简单的 for 循环将无法正常工作，因为在关联数组（后备之一）的情况下，长度属性将为零。 但是 for-in 为关联数组做事

 // 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 index in array) { console.log(index,array[index]); }

Answer 9

 var obj = { no: ["no", 32], nt: ["no", 32], nf: ["no", 32, 90] }; count = -1; // Which must be a static value for (i in obj) { count++; if (obj.hasOwnProperty(i)) { console.log(obj[i][count]) }; };

在这段代码中，我使用括号方法调用数组中的值，因为它包含一个数组。 然而，简单地说，变量i有一个属性键和一个循环，称为关联数组的两个值。

这是完美的方法。

Answer 10

你可以这样做：

var array = [];

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


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

 

Answer 11

使用数字键。 Array上的length仅跟踪数字键。 将Object或Map用作键值对。

var array = [];

// assigning values to corresponding keys
array[0] = "Main page";
array[1] = "Guide page";
array[2] = "Articles page";
array[3] = "Forum board";

for (var i = 0; i < array.length; i++) {
    console.log(i); //0 1 2 3
    //OR:
    console.log(array[i]);
}