JS对象循环

JS对象循环

在JavaScript中，对象是一种复合数据类型，可以存储包含键值对的数据。对象的键是字符串，值可以是任何类型的数据，包括数字、字符串、布尔值、数组、对象等。在实际开发中，我们经常需要遍历对象的键值对，这就需要使用循环来实现。

本文将详细介绍如何使用不同的方法循环遍历JavaScript对象，包括for…in循环、Object.keys()方法、Object.values()方法和Object.entries()方法。

1. for…in循环

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

for (let key in obj) {
    console.log(key + ": " + obj[key]);
}

其中，key代表对象的键，obj[key]代表属性的值。下面是一个使用for…in循环遍历对象的示例：

let person = {
    name: 'Alice',
    age: 30,
    gender: 'female'
};

for (let key in person) {
    console.log(key + ": " + person[key]);
}

运行结果如下：

name: Alice
age: 30
gender: female

需要注意的是，for…in循环会遍历对象的所有可枚举属性，包括原型链上的属性。如果只想遍历对象自身的属性，可以使用hasOwnProperty()方法进行判断：

for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
        console.log(key + ": " + obj[key]);
    }
}

2. Object.keys()方法

Object.keys()方法返回一个包含对象所有可枚举属性名称的数组。可以结合数组的forEach()方法来遍历对象的所有键，示例如下：

let car = {
    brand: 'Toyota',
    model: 'Corolla',
    year: 2020
};

Object.keys(car).forEach(function(key) {
    console.log(key + ": " + car[key]);
});

运行结果如下：

brand: Toyota
model: Corolla
year: 2020

Object.keys()方法只返回对象自身的可枚举属性，不包括原型链上的属性。

3. Object.values()方法

Object.values()方法返回一个包含对象所有可枚举属性值的数组。可以结合数组的forEach()方法来遍历对象的所有值，示例如下：

let fruits = {
    apple: 'red',
    banana: 'yellow',
    orange: 'orange'
};

Object.values(fruits).forEach(function(value) {
    console.log(value);
});

运行结果如下：

red
yellow
orange

Object.values()方法只返回对象自身的可枚举属性的值，不包括原型链上的属性。

4. Object.entries()方法

Object.entries()方法返回一个包含对象所有可枚举属性键值对的数组。可以使用数组的forEach()方法来遍历对象的所有键值对，示例如下：

let book = {
    title: 'JavaScript Cookbook',
    author: 'Shelley Powers',
    pages: 400
};

Object.entries(book).forEach(function([key, value]) {
    console.log(key + ": " + value);
});

运行结果如下：

title: JavaScript Cookbook
author: Shelley Powers
pages: 400

Object.entries()方法会返回一个包含键值对的二维数组，可以使用解构赋值来获取键和值。