JavaScript - For...of 循环_JavaScript 菜鸟教程

JavaScript for...of 循环

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

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

语法

'for...of' 循环，如下所示 -

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

参数

ele − 它是 iterable 的当前元素。
of − 它是一个 JavaScript 运算符。
iterable − 它是可迭代的，就像对象、数组、字符串等一样。

例子

示例：带数组的 for...of 循环

在下面的示例中，数组包含各种字符串。之后，我们使用了 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

示例：带字符串 for...of 循环

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

示例：带 Set 的 for...of 循环

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

示例：带地图的 for...of 循环

该映射包含 JavaScript 中的键值对，并且类似于对象。在这里，我们创建了一个 map 并在 map 中插入了 3 个键值对。当我们使用 for...of 循环遍历每次迭代中的 map 元素，我们可以得到下面代码中显示的 key 和 value。

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

<< JavaScript - For...in 循环 JavaScript - 循环控制 >>