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


184

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

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

建议我在其他地方为每个属性使用单独的数组,但是我想确保首先使用此方法。

谢谢!


2
您可以张贴阵列样本吗?第一个代码段似乎正确。
锡尔科

j是一个数字。您在循环的顶部定义了它。

2
也许myArray不是真的只是数组吗?
techfoobar

我们需要有关如何构造myArray的更多信息
bgusach 2013年

在回答以下所有问题并获得公认的回答后,没有人解释为什么会发生问题以及如何使用for循环解决问题。#forEach作品。但是问题是关于循环。
FreeLightman '18

Answers:


338

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

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

2
很高兴help..Javascript正在成为相当cool..plus在foreach是如此美好,更容易阅读复杂的循环..
多莉西顿

3
恐怕forEachIE 9不支持它。不要怪我!我的雇主的产品对此提供了支持!
fatCop

1
@DoryZidon:的forEach不支持断点或停止- developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...
ANKUR Loriya

2
请注意,确实要有一个数组很重要。如果您yourArray从类似的东西得到的document.getElementsByClassName将是HTMLCollection,而不是数组。那么这个问题可能会有所帮助。
J0ANMM

注意:forEach正在阻止并且不支持awaitfor...of循环将会。
PotatoFarmer

102

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

参考文献


1
这是一个很棒的参考-是这个问题的原始版本,还是您在其他地方托管了类似的内容?
Salvatore18年

很好的解释和详尽的答案,谢谢您的贡献。
艾里卡·萨默斯

嗨,如果我想显示所有名称然后进行比较,您知道怎么做吗?
dipgirl

@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);
尤奇

1
祝贺第100票:)
Syed

44

您可以使用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..ofJava进行的几乎所有迭代都使用循环。此外,最酷的事情之一是它们也可以与异步/等待一起使用。



18

这是一个有关如何执行此操作的示例:)

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每个元素的属性值并将其分配给变量以在代码的另一部分使用或插入?
克里斯22年

7

遍历对象数组是一项非常基本的功能。这对我有用。

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


6

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

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

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

@ Cyborgx37哦..我的意思是jx被视为不正确的变量名。
Vivek Sadh

5

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

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

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

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

4

这是迭代对象数组的另一种方法(您需要在文档中包括jQuery库)。

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

1
您的答案缺少有关需要加载jQuery库以使用$.each方法的关键信息。
马修·莫瑞克

4

这会起作用。循环遍历array(yourArray)。然后循环遍历每个对象的直接属性(eachObj)。

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

2

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

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

2

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

接受的答案使用正常功能。因此,使用forEach上的箭头功能稍加修改即可发布相同的代码

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

同样在$ .each中,您可以使用如下箭头功能

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

1

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;

注意后壁cks虫(`)


0

这可能对某人有帮助。也许这是Node中的错误。

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.