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