在 JavaScript 中迭代对象数组

Question

我有一个包含了键值对的对象数组，如何迭代每个对象中的caste和id属性。

[
    Object {
        caste = "Banda",
        id = 4
    },
    Object {
        caste = "Bestha", 
        id = 6
    }
]

- sasi

---

遍历对象数组？遍历对象字段？还是两者都要？ - Salvatorelab

迭代对象数组.. - sasi

Answer 1

使用jQuery.each()：

var array = [
   {caste: "Banda", id: 4},
   {caste: "Bestha", id: 6}
];
    
$.each(array, function( key, value ) {
  console.log('caste: ' + value.caste + ' | id: ' +value.id);
}

);

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

- RRikesh

---

怎么样？我不明白你的意思。 - RRikesh

对于第一次迭代，它给了我“banda”和4；对于第二次迭代，它再次给了我“banda”和4，“bestha”和6等等。 - sasi

正如TheBronx所说请参见他的答案，这只是一个数组。由于该解决方案使用本地JavaScript，如果您不想在项目中使用jQuery，那么它可能是更好的设计。 - Gustavo Carvalho

这个问题被标记为 jquery，我认为 OP 想要一个 jQuery 的答案。当然，使用原生 JS 会更快。 - RRikesh

Answer 2

示例代码：

var list = [
    { caste:"Banda",id:4},
    { caste:"Bestha",id:6},
];
    
for (var i=0; i<list.length; i++) {
    console.log(list[i].caste);
}

这只是一个数组，所以像往常一样迭代它。

- Salvatorelab

Answer 3

在纯JavaScript中，你可以这样做：

var array = [{caste: "Banda", id: 4}, {caste: "Bestha", id:6}];

array.forEach(function(element, index) {
    console.log(element.id+" "+element.caste);
});

回调函数被调用时带有第三个参数，即正在遍历的数组。 要了解 更多 信息！ 因此，您不需要加载jQuery库。 问候。

- jortsc

Answer 4

箭头函数现在非常流行

使用带有箭头函数的jquery $.each

 var array = [
    {caste: "Banda", id: 4},
    {caste: "Bestha", id: 6}
 ];

 $.each(array, ( key, value ) => {
     console.log('caste: ' + value.caste + ' | id: ' +value.id);
 });

使用箭头函数和forEach方法

  array.forEach((item, index) => {
      console.log('caste: ' + item.caste + ' | id: ' +item.id);
  });

使用箭头函数的map方法。在这里，map方法返回一个新数组。

  array.map((item, index) => {
      console.log('caste: ' + item.caste + ' | id: ' +item.id);
  });

- Hemadri Dasari

Answer 5

var array = [{caste: "Banda", id: 4}, {caste: "Bestha", id:6}];
var length = array.length;
for (var i = 0; i < length; i++) {
   var obj = array[i];
   var id = obj.id;
   var caste = obj.caste;
}

- package

Answer 6

forEach循环接受一个迭代函数和一个可选值作为“this”，用于在调用该迭代函数时使用。

 var donuts = [
    { type: "Jelly", cost: 1.22 },
    { type: "Chocolate", cost: 2.45 },
    { type: "Cider", cost: 1.59 },
    { type: "Boston Cream", cost: 5.99 }
];

donuts.forEach(function(theDonut, index) {
    console.log(theDonut.type + " donuts cost $"+ theDonut.cost+ " each");
});

接下来，它也可以被分解为这个：

var donuts = [
  { type: "Jelly", cost: 1.22 },
  { type: "Chocolate", cost: 2.45 },
  { type: "Cider", cost: 1.59 },
  { type: "Boston Cream", cost: 5.99 }
];


function ShowResults(donuts) {  
    console.log(donuts.type + " donuts cost $"+ donuts.cost+ " each");  
}

donuts.forEach(ShowResults);

- Mukkul Jayhne

Answer 7

您可以使用jQuery遍历所有对象，jQuery希望您填写回调函数，jQuery将回调该函数。第一个输入参数将被赋予键，第二个输入参数将被赋予值：

$.each(dataList, function(index, object) {
   $.each(object,function(attribute, value){
      alert(attribute+': '+value);
   });
});

文档：http://api.jquery.com/jQuery.each/

- Joel Harkes

---

第四行应该是});。 - Seralto

Answer 8

使用jQuery.each：

$.each([your array of objects], function(index, value) {
  // Do what you need, for example...
  alert(index + ': ' + value);
});

- Alepac

Answer 9

在jQuery中遍历填充有内容的数组，请使用$.each，要遍历对象以获取其属性，请使用for..in

- LionC