Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to transform a JavaScript iterator into an array?
In JavaScript, the iterator is a collection of elements through which we can iterate and access a single element every iteration. The set, map, or object is an iterator in JavaScript, and we can’t access the elements of the iterator using the index like the array.
So, we first require to convert the iterator into the array. Here, we will use different methods like an array.from(), etc., to convert an iterator to the array.
Use the for-of loop
The for-of loop iterates through every element of the iterator lie set and map. Inside the for-of loop, we can access the element and add it to the array, and we can use the push() method to add an element to the array.
Syntax
Users can follow the syntax below to use the for-of loop to convert the iterator to the array.
for (let element of iterator) {
array.push(element);
}
In the above syntax, we access the element of the iterator in the for-of loop and push it to the array
Example 1
In the example below, we have created the test_array and initialized it with some numbers. After that, we converted the array into the iterator using the Symbol.iterator().
Next, we used the for-of loop to iterate through the iterator. We access all the elements of the iterator one by one and push them to the array. Once all iterations of for loop are completed, we can get the full array of the iterator.
<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>
Use the array.from() method
The Array.from() method creates an array from the iterator. We need to pass the iterator object as a parameter of the array.from() method. It returns an array after converting the iterator to the array.
Syntax
Users can follow the syntax below to use the array.from() method to convert the iterator into the array.
let array = Array.from(test_set);
In the above syntax, test_set is an iterator to convert into the array.
Parameters
test_set – It is an iterator to convert into the array.
Example 2
In the example below, we have created the set using various elements. After that, we used the array.from() method to convert the set into the array. In the output, users can see the array returned from the array.from() method.
<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>
Use the spread operator
The spread operator also allows us to convert an iterator to an array like an array.from() method. It makes the copy of all elements of the iterator into the new array. Also, we can use it to make a clone of the array.
Syntax
Users can follow the syntax below to use the spread operator to convert the iterator into the array
let array = [...test_map];
In the above syntax, test_map is an iterator.
Example 3
In the example below, we have created the map with unique keys and values. We can access the particular value from the map using the key.
We have converted the test_map into the array using the spread operator. In the output, users can see that every key and value of the map is added to the array
<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>
Example 4
In this example, we convert the set iterator into the array. The new Set() constructor is used to create a set from the number, boolean, and string elements.
After that, we used the spread operator to convert the set iterator into an array.
<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>
In this tutorial, we have seen three different approaches to converting the iterator into an array. The best way is to use the spread operator as it also provides another functionality like making the clone of the array.
1K+ Views
