Convert ES6 Iterable to Array

Question

Say you have an array-like Javascript ES6 Iterable that you know in advance will be finite in length, what\'s the best way to convert that to a Javascript Array?

The

Answer 1

You can use Array.from or the spread operator.

Example:

let x = new Set([ 1, 2, 3, 4 ]);

let y = Array.from(x);
console.log(y); // = [ 1, 2, 3, 4 ]

let z = [ ...x ];
console.log(z); // = [ 1, 2, 3, 4 ]

Answer 2

You can use the Array.from method, which is being added in ES6, but only supports arrays and iterable objects like Maps and Sets (also coming in ES6). For regular objects, you can use Underscore's toArray method or lodash's toArray method, since both libraries actually have great support for objects, not just arrays. If you are already using underscore or lodash, then luckily they can handle the problem for you, alongside adding various functional concepts like map and reduce for your objects.

Answer 3

Summary:

• Array.from() function, it takes an iterable as in input and returns an array of the iterable.
• Spread operator: ... in combination with an array literal.

const map = new Map([[ 1, 'one' ],[ 2, 'two' ]]);

const newArr1  = [ ...map  ];  // create an Array literal and use the spread syntax on it
const newArr2 = Array.from( map );  // 

console.log(newArr1, newArr2); 

Caveat when copying arrays:

Be cognizant of the fact that via these methods above only a shallow copy is created when we want to copy an array. An example will clearify the potential issue:

let arr = [1, 2, ['a', 'b']];

let newArr = [ ...arr ];

console.log(newArr);

arr[2][0] = 'change';

console.log(newArr);

Here because of the nested array the reference is copied and no new array is created. Therefore if we mutate the nested array of the old array, this change will be reflected in the new array (because they refer to the same array, the reference was copied).

Solution for caveat:

We can resolve the issue of having shallow copies by creating a deep clone of the array using JSON.parse(JSON.stringify(array)). For example:

let arr = [1, 2, ['a', 'b']]

let newArr = Array.from(arr);

let deepCloneArr = JSON.parse(JSON.stringify(arr));

arr[2][0] = 'change';

console.log(newArr, deepCloneArr)

Answer 4

 <<Your_Array>> = [].concat.apply([], Array.from( <<Your_IterableIterator>> ));

Answer 5

The following approach is tested for Maps:

const MyMap = new Map([
  ['a', 1],
  ['b', 2],
  ['c', 3]
]);

const MyArray = [...MyMap].map(item => {
  return {[item[0]]: item[1]}
});

console.info( MyArray ); //[{"a", 1}, {"b", 2}, {"c": 3}]

Answer 6

You could also do:

let arr = [];
for (let elem of gen(...)){
    arr.push(elem);
}

Or "the hard way" using ES5 + generator function (Fiddle works in current Firefox):

var squares = function*(n){
    for (var i=0; i<n; i++){
        yield i*i;
    }
}

var arr = [];
var gen = squares(10);
var g;
while(true){
    g = gen.next();
    if (g.done){
        break;
    }
    arr.push(g.value);
}

Both are approaches are certainly not recommendable however and are merely a proof-of-concept.