JS 遍历对象的方法|极客笔记

JS 遍历对象的方法

在 JavaScript 中，对象是一种复杂的数据类型，对象可以包含多个键值对，每个键值对由一个键和一个值组成。当我们需要对对象的键值对进行遍历时，有多种方法可供选择。本文将详细介绍在 JavaScript 中遍历对象的常用方法。

1. 使用 for…in 循环

for…in 循环是一种最基本的遍历对象的方法，它遍历对象的可枚举属性，包括实例属性和原型属性。下面是使用 for…in 循环遍历对象的示例代码：

// 定义一个对象
let person = {
    name: 'Alice',
    age: 30,
    gender: 'female'
};

// 使用 for...in 循环遍历对象
for (let key in person) {
    console.log(` ${key}:$ {person[key]}`);
}

上述代码定义了一个名为 person 的对象，使用 for...in 循环遍历了该对象的所有属性并输出对应的键值对。运行结果如下：

name: Alice
age: 30
gender: female

需要注意的是，for...in 循环遍历的是对象的键名，而不是键值。因此，在循环体内需要使用 person[key] 的方式来获取对应键的值。

2. 使用 Object.keys() 方法

Object.keys() 方法返回一个由对象的自身可枚举属性组成的数组，可以通过遍历该数组来获取对象的所有键名。下面是使用 Object.keys() 方法遍历对象的示例代码：

// 定义一个对象
let person = {
    name: 'Alice',
    age: 30,
    gender: 'female'
};

// 使用 Object.keys() 方法遍历对象
Object.keys(person).forEach(key => {
    console.log(` ${key}:$ {person[key]}`);
});

上述代码定义了一个名为 person 的对象，使用 Object.keys() 方法获取该对象的所有键名，并通过 forEach 方法遍历输出对应的键值对。运行结果同样是：

name: Alice
age: 30
gender: female

3. 使用 Object.entries() 方法

Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组，在遍历对象时可以直接获取键值对。下面是使用 Object.entries() 方法遍历对象的示例代码：

// 定义一个对象
let person = {
    name: 'Alice',
    age: 30,
    gender: 'female'
};

// 使用 Object.entries() 方法遍历对象
Object.entries(person).forEach(([key, value]) => {
    console.log(` ${key}:$ {value}`);
});

上述代码定义了一个名为 person 的对象，使用 Object.entries() 方法获取该对象的所有键值对数组，并通过 forEach 方法遍历输出对应的键值对。运行结果同样是：

name: Alice
age: 30
gender: female

4. 使用 Object.getOwnPropertyNames() 方法

Object.getOwnPropertyNames() 方法返回一个对象自身的所有属性，包括不可枚举属性。下面是使用 Object.getOwnPropertyNames() 方法遍历对象的示例代码：

// 定义一个对象
let person = {
    name: 'Alice',
    age: 30,
    gender: 'female'
};

// 使用 Object.getOwnPropertyNames() 方法遍历对象
Object.getOwnPropertyNames(person).forEach(key => {
    console.log(` ${key}:$ {person[key]}`);
});

上述代码定义了一个名为 person 的对象，使用 Object.getOwnPropertyNames() 方法获取该对象的所有属性，并通过 forEach 方法遍历输出对应的键值对。运行结果依然是：

name: Alice
age: 30
gender: female

5. 使用 Object.getOwnPropertySymbols() 方法

Object.getOwnPropertySymbols() 返回一个对象自身的所有 Symbol 属性，这些属性通常为对象的一些特殊属性。下面是使用 Object.getOwnPropertySymbols() 方法遍历对象的示例代码：

// 定义一个 Symbol 属性
let secret = Symbol('secret code');

// 定义一个对象
let person = {
    name: 'Alice',
    age: 30,
    gender: 'female',
    [secret]: '123456'
};

// 使用 Object.getOwnPropertySymbols() 方法遍历对象
Object.getOwnPropertySymbols(person).forEach(symbol => {
    console.log(` ${symbol.toString()}:$ {person[symbol]}`);
});

上述代码定义了一个名为 person 的对象，并在该对象上添加了一个 Symbol 类型的属性 secret，然后使用 Object.getOwnPropertySymbols() 方法获取该对象的 Symbol 属性并输出。运行结果如下：

Symbol(secret code): 123456

6. 遍历对象的综合示例

下面是一个结合多种遍历方法的综合示例，展示如何遍历对象的所有属性（包括可枚举属性、不可枚举属性和 Symbol 属性）：

// 定义一个 Symbol 属性
let secret = Symbol('secret code');

// 定义一个对象
let person = {
    name: 'Alice',
    age: 30,
    gender: 'female',
    [secret]: '123456'
};

// 使用 for...in 循环遍历对象
console.log('Using for...in:');
for (let key in person) {
    console.log(` ${key}:$ {person[key]}`);
}

// 使用 Object.keys() 方法遍历对象
console.log('\nUsing Object.keys():');
Object.keys(person).forEach(key => {
    console.log(` ${key}:$ {person[key]}`);
});

// 使用 Object.entries() 方法遍历对象
console.log('\nUsing Object.entries():');
Object.entries(person).forEach(([key, value]) => {
    console.log(` ${key}:$ {value}`);
});

// 使用 Object.getOwnPropertyNames() 方法遍历对象
console.log('\nUsing Object.getOwnPropertyNames():');
Object.getOwnPropertyNames(person).forEach(key => {
    console.log(` ${key}:$ {person[key]}`);
});

// 使用 Object.getOwnPropertySymbols() 方法遍历对象
console.log('\nUsing Object.getOwnPropertySymbols():');
Object.getOwnPropertySymbols(person).forEach(symbol => {
    console.log(` ${symbol.toString()}:$ {person[symbol]}`);
});

上述示例展示了如何综合运用多种遍历方法来遍历对象的所有属性。运行结果会依次输出每种遍历方法的结果。

通过本文的介绍，相信读者已经掌握了在 JavaScript 中遍历对象的常用方法。无论是使用 for...in 循环、Object.keys() 方法、Object.entries() 方法、Object.getOwnPropertyNames() 方法还是 Object.getOwnPropertySymbols() 方法，都能够轻松地遍历对象并获取键值对。在实际开发中，根据具体情况选择合适的遍历方法能够提高代码的效率和可维护性。