如何使用「每個jquery」或「javascript中的每個」在JavaScript對象內顯示數組項目

Question

這是我的代碼。

var myOwnObject = { 
 
    car1: 'Toyota', 
 
    car2: 'Honda', 
 
    car3: 'BMW', 
 
    car4: ['Subaru', 'Nissan', 'Lambo', 'Jaguar'] 
 
}; 
 

 
console.log("1. " + myOwnObject.car1 + ", 2. " + myOwnObject.car2 + ", 3. " + myOwnObject.car3 + " , 4. " + myOwnObject.car4[0] + myOwnObject.car4[1]);

我想實現的是，我想顯示特別是在陣列部分中的所有值，而不會由一個叫陣列之一。

謝謝。

Answer 1

我很確定你正在尋找的代碼是關於如何動態地向頁面顯示這些信息（而不必手動打印1，2等）。這裏有一個辦法做到這一點：

<ol id="sampleSection"></ol> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script> 

var myOwnObject = { car1: 'Toyota', car2: 'Honda', car3: 'BMW', car4: ['Subaru', 'Nissan', 'Lambo', 'Jaguar'] }; 

$.each(myOwnObject, function (index, item) { 
    $("<li>") 
     .html(item) 
     .appendTo($("#sampleSection")); 
}); 

</script> 

Answer 2

var myOwnObject = { 
 
    car1: 'Toyota', 
 
    car2: 'Honda', 
 
    car3: 'BMW', 
 
    car4: ['Subaru', 'Nissan', 'Lambo', 'Jaguar'] 
 
}; 
 

 
var array = $.map(myOwnObject, function(val) { 
 
    return [val]; 
 
}); 
 

 
console.log(array.map(function(val, idx) { 
 
    return (idx + 1) + '. ' + (Array.isArray(val) ? val.join(' ') : val); 
 
}).join(', '));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Answer 3

在普通的JavaScript，你可以用Object.keys拿到鑰匙，並與Array#forEach遍歷數組，並檢查屬性是一個數組，然後加入數組，否則取值爲輸出。

var myOwnObject = { car1: 'Toyota', car2: 'Honda', car3: 'BMW', car4: ['Subaru', 'Nissan', 'Lambo', 'Jaguar'] }; 
 

 
Object.keys(myOwnObject).forEach(function (k) { 
 
    if (Array.isArray(myOwnObject[k])) { 
 
     console.log(k + ': ' + myOwnObject[k].join(', ')); 
 
    } else { 
 
     console.log(k + ': ' + myOwnObject[k]); 
 
    } 
 
});

Answer 4

可能達到你想要的結果，最簡單的方法是創建一個幫手扁平化您的數據。

給你一個例子：

function parser(object){ 
    let results = []; 
    for(let let in object){ 
     let item = object[key]; 

     if(item instanceof Array){ 
      item.forEach((el) => { results.push(item)}) 
     } 
     else 
      results.push(item) 
    } 

    return results 
} 

有了自己的品牌，新的數組，你可以做任何事情，如

let res = parser(object); 
let output = ''; 

res.forEach((item, index) => { 
    output = output + index + ". " + item; 
}) 

console.log(output); 

Answer 5

在NFN尼爾的解決方案，他利用的事實，當陣列被添加到一個字符串中，他們首先被轉換成一個字符串，使用他們的內置方法toString()。

由於您的對象具有不同類型（字符串和數組）的成員，因此此方法運行良好。但是，如果你想對如何連接您的陣列更多的控制，那麼你將要投入多一點的工作：

<ol id="sampleSection"></ol> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script> 

var myOwnObject = { car1: 'Toyota', car2: 'Honda', car3: 'BMW', car4: ['Subaru', 'Nissan', 'Lambo', 'Jaguar'] }; 

$.each(myOwnObject, function (index, item) { 
    $("<li>") 
     .html($.isArray(item) 
      ?item.join('<your separator>') // arrays 
      :item)       // strings 
     .appendTo($("#sampleSection")); 
}); 
</script> 

取而代之的是item.join()功能，你可以做一個item.map(function(itm,idx){return idx+'. '+itm;} -construct用的可能性編織在每個元素的索引位置。