JavaScript 如何循环遍历包含多个对象的数组并访问它们的属性

循环遍历元素数组非常容易，因为我们可以通过数组索引访问元素。但是对象不同，对象是一对键值对，索引对数组对象不起作用。

因此，循环遍历对象数组的过程与传统数组的循环不同。在JavaScript中，有不同的方法可以轻松访问对象的键和值，例如object.keys()、object.values()、object.entries()。

循环遍历对象数组有很多方法，让我们依次看一下：

• 使用for…in循环
• 使用forEach()方法
• 使用Object.keys()方法
• 使用object.values()方法
• 使用object.entries()方法
• 使用Lodash _.forEach()

方法1：使用for…in循环

可以使用for…in循环迭代对象的属性，可以使用对象的键作为索引找到对象的每个键的值。

示例：

Javascript代码

const Teachers = [
    {
        name: 'saritha',
        subject: 'Maths'
    },
    {
        name: 'ahim',
        subject: 'science'
    },
    {
        name: 'sneha',
        subject: 'Social'
    }]
 
Teachers.forEach(teacher => {
    for (let value in teacher) {
        console.log(`${teacher[value]}`)
    }
})

输出

saritha
Maths
ahim
science
sneha
Social

方法2：使用forEach()方法

arr.forEach() 方法对数组的每个元素调用一次提供的函数。提供的函数可以对给定数组的元素执行任何种类的操作。

示例：

Javascript

const arr = [{ x:1 }, { x: 2 }, { x: 3 }];
 
arr.forEach((element, index, array) => {
    console.log(element.x);    
});

输出

1
2
3

方法3：使用Object.keys()方法

JavaScript中的Object.keys()方法返回一个数组，其元素是对应可枚举属性的字符串。Object.keys()方法只返回自身属性的名称。

示例：

Javascript

const Teachers = [
    {
        name: 'saritha',
        subject: 'Maths'
    },
    {
        name: 'ahim',
        subject: 'science'
    },
    {
        name: 'sneha',
        subject: 'Social'
    }]
 
for (let teacher in Object.keys(Teachers)) {
    for (let key in Teachers[teacher]) {
        console.log(Teachers[teacher][key]);
    }
}

输出

saritha
Maths
ahim
science
sneha
Social

方法4：使用 object.values() 方法

Object.values() 方法用于返回一个数组，数组的元素是对象上找到的可枚举属性值。我们通过遍历该数组并仅获取该对象的属性。

示例：

Javascript

const Teachers = [
    {
        name: 'saritha',
        subject: 'Maths'
    },
    {
        name: 'ahim',
        subject: 'science'
    },
    {
        name: 'sneha',
        subject: 'Social'
    }]
 
for (const value of Object.values(Teachers)) {
    for (let v in value) {
        console.log(value[v]);
    }
}

输出

saritha
Maths
ahim
science
sneha
Social

方法5：使用 object.entries() 方法

JavaScript 中的 Object.entries() 方法返回一个由对象的可枚举属性[key, value]对组成的数组。我们可以使用 for..in 循环遍历该数组，只获取该对象的属性。

Javascript

const Teachers = [
    {
        name: 'saritha',
        subject: 'Maths'
    },
    {
        name: 'ahim',
        subject: 'science'
    },
    {
        name: 'sneha',
        subject: 'Social'
    }]
 
for (const entry of Object.entries(Teachers)) {
    for (let value in entry[1]) {
        console.log(entry[1][value]);
    }
}

输出

saritha
Maths
ahim
science
sneha
Social

方法6: 使用 Lodash _.forEach()

_.forEach() 方法遍历集合的元素，并对每个元素调用迭代器函数。

安装步骤：

npm i --save lodash

示例：

JavaScript

const _ = require('lodash');        // or, use lodash
 
const Teacher = [
    { name: 'Marry', age: 23 },
    { name: 'Sam', age: 20 },
    { name: 'Julie', age: 18 }
];
 
_.forEach(Teacher, (value, _) => console.log(value));

输出结果：

{ name: 'Marry', age: 23 }
{ name: 'Sam', age: 20 }
{ name: 'Julie', age: 18 }