Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to transform a JavaScript iterator into an array?
In JavaScript, iterators are objects that implement the iterator protocol, allowing you to traverse through collections like Sets, Maps, or custom iterables. Unlike arrays, you cannot access iterator elements by index, so converting iterators to arrays is often necessary for easier manipulation.
Here are three effective methods to transform JavaScript iterators into arrays.
Using the for-of Loop
The for-of loop iterates through each element of an iterator. Inside the loop, you can access elements and push them to an array using the push() method.
Syntax
for (let element of iterator) {
array.push(element);
}
Example
In this example, we create an iterator from an array and then convert it back to an array using a for-of loop:
<html>
<body>
<h2>Using the for-of loop to transform JavaScript iterator into array</h2>
<div id="output"></div>
</body>
<script>
let output = document.getElementById('output');
let test_array = [10, 20, 30, 40, 50];
let iterator = test_array[Symbol.iterator]();
let array = [];
for (let element of iterator) {
array.push(element);
output.innerHTML += "Array element: " + element + "<br>";
}
output.innerHTML += "Complete array: [" + array + "]";
</script>
</html>
Array element: 10 Array element: 20 Array element: 30 Array element: 40 Array element: 50 Complete array: [10,20,30,40,50]
Using Array.from() Method
The Array.from() method creates an array from any iterable object. Simply pass the iterator as a parameter to convert it into an array.
Syntax
let array = Array.from(iterator);
Parameters
iterator - Any iterable object (Set, Map, custom iterator) to convert into an array.
Example
Here we convert a Set (which is iterable) into an array using Array.from():
<html>
<body>
<h2>Using Array.from() method to transform JavaScript iterator into array</h2>
<div id="output"></div>
</body>
<script>
let output = document.getElementById('output');
let test_set = new Set(["Hello", "Hi", 10, 20, 30, true, false]);
let array = Array.from(test_set);
output.innerHTML += "Original Set: " + [...test_set] + "<br>";
output.innerHTML += "Converted Array: [" + array + "]";
</script>
</html>
Original Set: Hello,Hi,10,20,30,true,false Converted Array: [Hello,Hi,10,20,30,true,false]
Using the Spread Operator
The spread operator (...) provides the most concise way to convert iterators to arrays. It spreads all elements from the iterator into a new array.
Syntax
let array = [...iterator];
Example with Map
Converting a Map iterator to an array. Each Map entry becomes a [key, value] pair in the array:
<html>
<body>
<h2>Using spread operator to transform Map iterator into array</h2>
<div id="output"></div>
</body>
<script>
let output = document.getElementById('output');
let test_map = new Map([["first", true], ["second", false], ["third", true]]);
let array = [...test_map];
output.innerHTML += "Map entries as array: <br>";
array.forEach(([key, value]) => {
output.innerHTML += "[" + key + ", " + value + "]<br>";
});
</script>
</html>
Map entries as array: [first, true] [second, false] [third, true]
Example with Set
Converting a Set to an array using the spread operator:
<html>
<body>
<h2>Using spread operator to transform Set iterator into 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 += "Set converted to array: [" + array + "]";
</script>
</html>
Set converted to array: [30,40,TypeScript,JavaScript]
Comparison of Methods
| Method | Syntax Complexity | Performance | Readability |
|---|---|---|---|
| for-of loop | High | Good | Verbose |
| Array.from() | Low | Good | Clear |
| Spread operator | Lowest | Best | Most concise |
Conclusion
The spread operator (...) is the most efficient and readable method for converting iterators to arrays. Use Array.from() when you need additional transformation options, and reserve the for-of loop approach for cases requiring custom logic during conversion.
2K+ Views
