JS循环对象|极客笔记

JS循环对象

在JavaScript中，对象是一种特殊的数据类型，用于存储键值对。对象可以通过循环遍历其所有属性来访问和操作。本文将详细介绍如何在JavaScript中循环遍历对象并操作对象的属性。

创建对象

在JS中，对象可以通过对象字面量（object literal）来创建，也可以使用构造函数来创建。以下是两种创建对象的方式：

对象字面量

对象字面量是一种简便的创建对象的方式，通过大括号{}来表示一个对象，键值对以键值对的形式写在大括号内部，用逗号分隔。

// 创建对象字面量
let person = {
    name: 'Alice',
    age: 30,
    gender: 'female'
};

console.log(person);

构造函数

通过构造函数来创建对象可以创建多个具有相同属性和方法的对象。构造函数使用new关键字来实例化对象。

// 构造函数创建对象
function Person(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
}

let person1 = new Person('Bob', 25, 'male');
let person2 = new Person('Cathy', 35, 'female');

console.log(person1);
console.log(person2);

遍历对象

在JS中，有多种方式可以遍历对象的属性。常用的方法包括for...in循环、Object.keys()方法和Object.entries()方法。

for…in循环

for...in循环可以遍历对象的可枚举属性，包括对象自身的属性和原型链上的属性。

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

Object.keys()方法

Object.keys()方法返回一个包含对象所有可枚举属性的数组。

// 使用Object.keys()遍历对象属性
let keys = Object.keys(person);
keys.forEach(key => {
    console.log(key + ': ' + person[key]);
});

Object.entries()方法

Object.entries()方法返回一个包含对象所有可枚举属性的键值对数组。

// 使用Object.entries()遍历对象属性
let entries = Object.entries(person);
entries.forEach(([key, value]) => {
    console.log(key + ': ' + value);
});

修改对象属性

可以通过给对象的属性赋值的方式来修改对象的属性。

// 修改对象属性
person.age = 40;
console.log(person);

删除对象属性

可以使用delete关键字来删除对象的属性。

// 删除对象属性
delete person.gender;
console.log(person);

示例代码

// 创建对象字面量
let person = {
    name: 'Alice',
    age: 30,
    gender: 'female'
};

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

// 使用Object.keys()遍历对象属性
let keys = Object.keys(person);
keys.forEach(key => {
    console.log(key + ': ' + person[key]);
});

// 使用Object.entries()遍历对象属性
let entries = Object.entries(person);
entries.forEach(([key, value]) => {
    console.log(key + ': ' + value);
});

// 修改对象属性
person.age = 40;
console.log(person);

// 删除对象属性
delete person.gender;
console.log(person);

结果输出

name: Alice
age: 30
gender: female
name: Alice
age: 30
gender: female
name: Alice
age: 30
gender: female
{
    name: "Alice",
    age: 40,
    gender: "female"
}
{
    name: "Alice",
    age: 40
}

以上是关于在JavaScript中循环遍历对象的一些方法及示例代码。