关于javascript：如何遍历包含对象的数组并访问其属性


How to loop through an array containing objects and access their properties

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

1
2
3
4
5
for (var j = 0; j < myArray.length; j++){

console.log(myArray[j]);

}

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

不管怎样，这是下一个问题。如何使用循环访问，例如数组中的object1.x？

1
2
3
4
5
for (var j = 0; j < myArray.length; j++){

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

}

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

我被推荐到其他地方为每个属性使用单独的数组，但我想确保我已经耗尽了这条路。

谢谢您！

相关讨论

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

1
2
3
4
yourArray.forEach(function (arrayItem) {
    var x = arrayItem.prop1 + 2;
    console.log(x);
});
相关讨论

在javascript中，以函数式编程方式在数组中循环的一些用例：

1。只需在数组中循环

1
2
3
4
5
6
7
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。检查数组中的任何元素是否通过测试

1
2
3
4
5
6
7
8
9
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

三。转换为新数组

1
2
3
4
const myArray = [{x:100}, {x:200}, {x:300}];

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

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

4。对一个特定属性求和，并计算其平均值

1
2
3
4
5
6
7
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。基于原始数组创建新数组，但不修改它

1
2
3
4
5
6
7
8
9
10
11
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。计算每个类别的数量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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。基于特定条件检索数组的子集

1
2
3
4
const myArray = [{x:100}, {x:200}, {x:300}];

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

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

8。排序数组

1
2
3
4
5
6
7
8
9
10
11
12
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。在数组中查找元素

1
2
3
4
5
6
7
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

方法的作用是：返回数组中满足所提供测试函数的第一个元素的值。

工具书类

  • array.prototype.some()。
  • array.prototype.foreach()。
  • array.prototype.map()。
  • array.prototype.filter()。
  • array.prototype.sort()。
  • 扩展句法
  • array.prototype.find()。
相关讨论

在EcmaScript 2015中，也就是ES6，您可以使用for..of循环来循环一组对象。

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

在发布这个答案时，对Internet Explorer的支持是不存在的，但是通过使用像tracer或babel这样的蒸腾器，您可以使用像这样的新JavaScript功能，而不必担心浏览器支持什么。

1
2
3
for (var j = 0; j < myArray.length; j++){
  console.log(myArray[j].x);
}
相关讨论

下面是一个关于如何做到这一点的示例：)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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])
  }
}

相关讨论

循环遍历对象数组是非常基本的功能。这就是我的工作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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] +"");
  }
}

myArray[j.x]逻辑错误。

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

1
2
3
for (var j = 0; j < myArray.length; j++){
  console.log(myArray[j].x);
}
相关讨论

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

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

如果要访问每个对象的特定属性：

4

这是可行的。循环整个数组(您的rarray)。然后循环遍历每个对象的直接属性(eachobj)。

1
2
3
4
5
6
7
yourArray.forEach( function (eachObj){
    for (var key in eachObj) {
        if (eachObj.hasOwnProperty(key)){
           console.log(key,eachObj[key]);
        }
    }
});

这里是遍历对象数组的另一种方法(您需要在文档中包含这些对象的jquery库)。

1
2
3
$.each(array, function(element) {
  // do some operations with each element...
});
相关讨论

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

1
2
3
$.each(array, function(index, item) {
       console.log(index, item);
});

接受的答案使用正常功能。所以在foreach上使用arrow函数略微修改后发布相同的代码

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

也可以是美元，每个都可以使用箭头函数，如下所示

1
2
3
 $.each(array, (item, index) => {
       console.log(index, item);
 });

1
2
3
4
5
6
7
8
9
10
11
12
13
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);
})

这是我实现它的方法之一。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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;

小心后面的滴答声(`)