Javascript 简明教程

JavaScript - For…​of Loop

JavaScript for…​of Loop

JavaScript 中的 for…​of 循环用于遍历可迭代对象中的元素。在每次迭代中，它给出了可迭代对象的一个元素。可迭代对象包括数组、字符串、映射、集合和生成器。

JavaScript for…​of 循环是一种比 for…​in 循环更有效得多遍历可迭代对象的循环方式。 for…​of 循环迭代属性值，而 for…​in 循环用于迭代对象的键（属性名）。

Syntax

JavaScript 中 'for…​of' 的语法如下所示：

for (ele of iterable) {
    // loop body
}

Parameters

  1. ele - 可迭代对象的当前元素。

  2. of - JavaScript 运算符。

  3. iterable - 可迭代对象（例如对象、数组和字符串）。

Examples

Example: For…​of Loop with Arrays

在下面的示例中，数组包含了不同的字符串。之后，我们使用了 for…​of 循环遍历每个数组元素。在输出中，我们能看到它打印了每个数组元素。

<html>
<head>
    <title> JavaScript - for...of loop </title>
</head>
<body>
    <p id="output"> </p>
    <script>
        const output = document.getElementById("output");
        const arr = ["JavaScript", "Python", "C", "C++", "HTML", "CSS"];
        for (let ele of arr) {
            output.innerHTML += ele + "<br>";
        }
    </script>
</body>
</html>
JavaScript
Python
C
C++
HTML
CSS

Example: For…​of Loop with Strings

在 JavaScript 中，字符串也是可迭代的，我们可以遍历字符串中的每个字符。在下面的代码中，for…​of 循环用于遍历字符串中的每个字符。

<html>
<head>
    <title> JavaScript - for...of loop </title>
</head>
<body>
    <p id="output"> </p>
    <script>
        const output = document.getElementById("output");
        let str = "JavaScript";
        for (let char of str) {
            output.innerHTML += char + ", ";
        }
    </script>
</body>
</html>
J, a, v, a, S, c, r, i, p, t,

Example: For…​of Loop with Set

在 JavaScript 中，集合包含唯一元素。这里，我们将包含数字的数组作为 Set() 构造函数的参数以创建集合。之后，我们使用了 for…​of 循环以遍历集合。

<html>
<head>
   <title> JavaScript - for...of loop </title>
</head>
<body>
   <p id="output"> </p>
   <script>
      const output = document.getElementById("output");
      const nums = new Set([10, 20, 30, 30, 30, 40, 50, 60]);
      for (let num of nums) {
         output.innerHTML += num + ", ";
      }
   </script>
</body>
</html>
10, 20, 30, 40, 50, 60,

Example: For…​of Loop with Map

映射在 JavaScript 中包含键值对，它类似于对象。这里，我们创建了一个映射并在映射中插入了 3 个键值对。当我们在 for…​of 循环中遍历映射元素时，我们可以在每次迭代中获取在下面的代码中显示的键和值。

<html>
<body>
   <p id="output"> </p>
   <script>
      const output = document.getElementById("output");
      const map = new Map();
      map.set("one", 1);
      map.set("second", 2);
      map.set("third", 3)
      for (let [k, v] of map) {
         output.innerHTML += k + " -> " + v + "<br/>";
      }
   </script>
</body>
</html>
one -> 1
second -> 2
third -> 3

但是，你也可以使用 for…​in 循环遍历可迭代对象（例如数组、字符串、映射和集合）。