JavaScript 对象循环|极客笔记

JavaScript 对象循环

在 JavaScript 中，对象是一种复杂的数据类型，它可以存储键值对。对象是由花括号 {} 包裹起来的，键值对之间用冒号 : 分隔，键值对之间用逗号 , 分隔。对象的键是字符串，值可以是任意类型的数据，包括数字、字符串、数组、函数等。

在开发中，我们经常需要遍历对象中的键值对。JavaScript 提供了多种方式来实现对象循环，包括 for…in 循环、Object.keys 方法、Object.values 方法、Object.entries 方法等。本文将详细介绍这些方式，并给出相应的示例代码供参考。

1. for…in 循环

for…in 循环是一种比较简单的遍历对象属性的方式，它会遍历对象的所有可枚举属性，包括继承来的属性。语法如下：

for (const key in object) {
    if (object.hasOwnProperty(key)) {
        const value = object[key];
        // 处理键值对
    }
}

在这里，key 是对象的键，value 是键对应的值。需要注意的是，为了排除继承属性，通常会使用 hasOwnProperty 方法来判断属性是否是对象自身的属性。

示例代码如下：

const person = {
    name: 'Alice',
    age: 30,
    gender: 'Female'
};

for (const key in person) {
    if (person.hasOwnProperty(key)) {
        const value = person[key];
        console.log(` ${key}:$ {value}`);
    }
}

运行结果如下：

name: Alice
age: 30
gender: Female

2. Object.keys 方法

Object.keys 方法返回一个由对象的键组成的数组，我们可以使用该方法结合数组的forEach方法来遍历对象的键值对。语法如下：

Object.keys(object).forEach((key) => {
    const value = object[key];
    // 处理键值对
});

示例代码如下：

const person = {
    name: 'Bob',
    age: 25,
    gender: 'Male'
};

Object.keys(person).forEach((key) => {
    const value = person[key];
    console.log(` ${key}:$ {value}`);
});

运行结果如下：

name: Bob
age: 25
gender: Male

3. Object.values 方法

Object.values 方法返回一个由对象的值组成的数组，我们可以使用该方法结合数组的forEach方法来遍历对象的键值对。语法如下：

Object.values(object).forEach((value) => {
    // 处理值
});

示例代码如下：

const person = {
    name: 'Charlie',
    age: 35,
    gender: 'Male'
};

Object.values(person).forEach((value) => {
    console.log(value);
});

运行结果如下：

Charlie
35
Male

4. Object.entries 方法

Object.entries 方法返回一个由对象的键值对数组组成的数组，其中每个键值对都是一个由两个元素组成的数组，第一个元素是键，第二个元素是值。我们可以使用该方法结合数组的forEach方法来遍历对象的键值对。语法如下：

Object.entries(object).forEach(([key, value]) => {
    // 处理键值对
});

示例代码如下：

const person = {
    name: 'David',
    age: 40,
    gender: 'Male'
};

Object.entries(person).forEach(([key, value]) => {
    console.log(` ${key}:$ {value}`);
});

运行结果如下：