JavaScript - 可迭代对象
在 JavaScript 中，iterables 是可以使用 for...of 循环遍历的对象。它们也可以使用其他方法如 forEach()、map() 等进行遍历。
基本上，你可以遍历 JavaScript 中 iterable 的每个元素。
以下是一些常见的 iterable 示例。
- Array
- String
- Map
- Set
- Arguments
- NodeList
- TypedArrays
- Generators
使用 for...of 循环遍历
在本节中，我们将使用 for...of 循环遍历 array 元素、string 字符、set 元素以及 map 的键值对。
示例：遍历 array
在下面的代码中，我们定义了一个 array，并使用 for...of 循环遍历该 array。
代码会在输出中打印 array 的每个元素。
<html>
<body>
<div>遍历 array：</div>
<div id = "demo"></div>
<script>
const output = document.getElementById("demo");
const array = ["Hello", "Hi", 10, 20, 30];
// 遍历 array
for (let ele of array) {
output.innerHTML += ele + ", ";
}
</script>
</body>
</html>
输出
遍历 array： Hello, Hi, 10, 20, 30,
示例：遍历 string
在下面的代码中，我们使用 for...of 循环遍历每个 string 字符。
代码会在输出中打印用逗号分隔的 string 字符。
<html>
<body>
<div id = "demo">遍历 string：</div>
<script>
const output = document.getElementById("demo");
let str = "Hello";
// 遍历 string
for (let char of str) {
output.innerHTML += char + ", ";
}
</script>
</body>
</html>
输出
遍历 string：H, e, l, l, o,
示例：遍历 set
在这个示例中，我们创建了一个包含多个元素的 set。然后，我们遍历 set 的每个元素并在输出中打印。
<html>
<body>
<p id = "demo">遍历 Set： </p>
<script>
const output = document.getElementById("demo");
const set = new Set([10, 20, 30, 40, 40, 50, 50]);
// 遍历 Set
for (let ele of set) {
output.innerHTML += ele + ", ";
}
</script>
</body>
</html>
输出
遍历 Set：10, 20, 30, 40, 50,
示例：遍历 map
在下面的示例中，我们定义了一个包含 3 个键值对的 map。在 for...of 循环的每次迭代中，我们从 map 中获取一个键值对。
<html>
<body>
<div id = "demo">遍历 Map：<br></div>
<script>
const output = document.getElementById("demo");
const map = new Map([
["1", "one"],
["2", "two"],
["3", "three"],
]);
// 遍历 map
for (let ele of map) {
output.innerHTML += ele + "<br>";
}
</script>
</body>
</html>
输出
遍历 Map： 1,one 2,two 3,three
使用 forEach() 方法遍历
在本节中，我们使用 forEach() 方法遍历 iterable。
示例
在下面的示例中，我们使用 forEach() 方法与 array 一起遍历 array，并在输出中打印 array 的每个元素。
<html>
<body>
<div>使用 forEach() 方法：</div>
<div id="demo"></div>
<script>
const output = document.getElementById("demo");
const array = [true, false, 50, 40, "Hi"];
// 遍历 array
array.forEach((ele) => {
output.innerHTML += ele + ", ";
})
</script>
</body>
</html>
输出
使用 forEach() 方法： true, false, 50, 40, Hi,
使用 map() 方法迭代
在本节中，我们使用了 map() 方法来迭代可迭代对象。
示例
在下面的示例中，map() 方法与 array 一起使用。在 map() 方法的回调函数中，我们打印数组元素。
<html>
<body>
<p id = "demo">Using the map() method: </p>
<script>
const output = document.getElementById("demo");
const array = [true, false, 50, 40, "Hi"];
// 迭代数组
array.map((ele) => {
output.innerHTML += ele + ", ";
})
</script>
</body>
</html>
输出
Using the map() method: true, false, 50, 40, Hi,
不过，你也可以使用 for 循环、while 循环等循环来遍历 array、string 等。JavaScript 还允许我们定义自定义迭代器来遍历可迭代对象。