如何循环通过包含对象的数组和访问他们的属性

我想循环遍历数组中包含的对象，并更改每个对象的属性。如果我这样做:

for (var j = 0; j < myArray.length; j++){


console.log(myArray[j]);


}

控制台应该显示数组中的每个对象，对吧?但实际上它只显示第一个对象。如果我在循环外对数组进行console日志记录，所有的对象都会出现，所以里面肯定有更多的对象。

不管怎样，这是下一个问题。我如何访问，例如Object1。X在数组中，使用循环?

for (var j = 0; j < myArray.length; j++){


console.log(myArray[j.x]);


}

这将返回“undefined”。循环外的控制台日志再次告诉我，所有对象都有“x”的值。如何在循环中访问这些属性?

其他地方建议我为每个属性使用单独的数组，但我想先确保我已经用尽了这个方法。

谢谢你！

833759 次浏览
小开
最佳答案

forEach是一个内置的数组函数。Array.forEach():

yourArray.forEach(function (arrayItem) {
var x = arrayItem.prop1 + 2;
console.log(x);
});
小开 
for (var j = 0; j < myArray.length; j++){
console.log(myArray[j].x);
}
小开

myArray[j.x]逻辑上不正确。

使用(myArray[j].x);代替

for (var j = 0; j < myArray.length; j++){
console.log(myArray[j].x);
}
小开

从ES5+开始使用forEach方法真的很简单。您可以直接更改数组中每个对象的每个属性。

myArray.forEach(function (arrayElem){
arrayElem = newPropertyValue;
});

如果你想访问每个对象的特定属性:

myArray.forEach(function (arrayElem){
arrayElem.nameOfYourProperty = newPropertyValue;
});
小开

你可以使用循环的. .来循环遍历一个对象数组。

for (let item of items) {
console.log(item); // Will display contents of the object inside the array
}

for..of循环最好的事情之一是，它们可以迭代不止数组。您可以遍历任何类型的可迭代对象，包括映射和对象。如果你需要支持旧的浏览器，请确保你使用了一个transpiler或类似TypeScript的东西。

如果要遍历映射，其语法与上面的基本相同，只是它同时处理键和值。

for (const [key, value] of items) {
console.log(value);
}

我在Javascript中使用for..of循环进行几乎所有类型的迭代。此外，最酷的事情之一是它们也可以与async/await一起工作。

小开

下面是另一种遍历对象数组的方法(您需要在文档中包含jQuery库)。

$.each(array, function(element) {
// do some operations with each element...
});
小开

遍历对象数组是一个非常基本的功能。这对我来说很有效。

var person = [];
person[0] = {
firstName: "John",
lastName: "Doe",
age: 60
};


var i, item;


for (i = 0; i < person.length; i++) {
for (item in person[i]) {
document.write(item + ": " + person[i][item] + "<br>");
}
}

小开

这里有一个例子，告诉你如何做到这一点:)

var students = [{
name: "Mike",
track: "track-a",
achievements: 23,
points: 400,
},
{
name: "james",
track: "track-a",
achievements: 2,
points: 21,
},
]


students.forEach(myFunction);


function myFunction(item, index) {
for (var key in item) {
console.log(item[key])
}
}

小开

这是可行的。循环彻底的数组(yourArray)。然后循环遍历每个对象(eachObj)的直接属性。

yourArray.forEach( function (eachObj){
for (var key in eachObj) {
if (eachObj.hasOwnProperty(key)){
console.log(key,eachObj[key]);
}
}
});
小开

数组对象迭代，使用jQuery， (使用第二个参数打印字符串) 

$.each(array, function(index, item) {
console.log(index, item);
});
小开

在JavaScript中循环函数式编程方式中的数组的一些用例:

1. 只需要循环一个数组

const myArray = [{x:100}, {x:200}, {x:300}];


myArray.forEach((element, index, array) => {
console.log(element.x); // 100, 200, 300
console.log(index); // 0, 1, 2
console.log(array); // same myArray object 3 times
});

注意:Array.prototype.forEach()严格来说不是一个函数方式，因为它作为输入参数的函数不应该返回一个值，因此不能被视为一个纯函数。

2. 检查数组中是否有元素通过测试

const people = [
{name: 'John', age: 23},
{name: 'Andrew', age: 3},
{name: 'Peter', age: 8},
{name: 'Hanna', age: 14},
{name: 'Adam', age: 37}];


const anyAdult = people.some(person => person.age >= 18);
console.log(anyAdult); // true

3.转换为一个新数组

const myArray = [{x:100}, {x:200}, {x:300}];


const newArray= myArray.map(element => element.x);
console.log(newArray); // [100, 200, 300]

注意:map()方法创建一个新数组，其中包含对调用数组中的每个元素调用所提供函数的结果。

