对象与数组的遍历¶

在JavaScript中，对象和数组是两种最常见的数据结构。遍历它们是我们日常开发中的基本操作。本文将详细介绍如何遍历对象和数组，并提供相关的代码示例和练习题。

1. 数组的遍历¶

数组是一种有序的数据集合，我们可以通过索引访问数组中的元素。遍历数组意味着访问数组中的每一个元素，并对它们进行操作。

1.1 使用 `for` 循环遍历数组¶

for 循环是最基本的遍历数组的方法。它通过索引逐个访问数组中的元素。

const fruits = ['apple', 'banana', 'cherry'];

// 使用 for 循环遍历数组
for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]); // 输出数组中的每个元素
}

解释： - fruits.length 获取数组的长度。 - i 是循环变量，从 0 开始，每次循环递增 1，直到 i 小于数组长度。 - fruits[i] 访问数组中的第 i 个元素。

1.2 使用 `forEach` 方法遍历数组¶

forEach 是数组的一个内置方法，它接受一个回调函数作为参数，并对数组中的每个元素执行该回调函数。

const numbers = [1, 2, 3, 4, 5];

// 使用 forEach 方法遍历数组
numbers.forEach(function(number) {
    console.log(number); // 输出数组中的每个元素
});

解释： - forEach 方法会自动遍历数组中的每个元素。 - 回调函数中的 number 参数表示当前遍历到的数组元素。

1.3 使用 `for...of` 循环遍历数组¶

for...of 是ES6引入的一种新的循环语法，专门用于遍历可迭代对象（如数组）。

const colors = ['red', 'green', 'blue'];

// 使用 for...of 循环遍历数组
for (const color of colors) {
    console.log(color); // 输出数组中的每个元素
}

解释： - for...of 循环直接遍历数组中的元素，而不需要通过索引访问。 - color 是当前遍历到的数组元素。

2. 对象的遍历¶

对象是一种无序的键值对集合。遍历对象意味着访问对象中的每一个属性，并对它们进行操作。

2.1 使用 `for...in` 循环遍历对象¶

for...in 循环是遍历对象属性的常用方法。它会遍历对象的所有可枚举属性。

const person = {
    name: 'Alice',
    age: 25,
    occupation: 'Developer'
};

// 使用 for...in 循环遍历对象
for (const key in person) {
    console.log(`${key}: ${person[key]}`); // 输出对象的每个属性和值
}

解释： - for...in 循环遍历对象的每个属性。 - key 是当前遍历到的属性名。 - person[key] 访问对象的属性值。

2.2 使用 `Object.keys()` 方法遍历对象¶

Object.keys() 方法返回一个包含对象所有属性名的数组。我们可以通过遍历这个数组来访问对象的属性。

const car = {
    make: 'Toyota',
    model: 'Corolla',
    year: 2020
};

// 使用 Object.keys() 方法遍历对象
Object.keys(car).forEach(function(key) {
    console.log(`${key}: ${car[key]}`); // 输出对象的每个属性和值
});

解释： - Object.keys(car) 返回一个包含 car 对象所有属性名的数组。 - forEach 方法遍历这个数组，并对每个属性名执行回调函数。

2.3 使用 `Object.entries()` 方法遍历对象¶

Object.entries() 方法返回一个包含对象所有键值对的数组。我们可以通过遍历这个数组来访问对象的属性和值。

const book = {
    title: 'JavaScript: The Good Parts',
    author: 'Douglas Crockford',
    pages: 176
};

// 使用 Object.entries() 方法遍历对象
Object.entries(book).forEach(function([key, value]) {
    console.log(`${key}: ${value}`); // 输出对象的每个属性和值
});

解释： - Object.entries(book) 返回一个包含 book 对象所有键值对的数组。 - forEach 方法遍历这个数组，并对每个键值对执行回调函数。 - [key, value] 是数组解构语法，用于获取键值对中的键和值。

3. 练习题¶

练习题 1: 遍历数组并计算总和¶

给定一个包含数字的数组 [10, 20, 30, 40, 50]，编写代码遍历数组并计算所有元素的总和。

提示： 可以使用 for 循环或 forEach 方法。

练习题 2: 遍历对象并输出特定属性¶

给定一个对象 { name: 'Bob', age: 30, city: 'New York' }，编写代码遍历对象并只输出属性值为字符串的属性。

提示： 可以使用 typeof 操作符检查属性值的类型。

练习题 3: 遍历嵌套对象¶

给定一个嵌套对象 { user: { name: 'Charlie', age: 28 }, settings: { theme: 'dark', notifications: true } }，编写代码遍历对象并输出所有嵌套属性的键和值。

提示： 可以使用递归函数来遍历嵌套对象。

4. 总结¶

数组遍历：可以使用 for 循环、forEach 方法或 for...of 循环来遍历数组。
对象遍历：可以使用 for...in 循环、Object.keys() 方法或 Object.entries() 方法来遍历对象。
遍历嵌套结构：对于嵌套的对象或数组，可以使用递归函数来遍历所有层级。

通过掌握这些遍历方法，你将能够更高效地处理JavaScript中的对象和数组数据。