Javascript 简明教程

JavaScript - For…​of Loop

JavaScript for…​of Loop

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

The for…​of loop in JavaScript is used to traverse elements of the iterable object. In each iteration, it gives an element of the iterable object. Iterable objects include arrays, strings, maps, sets, and generators.

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

The JavaScript for…​of loop is a much more efficient way to iterate over iterables than using a for…​in loop. The for…​of loop iterates over the property value while the for…​in loop is used to iterate through the keys (property name) of an object.

Syntax

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

The syntax of 'for…​of' loop in JavaScript in as follows −

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

Parameters

  1. ele − It is a current element of the iterable.

  2. of − It is a JavaScript operator.

  3. iterable − It is iterable like an object, array, string, etc.

Examples

Example: For…​of Loop with Arrays

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

In the example below, the array contains various strings. After that, we used the for…​of loop to traverse each array element. In the output, we can see that it prints each array element.

<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 循环用于遍历字符串中的每个字符。

In JavaScript, the string is also iterable as we can traverse through each character of the string. In the below code, for…​of loop is used to traverse through each character of the 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,

Example: For…​of Loop with Set

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

In JavaScript, the set contains a unique element. Here, we have passed the array containing numbers as a parameter of the Set() constructor to create a set. After that, we used the for…​of loop to traverse the 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,

Example: For…​of Loop with Map

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

The map contains the key-value pair in JavaScript and is similar to the object. Here, we created a map and inserted 3 key-value pairs in the map. When we use the for…​of loop to traverse the map elements in each iteration, we can get the key and value shown in the code below.

<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 循环遍历可迭代对象（例如数组、字符串、映射和集合）。

However, you can also use the for…​in loop to traverse the iterable like an array, string, map, set, etc.