JavaScript 如何循环遍历一个普通对象，其中对象作为成员

循环遍历一个普通的JavaScript对象，其中对象作为成员，意味着迭代对象的每个属性并访问其值，这些值也可能是对象。这是JavaScript中常见的任务，特别是在处理JSON数据或API时。

有几种方法可以循环遍历一个普通的JavaScript对象，其中对象作为成员。以下是四种常用的方法：

• 使用For…in循环
• 使用Object.keys()
• 使用Object.entries()
• 使用Object.Values()

方法1：使用For…in循环

这种方法使用for…in循环迭代对象的每个属性并访问其值。对于每个属性，循环将键设置为属性的名称，值设置为属性的值。当您想要对对象的每个属性执行相似的操作时，这种方法非常有用。

语法：

//for...in loop  
for (let key in object) {  
    // do something with object[key]  
}

示例： 使用 for…in 循环遍历一个拥有对象为成员的对象。

Javascript

let person = {
    name: "John",
    age: 30,
    address: {
        street: "123 Main St",
        city: "Anytown",
        state: "CA",
        zip: "12345"
    }
};
for (let key in person) {
    console.log(key + ": " + person[key]);
};

输出

name: John
age: 30
address: [object Object]

方法 2：使用 Object.keys()

这种方法使用 Object.keys() 方法获取对象中所有键的数组。然后使用 forEach() 方法遍历数组中的每个键，并访问其对应的值。当您想对对象中的每个键执行特定操作时，此方法非常有用。

语法：

// Object.keys()  
Object.keys(object).forEach(function (key) {  
    // do something with object[key]  
});

示例： 使用Object.keys()迭代一个对象，其中成员是对象

Javascript

const myObj = {
    prop1: { name: 'John', age: 25 },
    prop2: { name: 'Sarah', age: 30 },
    prop3: { name: 'Tom', age: 20 }
};
 
const newArray = Object.keys(myObj).map(key => {
    const obj = myObj[key];
    return { ...obj, id: key };
    // Adding an id property to the object
});
 
console.log(newArray);

输出

[
  { name: 'John', age: 25, id: 'prop1' },
  { name: 'Sarah', age: 30, id: 'prop2' },
  { name: 'Tom', age: 20, id: 'prop3' }
]

方法3：使用 Object.entries()

此方法使用 Object.entries() 方法获取对象中所有键值对的数组。然后使用 forEach() 方法遍历每个键值对并访问值，该值可能是一个对象。此方法在希望对对象中的每个键值对执行特定操作时非常有用。

语法：

// Object.entries()  
Object.entries(object).forEach(function([key, value]) {  
    // do something with value (which could be an object)  
});

示例： 使用Object.entries()迭代具有对象成员的对象。

JavaScript

let person = {
    name: "John",
    age: 30,
    address: {
        street: "123 Main St",
        city: "Anytown",
        state: "CA",
        zip: "12345"
    }
};
Object.entries(person).forEach(([key, value]) => {
    console.log(key + ": " + value);
});

输出

name: John
age: 30
address: [object Object]

方法4：使用 Object.Values()

在这个方法中，Object.values()会从对象中返回一个值的数组。它用于循环遍历值，访问person对象中的属性，并打印出姓名和年龄。

语法：

Object.values(obj)

示例: 使用Object.values()，循环遍历person对象中的对象，并记录它们的名称和年龄。

Javascript

const person = {
    obj1: { name: "John", age: 30 },
    obj2: { name: "Jane", age: 25 },
    obj3: { name: "Bob", age: 40 }
};
 
Object.values(person).forEach(obj => {
    console.log("name :" + obj.name, "age :" + obj.age);
});

输出

name :John age :30
name :Jane age :25
name :Bob age :40