如何遍历包含对象的数组并访问它们的属性

Question

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

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

console.log(myArray[j]);

}

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

无论如何，这是下一个问题。如何使用循环访问，例如数组中的 Object1.x？

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

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

}

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

有人建议我在其他地方为每个属性使用单独的数组，但我想确保我首先用尽了这条途径。

谢谢！

原文由 FlyingLizard 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 forEach 它的内置数组函数。 Array.forEach() ：

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

原文由 Dory Zidon 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在 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);

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);

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

参考

• 数组.prototype.some()
• 数组.prototype.forEach()
• 数组.prototype.map()
• 数组.prototype.filter()
• 数组.prototype.sort()
• 传播语法
• 数组.prototype.find()

原文由 Yuci 发布，翻译遵循 CC BY-SA 4.0 许可协议