如何從數組，JavaScript中列出的字典中打印鍵和值

Question

我在使用double for循環從存儲在數組中的字典中打印數據時遇到困難

var residents = [{name: "Pyrus", room: "32"},{name: "Ash Ketchum", room: "22"}];

function people() {
    for (let i = 0; i < residents.length; i++) {
        for (let j in residents[i]) {
            document.write(j + ": " + residents[j] + "<br>");
        }
    }
};

people();

我正在檢索的是：

name: undefined 
room: undefined
name: undefined
room: undefined

我可以打印密鑰，但似乎無法獲取為密鑰定義的值！ 我究竟做錯了什么？

成功的標准是使用HTML打印。

Answer 1

您將兩個循環鏈接在一起，因此您的函數需要訪問父索引，然后訪問要引用的屬性。

function people() {
    for (let i = 0; i < residents.length; i++) {
        for (let j in residents[i]) {
            document.write(j + ": " + residents[i][j] + "<br>");
        }
    }
};

Answer 2

為什么不使用forEach（）這樣嘗試

 var residents = [{ name: "Pyrus", room: "32" }, { name: "Ash Ketchum", room: "22" }]; function people(residents) { residents.forEach((element) => { for (var key in element) { if (element.hasOwnProperty(key)) { console.log(key + ':' + element[key]); } } }); }; people(residents); 

Answer 3

這是我認為的最簡單方法（使用foreach() ）：

 var residents = [{name: "Pyrus", room: "32"},{name: "Ash Ketchum", room: "22"}]; function people() { residents.forEach(function(resident) { document.write(resident.name + ": " + resident.room + "<br>"); }); } people(); 

Answer 4

您可以避免使用某些for循環，並使用forEach和Object.entries使代碼更易於閱讀：

 var residents = [{name: "Pyrus", room: "32"},{name: "Ash Ketchum", room: "22"}]; residents.forEach(res => { Object.entries(res).forEach(([key, value]) => { console.log(key + ": " + value ); //subing console.log so it prints here //document.write(key + ": " + value + "<br>"); }) }) 

Answer 5

您需要訪問residents[i][j]因為您首先要迭代居民。

所以你的代碼變成：

document.write(j + ": " + residents[i][j] + "<br>");

看到這個工作的js小提琴

您也可以這樣寫：

function people(){
    residents.forEach(r => {
        for(let j in r){
          document.write(j + ": " + r[j] + "<br>");
      }
    })
}

希望這可以幫助。

Answer 6

使用常規的for循環將類似於以下代碼。 另外，我強烈建議您檢查所有屬性（ j ）是否都是自己的屬性（具有hasOwnProperty ），否則將在原型鏈中查找。 如果將對象動態添加到陣列中，則可能會出現問題，否則可以繞過此檢查。

 var residents = [{name:"Pyrus",room:"32"},{name: "Ash Ketchum",room:"22"}]; function people() { for (let i = 0; i < residents.length; i++) { for (let j in residents[i]) { if (residents[i].hasOwnProperty(j)) { // <-- check if it is an own property! document.write(j + ": " + residents[i][j] + "<br>"); //first access the object in residents[i], for example {name: "Pyrus",room: "32"}, then to its properties-values with residents[i][j] } } } }; people();