JavaScript - Iterables 对象_JavaScript 菜鸟教程

在 JavaScript 中，可迭代( Iterables)对象是可以使用 for...of 循环。也可以使用其他方法（如 forEach（）、map（）等）迭代它们。

基本上，你可以在 JavaScript 中遍历可迭代对象的每个元素。

以下是一些常见的可迭代对象示例。

Array（数组）
String（字符串）
Map（地图）
Set（集）
Arguments（参数）
NodeList（节点列表）
TypedArrays（类型化数组）
Generators（发电机）

使用 for...of 循环

在本节中，我们将使用 for...of 循环。

示例：迭代数组

在下面的代码中，我们定义了一个数组并使用了 for...of 循环遍历数组。

该代码在输出中打印数组的每个元素。


<html>
<body>
	 	<div>Iterating the array: </div>
	 	<div id = "demo"></div>
	 	<script>
	 	 	 const output = document.getElementById("demo");
	 	 	 const array = ["Hello", "Hi", 10, 20, 30];
	 	 	 // Iterating array
	 	 	 for (let ele of array) {
	 	 	 	 	output.innerHTML += ele + ", ";
	 	 	 }
	 	</script>
</body>
</html>

输出

Iterating the array:
Hello, Hi, 10, 20, 30,

示例：迭代字符串

在下面的代码中，我们使用了 for...of 循环遍历每个字符串字符。

该代码在输出中打印逗号分隔的字符串字符。


<html>
<body> 	 	
	 	<div id = "demo">Iterating a string: </div>
	 	<script>
	 	 	 const output = document.getElementById("demo");
	 	 	 let str = "Hello";
	 	 	 // Iterating a string
	 	 	 for (let char of str) {
	 	 	 	 	output.innerHTML += char + ", ";
	 	 	 }
	 	</script>
</body>
</html>

输出

Iterating a string: H, e, l, l, o,

示例：迭代一个 Set

在此示例中，我们创建了一个包含多个元素的 set。之后，我们遍历 set 的每个元素并在输出中打印。


<html>
<body>
	 	<p id = "demo">Iterating the Set: 	</p>
	 	<script>
		 	 	 const output = document.getElementById("demo");
	 	 	 const set = new Set([10, 20, 30, 40, 40, 50, 50]);
	 	 	 // Iterating a Set
	 	 	 for (let ele of set) {
	 	 	 	 	output.innerHTML += ele + ", ";
	 	 	 }
	 	</script>
</body>
</html>

输出

Iterating the Set: 10, 20, 30, 40, 50,

示例：迭代 Map

在下面的示例中，我们定义了包含 3 个键值对的 map。在 for...of 循环中，我们从 map 中得到一个键值对。


<html>
<body>
	 	<div id = "demo">Iterating the Map: <br></div>
	 	<script>
	 	 	 const output = document.getElementById("demo");
	 	 	 const map = new Map([
	 	 	 	 	["1", "one"],
	 	 	 	 	["2", "two"],
	 	 	 	 	["3", "three"],
	 	 	 ]);
	 	 	 		
	 	 	 // Iterating array
	 	 	 for (let ele of map) {
	 	 	 	 	output.innerHTML += ele + "<br>";
	 	 	 }
	 	</script>
</body>
</html>

输出

Iterating the Map:
1,one
2,two
3,three

使用 forEach（）方法进行迭代

在本节中，我们使用了 forEach（） 方法来迭代可迭代对象。

例

在下面的示例中，我们将 forEach（）方法与数组结合使用，以迭代数组并在输出中打印数组的每个元素。


<html>
<body>
		 	<div> Using the forEach() method: </div>
	 	<div id="demo"></div>
	 	<script>
		 	 	 const output = document.getElementById("demo");
	 	 	 const array = [true, false, 50, 40, "Hi"];
	 	 	 // Iterating array
	 	 	 array.forEach((ele) => {
	 	 	 	 	output.innerHTML += ele + ", ";
	 	 	 })
	 	 </script>
</body>
</html>

输出

Using the forEach() method:
true, false, 50, 40, Hi,

使用 map（）方法进行迭代

在本节中，我们使用了 map（） 方法来迭代可迭代对象。

例

在下面的示例中，map（）方法与数组一起使用。在 map（）方法的回调函数中，我们打印数组元素。


<html>
<body>
	 	<p id = "demo">Using the map() method: </p>
	 	<script>
		 	 	 const output = document.getElementById("demo");
	 	 	 const array = [true, false, 50, 40, "Hi"];
	 	 	 // Iterating array
	 	 	 array.map((ele) => {
	 	 	 	 	output.innerHTML += ele + ", ";
	 	 	 })
	 	</script>
</body>
</html>

输出

Using the map() method: true, false, 50, 40, Hi,

但是，你可以使用循环遍历数组、字符串等，如 for 循环、while 循环等。JavaScript 还允许我们定义自定义迭代器来遍历可迭代对象。

<< JavaScript - WeakMap 对象 JavaScript - Reflect 对象 >>