极客教程JavaScript 如何将一个迭代器转化为一个数组
在JavaScript中，迭代器是一个元素的集合，我们可以通过它进行迭代，每次迭代都可以访问一个元素。在JavaScript中，集合、地图或对象都是一个迭代器，我们不能像数组那样使用索引访问迭代器中的元素。
因此，我们首先需要将迭代器转换成数组。在这里，我们将使用不同的方法，比如array.from()，等等，将迭代器转换为数组。
使用for-of循环
for-of循环遍历迭代器中的每一个元素，即set和map。在for-of循环内部，我们可以访问元素并将其添加到数组中，我们可以使用push()方法将一个元素添加到数组中。
语法
用户可以按照下面的语法来使用for-of循环，将迭代器转换为数组。
for (let element of iterator) {
array.push(element);
}
在上面的语法中，我们在for-of循环中访问迭代器的元素，并将其推送到数组中。
例子1
在下面的例子中，我们创建了test_array，并用一些数字对其进行初始化。之后，我们使用Symbol.iterator()将数组转换为迭代器。
接下来，我们使用for-of循环来遍历迭代器。我们逐一访问迭代器中的所有元素并将它们推送到数组中。一旦for循环的所有迭代完成，我们就可以得到迭代器的全部数组。
<html>
<body>
<h2>Using the <i> for loop </i> to transform JavaScript iterator into the array</h2>
<div id = "output"> </div>
</body>
<script>
let output = document.getElementById('output');
let test_array = [10, 20, 30, 0, 50, 60, 70];
let iterator = test_array[Symbol.iterator]();
let array = [];
for (let element of iterator) {
array.push(element);
output.innerHTML += "Array element is - " + element + "<br>";
}
output.innerHTML += "The whole array is - " + array;
</script>
</html>
使用array.from()方法
Array.from()方法从迭代器中创建一个数组。我们需要传递迭代器对象作为array.from()方法的参数。它在将迭代器转换为数组后返回一个数组。
语法
用户可以按照下面的语法来使用array.from()方法将迭代器转换为数组。
let array = Array.from(test_set);
在上面的语法中，test_set是一个要转换为数组的迭代器。
参数
test_set - 它是一个要转换为数组的迭代器。
例子2
在下面的例子中，我们用各种元素创建了一个集合。之后，我们使用array.from()方法将该集合转换为数组。在输出中，用户可以看到从array.from()方法返回的数组。
<html>
<body>
<h2>Using the <i> Array.from() method </i> to transform JavaScript iterator into the array.</h2>
<div id = "output"> </div>
</body>
<script>
let output = document.getElementById('output');
let test_set = new Set(["Hello", "Hello", "Hi", 10, 10, 20, 30, 40, 40, true, false, true, true]);
let array = Array.from(test_set);
output.innerHTML += "The array from the test_set is " + array;
</script>
</html>
使用传播操作符
传播操作符也允许我们像array.from()方法一样将迭代器转换为数组。它将迭代器的所有元素复制到新的数组中。此外，我们还可以用它来制作一个数组的克隆。
语法
用户可以按照下面的语法来使用传播操作符，将迭代器转换成数组
let array = [...test_map];
在上述语法中，test_map是一个迭代器。
例子3
在下面的例子中，我们已经创建了具有唯一键和值的地图。我们可以使用键来访问地图上的特定值。
我们使用spread操作符将test_map转换为数组。在输出中，用户可以看到地图的每个键和值都被添加到数组中。
<html>
<body>
<h2>Using the <i> Spread operator </i> to transform JavaScript iterator into the array.</h2>
<div id = "output"> </div>
</body>
<script>
let output = document.getElementById('output');
var test_map = new Map([["first", true], ["second", false], ["third", false], ["fourth", true]]);
let array = [...test_map];
output.innerHTML += "The array from the test_map is " + array;
</script>
</html>
例四
在这个例子中，我们把集合的迭代器转换成数组。新的Set()构造函数被用来从数字、布尔值和字符串元素中创建一个集合。
之后，我们使用传播操作符将集合迭代器转换为数组。
<html>
<body>
<h2>Using the <i> Spread operator </i> to transform JavaScript iterator into the array.</h2>
<div id="output"> </div>
</body>
<script>
let output = document.getElementById('output');
let set = new Set([30, 40, "TypeScript", "JavaScript"])
let array = [...set]
output.innerHTML += "The array from the object is " + array;
</script>
</html>
在本教程中，我们已经看到了将迭代器转换为数组的三种不同方法。最好的方法是使用传播操作符，因为它还提供了另一种功能，如制作数组的克隆。