JavaScript 遍历对象

在实际开发中，我们经常需要访问对象中的每一个属性（即遍历对象）。所谓的遍历对象，也称为 “枚举对象属性” ，它指的是访问一个对象的所有（或部分）属性，以便处理这些属性的键或值。

举个简单例子，对于一个 JavaScript 对象 { key1: value1, key2: value2, ... } 来说，遍历就是按一定方式依次访问 key1、key2 等属性名，或者 value1、value2 等属性值。

打个比方，我们有一个装满不同物品的盒子，每个物品都有一个标签（属性名）和物品本身（属性值）。遍历这个盒子就是依次拿起每一个物品，查看它的标签和物品是什么。

JavaScript 提供了多种方式来遍历对象的属性，常用的有以下几种：

• 使用 for...in 循环。
• 使用 Object.keys()。
• 使用 Object.values()。
• 使用 Object.entries()。

使用 for...in 循环遍历对象

在 JavaScript 中，遍历对象属性最常用的方式，就是使用 for...in 循环。for...in 会遍历对象所有可枚举的属性，包括继承而来的属性。

语法：

for (let key in obj) {
    ……
}

说明：

for...in 循环会依次将对象的属性名（键）赋值给变量 key。在循环体内部，我们可以使用 key 来获取当前的属性名，也可以使用 obj[key] 来获取对应的属性值。

示例 1：使用 for...in 遍历对象

const person = {
    "name": "阿莫",
    "age": 20,
    "city": "广州"
};

for (let key in person) {
    console.log("属性名：" + key + "，属性值：" + person[key]);
}

运行结果如下。

属性名：name，属性值：阿莫
属性名：age，属性值：20
属性名：city，属性值：广州

分析：

在这个例子中，我们使用 for...in 循环遍历来 person 对象的每一个属性。在每次循环中，key 变量依次取到属性名 "name"、"age"、"city"，然后我们通过 person[key] 访问到对应的属性值。

示例 2：使用 for...in 配合 hasOwnProperty()

const animal = {
    "type": "中华田园犬"
};

// dog 继承自 animal
const dog = Object.create(animal); 
dog.name = "大黄";

for (let key in dog) {
    if (dog.hasOwnProperty(key)) { 
        console.log("自身属性：" + key + "，值：" + dog[key]);
    } else {
        console.log("继承属性：" + key + "，值：" + dog[key]);
    }
}

运行结果如下。

自身属性：name，值：大黄
继承属性：type，值：中华田园犬

分析：

这个例子中，dog 继承自 animal（使用 Object.create() 实现）。dog 对象自身有一个 name 属性，然后继承了 animal 的 type 属性。使用 hasOwnProperty(key) 可以判断当前的 key 是否是 dog 对象自身的属性，从而避免遍历到继承属性。

使用 Object.keys() 遍历属性名

在 JavaScript 中，我们可以使用 Object.keys() 方法来获取一个数组，该数组包含了对象自身所有可枚举属性名（键）。然后，我们可以遍历这个数组来获取属性名。

语法：

// 方式 1
Object.keys(obj).forEach(function(key) {
    // 这里可以使用 key 访问属性名
    // 也可以使用 object[key] 访问属性值
});

// 方式 2
for (let key of Object.keys(obj)) {
    // 这里可以使用 key 访问属性名
    // 也可以使用 object[key] 访问属性值
}

说明：

Object.keys() 方法只会考虑对象自身的属性，不包括继承属性。Object.keys() 返回的是一个数组，数组元素是字符串类型的属性名。

示例 3：使用 Object.keys() 遍历对象

const person = {
    "name": "阿莫",
    "age": 20,
    "city": "广州"
};

Object.keys(person).forEach(function(key) {
    console.log("属性名：" + key + "，属性值：" + person[key]);
});

运行结果如下。

属性名：name，属性值：阿莫
属性名：age，属性值：20
属性名：city，属性值：广州

分析：

Object.keys(person) 会返回这样一个数组：["id", "name", "price"]。然后使用 forEach() 方法可以循环遍历这个数组，并依次打印出属性名和属性值。

使用 Object.values() 遍历属性值

在 JavaScript 中，我们可以 Object.values() 方法来返回一个数组，该数组包含对象自身所有可枚举的属性值。

语法：

// 方式 1
Object.values(obj).forEach(function(value) {
    // 这里可以使用 value 访问属性值
});

// 方式 2
for (let value of Object.values(obj)) {
    // 这里可以使用 value 访问属性值
}

说明：

Object.values() 方法只会考虑对象自身的属性，不包括继承属性。Object.values() 返回的是一个数组，数组元素是属性值。

示例 4：使用 Object.values() 遍历对象

const person = {
    "name": "阿莫",
    "age": 20,
    "city": "广州"
};

Object.values(person).forEach(function(value) {
    console.log("属性值：" + value);
});

运行结果如下。

属性值：阿莫
属性值：20
属性值：广州

分析：

Object.values(person) 返回这样一个数组 ["阿莫", 20, "广州"]。然后使用 forEach() 方法来遍历这个数组，可以依次打印出属性值。

使用 Object.entries() 遍历键值对

在 JavaScript 中，我们可以使用 Object.entries() 方法来返回一个数组，该数组包含对象自身所有可枚举属性的 “键值对” 。

语法：

// 方式 1
Object.entries(obj).forEach(function([key, value]) {
    // 这里可以使用 key 访问属性名
    // 也可以使用 value 访问属性值
});

// 方式 2
for (let [key, value] of Object.entries(obj)) {
    // 在这里可以使用 key 访问属性名
    // 也可以使用 value 访问属性值
}

说明：

Object.entries() 方法只会考虑对象自身的属性，不包括继承属性。Object.entries() 返回的是一个数组，数组的每个元素都是一个 “[key, value]” 数组。

示例 5：使用 Object.entries() 遍历对象

const person = {
    "name": "阿莫",
    "age": 20,
    "city": "广州"
};

Object.entries(person).forEach(function([key, value]) {
    console.log("属性名：" + key + "，属性值：" + value);
});

运行结果如下。

属性名：name，属性值：阿莫
属性名：age，属性值：20
属性名：city，属性值：广州

分析：

Object.entries(person) 会返回这样一个数组：[["name", "阿莫"], ["age", 20], ["city", "广州"]]。然后我们可以使用 forEach() 方法循环遍历这个数组，并通过数组解构 [key, value] 直接获取属性名和属性值，非常方便。

最后小伙伴可能会问：“遍历对象的方式那么多，哪一种最好呢？” 其实这个取决于你的开发需求。我们来总结一下：

• 如果需要遍历所有属性（包括继承属性），或者需要在遍历过程中中断循环，我们可以使用 for...in（注意是否要考虑结合 hasOwnProperty()）。
• 如果只需要获取对象自身的属性名，我们可以使用 Object.keys()。
• 如果只需要获取对象自身的属性值，我们可以使用 Object.values()。
• 如果需要同时获取对象自身的属性名和属性值，并且希望代码简洁，可以使用 Object.entries()。