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

IT技术 javascript arrays iteration
2021-02-08 16:34:57

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

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”的值。如何在循环中访问这些属性?

我在其他地方被推荐为每个属性使用单独的数组,但我想确保我已经用尽了这条途径。

谢谢!

6个回答

使用 forEach 它是一个内置的数组函数。Array.forEach()

yourArray.forEach(function (arrayItem) {
    var x = arrayItem.prop1 + 2;
    console.log(x);
});
@DoryZidon:forEach 不支持中断或停止 - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...
2021-03-12 16:34:57
注意:forEach是阻塞的,不支持awaitfor...of循环会。
2021-04-03 16:34:57
请注意,您确实拥有一个数组很重要。如果你yourArray从类似的东西document.getElementsByClassName中得到一个 HTMLCollection,而不是一个数组。那么这个问题可能会有所帮助。
2021-04-04 16:34:57
救生员;谢谢@DoryZidon
2021-04-04 16:34:57

在 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() 方法返回数组中满足提供的测试函数的第一个元素的值。

参考

很好的解释和彻底的答案,感谢您的贡献。
2021-03-11 16:34:57
这是一个很棒的参考 - 这是这个问题的原创还是你在其他地方有这样的东西?
2021-03-20 16:34:57
您好,如果我想显示所有名称然后进行比较,您知道该怎么做吗?
2021-03-26 16:34:57
@dipgirl,像下面这样吗? const people = [ {name: "john", age:23}, {name: "john", age:43}, {name: "jim", age:101}, {name: "bob", age:67} ]; const sortByAge = people.map(p => { console.log(p.name) return p }).sort(function (p1, p2) { return p1.age - p2.age; }); console.log(sortByAge);
2021-03-26 16:34:57
所有用例都带有简单示例!我已在浏览器中将此添加为书签!我的第一个 StackOverflow 书签 :-)
2021-04-03 16:34:57

您可以使用for..of 循环遍历对象数组。

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

关于for..of循环的最好的事情之一是它们可以迭代的不仅仅是数组。您可以迭代任何类型的可迭代对象,包括地图和对象。如果您需要支持旧浏览器,请确保使用转译器或类似 TypeScript 的东西。

如果你想遍历一个映射,语法与上面大致相同,除了它同时处理键和值。

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

for..of在 Javascript 中所做的几乎每一种迭代都使用循环。此外,最酷的事情之一是它们也可以与 async/await 一起使用。

For..of循环绝对是最好的。我相信它比 forEach 循环快 90% 左右。
2021-03-14 16:34:57
我更喜欢在async函数中使用它await Promise.all(array.map(async (element) => {不是使用单独的try catch. 更干净的代码。
2021-04-09 16:34:57
for (var j = 0; j < myArray.length; j++){
  console.log(myArray[j].x);
}
不过,这只是第二个问题的解决方案。
2021-04-08 16:34:57

这是一个关于如何做到这一点的示例:)

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])
  }
}

您将如何获取track每个元素属性并将其分配给一个变量以在代码的另一部分使用或插入?
2021-03-26 16:34:57