如何使用“ 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 neil的解决方案中，他利用了以下事实：将数组“添加”到字符串时，它们会先使用其内置方法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;}具有在每个元素的索引位置进行编织的可能性。