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

2020/10/17 12:01 · javascript ·  · 0评论

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

console.log(myArray[j]);

}
``````

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

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

}
``````

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

### 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
});
``````

### 2.检查数组中的任何元素是否通过测试

``````const people = [
{name: 'John', age: 23},
{name: 'Andrew', age: 3},
{name: 'Peter', age: 8},
{name: 'Hanna', age: 14},

const anyAdult = people.some(person => person.age >= 18);
``````

### 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'},

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

### 参考文献

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

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

`for..of`几乎在Java语言中使用循环进行各种迭代。此外，最酷的事情之一是它们也可以与异步/等待一起使用。

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

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

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

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

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

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

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

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

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

``````\$.each(array, function(index, item) {
console.log(index, item);
});
``````
``````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);
})``````

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

`````` \$.each(array, (item, index) => {
console.log(index, item);
});
``````
``````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;``````

``````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++; }
``````

``````while ((arr[c].name) && (arr[c])) { c++; }
``````