遍历列表 JavaScript

在 JavaScript 中，遍历列表是非常常见的操作，列表是指数组（Array）和对象（Object）等。

遍历数组

for 循环

使用 for 循环遍历数组可以很方便的获取数组中的每一个元素。

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

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

forEach 方法

除了使用 for 循环外，还可以使用 forEach 方法来遍历数组。

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

arr.forEach((item) => {
  console.log(item);
});

注意：使用 forEach 方法遍历数组无法使用 break 或 return 跳出循环，如果需要跳出循环，可以使用 for 循环。

for...of 循环

ES6 新增的 for...of 循环更加方便遍历数组。

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

for (const item of arr) {
  console.log(item);
}

遍历对象

for...in 循环

使用 for...in 循环可以遍历对象的键值。

const obj = { a: 1, b: 2, c: 3 };

for (const key in obj) {
  console.log(key, obj[key]);
}

注意：使用 for...in 循环遍历对象时，需要使用 hasOwnProperty 方法判断属性是否为对象自身的属性。

实战演练

假设有一个数组，存储了几个人的信息：

const people = [
  { name: 'Tom', age: 20 },
  { name: 'Jerry', age: 18 },
  { name: 'Spike', age: 25 },
];

我们可以使用 for 循环、forEach 方法和 for...of 循环遍历这个数组并输出每个人的信息：

// for 循环
for (let i = 0; i < people.length; i++) {
  const person = people[i];
  console.log(`name: ${person.name}, age: ${person.age}`);
}

// forEach 方法
people.forEach((person) => {
  console.log(`name: ${person.name}, age: ${person.age}`);
});

// for...of 循环
for (const person of people) {
  console.log(`name: ${person.name}, age: ${person.age}`);
}

输出结果：

name: Tom, age: 20
name: Jerry, age: 18
name: Spike, age: 25

总结

遍历列表是 JavaScript 中常见的操作，可以使用 for 循环、forEach 方法和 for...of 循环来遍历数组和对象。在实际开发中，需要根据不同的场景选择不同的遍历方法。