让字符串遍历更简单：ES6 for ... of 循环介绍

ES6 为我们带来了许多令人兴奋的新特性，其中之一就是 for ... of 循环。这种新的循环结构使遍历字符串变得更加容易，并为我们提供了许多便利特性。

在 ES5 中，我们通常使用 for 循环或 forEach() 方法来遍历字符串。例如，以下代码使用 for 循环遍历字符串并输出每个字符：

const str = "Hello World";

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

而使用 for ... of 循环，我们可以更轻松地遍历字符串，如下所示：

const str = "Hello World";

for (const char of str) {
  console.log(char);
}

如您所见，for ... of 循环的语法更加简洁，并且它不需要我们手动维护循环变量 i。

for ... of 循环的便利特性

除了易于使用之外，for ... of 循环还为我们提供了许多便利特性，这些特性使遍历字符串更加容易和高效。

1. 遍历任意可迭代对象

for ... of 循环不仅可以用来遍历字符串，它还可以用来遍历任何可迭代对象，包括数组、对象和 Set。这使得它成为一个非常通用的循环结构。

例如，以下代码使用 for ... of 循环遍历一个数组：

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

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

2. 轻松访问元素

在 for ... of 循环中，我们可以使用 of 来访问当前元素。这使得我们可以轻松地访问字符串或数组中的每个元素。

例如，以下代码使用 of 关键字来访问字符串中的每个字符：

const str = "Hello World";

for (const char of str) {
  console.log(`The character is ${char}`);
}

3. 提前终止循环

如果我们想提前终止 for ... of 循环，我们可以使用 break 语句。这使得我们可以控制循环的执行并根据需要随时终止它。

例如，以下代码使用 break 语句来提前终止循环，当它遇到字符 "o" 时：

const str = "Hello World";

for (const char of str) {
  if (char === "o") {
    break;
  }

  console.log(char);
}

4. 继续执行循环

如果我们想在 for ... of 循环中跳过当前元素并继续执行循环，我们可以使用 continue 语句。这使得我们可以控制循环的执行并根据需要跳过某些元素。

例如，以下代码使用 continue 语句来跳过字符串中的空格字符：

const str = "Hello World";

for (const char of str) {
  if (char === " ") {
    continue;
  }

  console.log(char);
}

结论

for ... of 循环是 ES6 中一个非常有用的循环结构，它使遍历字符串和可迭代对象变得更加容易。它提供了许多便利特性，这些特性使我们可以轻松地控制循环的执行并访问其中的元素。

如果您还没有使用过 for ... of 循环，我强烈建议您尝试一下。它肯定会让您的代码更加简洁和高效。