JS For Of - JavaScript

for...of 循环是ES6中引入的新特性。它提供了一种简单和方便地遍历可迭代对象的方法。

可迭代对象

可迭代对象是指具有 Symbol.iterator 属性的对象。这个属性返回一个迭代器对象，用于遍历对象的值。

JavaScript 中的可迭代对象包括数组、字符串、Map、Set 等。

语法

for...of 循环的语法格式如下：

for (variable of iterable) {
  // 代码块
}

其中，variable 是变量名，用于存放可迭代对象的当前值。 iterable 是可迭代对象。

示例

遍历数组

以下代码演示了如何使用 for...of 遍历数组。

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

for (const num of arr) {
  console.log(num);
}
// 输出：1 2 3 4

遍历字符串

以下代码演示了如何使用 for...of 遍历字符串。

const str = 'hello';

for (const char of str) {
  console.log(char);
}
// 输出：h e l l o

遍历 Map

以下代码演示了如何使用 for...of 遍历 Map。

const map = new Map([['key1', 'value1'], ['key2', 'value2']]);

for (const [key, value] of map) {
  console.log(`${key} = ${value}`);
}
// 输出：key1 = value1  key2 = value2

结论

for...of 循环是一种简单和方便地遍历可迭代对象的方法。它可以应用于数组、字符串、Map、Set 等对象。

代码片段：

/**
* @description 遍历数组
* @param {Array} arr
*/
function traverseArray(arr) {
  for (const num of arr) {
    console.log(num);
  }
}

/**
* @description 遍历字符串
* @param {String} str
*/
function traverseString(str) {
  for (const char of str) {
    console.log(char);
  }
}

/**
* @description 遍历 Map
* @param {Map} map
*/
function traverseMap(map) {
  for (const [key, value] of map) {
    console.log(`${key} = ${value}`);
  }
}