4. 把一个特定的性质加起来，然后计算它的平均值

const myArray = [{x:100}, {x:200}, {x:300}];


const sum = myArray.map(element => element.x).reduce((a, b) => a + b, 0);
console.log(sum); // 600 = 0 + 100 + 200 + 300


const average = sum / myArray.length;
console.log(average); // 200

5. 在原始数组的基础上创建一个新数组，但不修改它

const myArray = [{x:100}, {x:200}, {x:300}];


const newArray= myArray.map(element => {
return {
...element,
x: element.x * 2
};
});


console.log(myArray); // [100, 200, 300]
console.log(newArray); // [200, 400, 600]

6. 数一下每个类别的数量

const people = [
{name: 'John', group: 'A'},
{name: 'Andrew', group: 'C'},
{name: 'Peter', group: 'A'},
{name: 'James', group: 'B'},
{name: 'Hanna', group: 'A'},
{name: 'Adam', group: 'B'}];


const groupInfo = people.reduce((groups, person) => {
const {A = 0, B = 0, C = 0} = groups;
if (person.group === 'A') {
return {...groups, A: A + 1};
} else if (person.group === 'B') {
return {...groups, B: B + 1};
} else {
return {...groups, C: C + 1};
}
}, {});


console.log(groupInfo); // {A: 3, C: 1, B: 2}

7. 根据特定条件检索数组的子集

const myArray = [{x:100}, {x:200}, {x:300}];


const newArray = myArray.filter(element => element.x > 250);
console.log(newArray); // [{x:300}]

注意:filter()方法创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。

8. 对数组排序

const people = [
{ name: "John", age: 21 },
{ name: "Peter", age: 31 },
{ name: "Andrew", age: 29 },
{ name: "Thomas", age: 25 }
];


let sortByAge = people.sort(function (p1, p2) {
return p1.age - p2.age;
});


console.log(sortByAge);

enter image description here

9. 在数组中查找一个元素

const people = [ {name: "john", age:23},
{name: "john", age:43},
{name: "jim", age:101},
{name: "bob", age:67} ];


const john = people.find(person => person.name === 'john');
console.log(john);

enter image description here

find()方法返回数组中满足所提供测试函数的第一个元素的值。

参考文献

小开

公认的答案使用正常函数。因此，在forEach上发布相同的代码，并使用箭头函数进行轻微修改

  yourArray.forEach(arrayItem => {
var x = arrayItem.prop1 + 2;
console.log(x);
});

同样是美元。每个你可以使用箭头函数如下

 $.each(array, (item, index) => {
console.log(index, item);
});
小开 

const jobs = [
{
name: "sipher",
family: "sipherplus",
job: "Devops"
},
{
name: "john",
family: "Doe",
job: "Devops"
},
{
name: "jim",
family: "smith",
job: "Devops"
}
];


const txt =
` <ul>
${jobs.map(job => `<li>${job.name} ${job.family} -> ${job.job}</li>`).join('')}
</ul>`
;


document.body.innerHTML = txt;

小心后面的tick (')

小开 

var c = {
myProperty: [
{ name: 'this' },
{ name: 'can' },
{ name: 'get' },
{ name: 'crazy' }
]
};


c.myProperty.forEach(function(myProperty_element) {
var x = myProperty_element.name;
console.log('the name of the member is : ' + x);
})

这是我成功的方法之一。

小开

这可能会帮助到某些人。可能是Node中的bug。

var arr = [ { name: 'a' }, { name: 'b' }, { name: 'c' } ];
var c = 0;

这行不通:

while (arr[c].name) { c++; } // TypeError: Cannot read property 'name' of undefined

但这是可行的……

while (arr[c]) { c++; } // Inside the loop arr[c].name works as expected.

这也可以……

while ((arr[c]) && (arr[c].name)) { c++; }

但是简单地颠倒顺序是行不通的。我猜这里有某种内部优化破坏了Node。

while ((arr[c].name) && (arr[c])) { c++; }

错误提示数组未定义，但它不是:-/ Node v11.15.0

小开

我知道这已经很长了，但对于遇到这个问题的其他人来说，我的问题是我正在循环一个数组的数组只包含一个数组。是这样的:

// array snippet (returned from here)
} else {
callback([results])
}

我像这样使用数组

for(const result of results){
console.log(result.x)
}

如你所见，我要迭代的数组实际上在另一个数组中。去掉方括号有所帮助。Node JS和MySQL。

小开 
this.data = [{name:"Rajiv", city:"Deoria"},{name:"Babbi", city:"Salempr"},{name:"Brijesh", city:"GKP"}];
for(const n of this.data) {
console.log(n.name)
}
小开

我想同时循环和解构赋值，所以代码如下:config.map(({ text, callback })=>add_btn({ text, callback }))


提交答案