如何使用 jQuery 或 JavaScript 循环遍历数组？答案

【问题标题】：How to loop through an array of arrays using jQuery or JavaScript?如何使用 jQuery 或 JavaScript 循环遍历数组？
【发布时间】：2017-11-14 17:41:42
【问题描述】：

我有一个这样的 json 数组

var data = key: [
    {
        arr1: [
            {value: 1},
            {value: 2},
            {value: 3},
        ]
    },
    {
        arr2: [
            {value: 1},
            {value: 2},
            {value: 3},
        ]
    },
    {
        arr3: [
            {value: 1},
            {value: 2},
            {value: 3},
        ]
    }
]

我想循环遍历key 3 次，在关键循环中我想再次循环遍历key 中的每个元素。

首先我尝试了$.each，它适用于键数组。在每个函数中，我尝试在返回名称的循环中使用 Object.key(this) 获取键值

arr1, arr2, arr3

但我无法遍历我得到的名字。

$.each(data, function(i, e) {
    Object.keys(this).each(function(index, element) {
        console.log(element);
    })    
})

我不知道这是否是正确的做法，当我尝试这样做时。我收到一条错误消息，告诉 .each 不是函数。

任何帮助将不胜感激。

【问题讨论】：

因为数组没有each方法....数组有forEach...
这样的东西适合你吗？ stackoverflow.com/questions/7106410/…
如果你真的喜欢 jQuery，试试$(Object.keys(this)).each( ... )。
第一行的key: 是什么？定义您的对象的代码不是有效的 JavaScript。

标签： javascript jquery html json

【解决方案1】：

执行此操作的简单方法是使用三个循环，但尝试通过 this 在每个循环中赋予新含义来使其工作会变得不必要地复杂。

我建议使用.forEach 并为每个循环变量指定一个清晰的名称：

var data =  [
    {
        arr1: [
            {value: 1},
            {value: 2},
            {value: 3},
        ]
    },
    {
        arr2: [
            {value: 1},
            {value: 2},
            {value: 3},
        ]
    },
    {
        arr3: [
            {value: 1},
            {value: 2},
            {value: 3},
        ]
    }
]

data.forEach(function (outerObj) {
  Object.keys(outerObj).forEach(function (key) {
    outerObj[key].forEach(function (item) {
      console.log(item);
    });
  });
});

当然，如果你真的告诉我们你想用这些循环完成什么，可能会有更好的解决方案。

【讨论】：

【解决方案2】：

如果您想保持 jQuery 模式，那么只需继续为每个嵌套级别使用 each：

var data = [{arr1: [{value: 1}, {value: 2}, {value: 3}]}, {arr2: [{value: 1}, {value: 2}, {value: 3}]}, {arr3: [{value: 1}, {value: 2}, {value: 3}]}];

$.each(data, function(i, e) {
    $.each(e, function(key, arr) {
        console.log(key);
        $.each(arr, function(index, obj) {
            console.log("...", index, obj.value);
        });
    });
})

.as-console-wrapper { max-height: 100% !important; top: 0; }

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

当我尝试将e 传递给$.each 时，它不起作用。所以我切换到this.each，但效果不佳。但在你的回答中它有效。 +1

【解决方案3】：

我相信您的尝试不起作用的原因是因为您试图 .each 单个值本身，而不是 data 中的数组。

这应该可行：

$.each(data, function(index, array) { // This each iterates over the arrays.
  $.each(array, function(subindex, value) { // This each iterates over the individual values.
    console.log(value); // Logs the individual values.
  });
});

【讨论】：