探索 JavaScript 的新遍历方式：for...of 循环

2023-11-27 01:11:08

for...of 循环的基本用法

for...of 循环的基本语法如下：

for (const element of array) {
  // 对数组中的每个元素执行操作
}

其中，array 是要遍历的数组，element 是数组中的每个元素。在每次迭代中，element 的值都会被赋给变量 element，然后可以在循环体中对 element 执行操作。

2. for...of 循环的优势

与传统的 for 循环和 for...in 循环相比，for...of 循环具有以下几个优势：

更加简洁、直观。 for...of 循环的语法非常简洁，只有三个部分：for、of 和数组。这使得它很容易理解和使用。
可以避免潜在的错误。 for...of 循环可以避免一些传统的 for 循环和 for...in 循环中常见的错误，例如索引越界和键名重复。
可以遍历多种数据结构。 for...of 循环可以遍历数组、对象、Map 和 Set 等多种数据结构。这使得它非常灵活，可以满足各种不同的需求。

3. for...of 循环的使用示例

下面是一些使用 for...of 循环遍历各种数据结构的示例：

3.1 遍历数组

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

for (const element of array) {
  console.log(element);
}

// 输出：
// 1
// 2
// 3
// 4
// 5

3.2 遍历对象

const object = {
  name: 'John Doe',
  age: 30,
  city: 'New York'
};

for (const key of Object.keys(object)) {
  console.log(`${key}: ${object[key]}`);
}

// 输出：
// name: John Doe
// age: 30
// city: New York

3.3 遍历 Map

const map = new Map();
map.set('name', 'John Doe');
map.set('age', 30);
map.set('city', 'New York');

for (const [key, value] of map) {
  console.log(`${key}: ${value}`);
}

// 输出：
// name: John Doe
// age: 30
// city: New York

3.4 遍历 Set

const set = new Set();
set.add('John Doe');
set.add('Jane Doe');
set.add('Michael Jones');

for (const element of set) {
  console.log(element);
}

// 输出：
// John Doe
// Jane Doe
// Michael Jones