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>

在本教程中，我们已经看到了将迭代器转换为数组的三种不同方法。最好的方法是使用传播操作符，因为它还提供了另一种功能，如制作数组的克隆。