笙亿网络策划

JavaScript for...of 循环怎么用？

约 6 分钟读完 32 阅
文章导读
Previous Quiz Next JavaScript for...of 循环 JavaScript 中的 for...of 循环用于遍历可迭代对象（iterable object）的元素。在每次迭代中，它返回可迭代对象的一个元素。可迭代对象包括 array、strin
📋 目录
  1. Ⅰ JavaScript for...of 循环
  2. Ⅱ 语法
  3. Ⅲ 示例
A A

JavaScript - For...of 循环

Previous
Quiz
Next

JavaScript for...of 循环

JavaScript 中的 for...of 循环用于遍历可迭代对象（iterable object）的元素。在每次迭代中，它返回可迭代对象的一个元素。可迭代对象包括 array、string、map、set 和 generator。

JavaScript 的 for...of 循环是遍历可迭代对象比使用 for...in 循环更高效的方法。for...of 循环遍历属性值，而 for...in 循环用于遍历对象的键（属性名）。

语法

JavaScript 中 'for...of' 循环的语法如下 − 

for (ele of iterable) {
    // 循环体
}

参数

  • ele − 可迭代对象的当前元素。

  • of − JavaScript 操作符。

  • iterable − 可迭代对象，如 object、array、string 等。

示例

示例：与 Array 一起使用 For...of 循环

在下面的示例中，array 包含各种字符串。然后，我们使用 for...of 循环遍历每个 array 元素。在输出中，可以看到它打印了每个 array 元素。

<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

示例：与 String 一起使用 For...of 循环

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

<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,

示例：与 Set 一起使用 For...of 循环

在 JavaScript 中，set 包含唯一元素。这里，我们将包含数字的 array 作为 Set() 构造函数的参数传递，以创建 set。然后，我们使用 for...of 循环遍历 set。

<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,

示例：与 Map 一起使用 For...of 循环

map 在 JavaScript 中包含键值对，类似于 object。这里，我们创建了一个 map 并向其中插入了 3 个键值对。当我们使用 for...of 循环遍历 map 元素时，在每次迭代中，可以获取键和值，如下面的代码所示。

<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 循环来遍历像 array、string、map、set 等可迭代对象。