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迭代此数组，并检查该属性是否为数组，然后加入数组，否则获取输出值。 / p>

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;} - 构造，可以在每个元素的索引位置编织。

如何使用“jquery中的每个”或“javascript中的每个”在JavaScript对象中显示数组项

5 个答案: