如何通过含有对象的数组循环并访问他们的属性(How to loop through an array

2019-09-16 01:00发布

我想通过包含在数组中的对象周期和改变每一个的性质。 如果我这样做:

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

}

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

我建议在其他地方使用单独的阵列各性能的,但我要确保我首先用尽这一途径。

谢谢!

Answer 1:

使用的forEach其内置阵列功能。 Array.forEach()

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


Answer 2:

在2015年的ECMAScript又名ES6,您可以使用for..of循环遍历对象的数组。

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

在发布这个答案的时候,支持是非常不存在的Internet Explorer,但是通过使用像Traceur或通天一个transpiler的,你可以使用新的JavaScript功能,比如这个因为真的不必担心什么浏览器支持什么。



Answer 3:

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


Answer 4:

通过在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]

注意:图()方法创建与主叫呼叫阵列中的每个元件上的提供功能的结果的新的数组。

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

注意:滤波器()方法创建与通过由提供的功能实现的测试中所有元素的数组。

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

参考

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


Answer 5:

这里是你如何能做到这一点的例子:)

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



Answer 6:

myArray[jx]在逻辑上是不正确。

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

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


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



Answer 8:

它采用自ES5 +在foreach方法真的很简单。 您可以将每个对象的每个属性直接改变你的阵列英寸

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

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

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


Answer 9:

以下是通过对象(你需要包括你的文档,这些在jQuery库)的阵列迭代的另一种方式。

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


Answer 10:

这会工作。 循环彻底阵列(yourArray)。 然后通过每个对象(eachObj)的直接属性循环。

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


Answer 11:

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

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


Answer 12:

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

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

此外,在$。每次你可以使用箭头功能如下图所示

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


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

这是我如何能够实现它的方法之一。



Answer 14:

 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; 

要小心背部蜱(`)



文章来源: How to loop through an array containing objects and access their properties