Javascript Array from()

Introduction

Array from() is used for converting array-like constructs into an array.

The first argument to Array.from() is an array like object.

It can be anything iterable or has a property length and indexed elements.

Strings will be broken up into an array of single characters

The Array.from() method creates a new, shallow-copied Array from an array-like or iterable object. 

Array.from(arrayLike [, mapFunction [, thisArg]])
  • arrayLike - An array-like or iterable object.
  • mapFunction - Optional, mapping function to call on every element of the array.
  • thisArg - Optional, value to use as this when executing mapFunction.

Array from a String 

const a = Array.from('foo'); 
console.log(a);

Array from an Array-like object (arguments) 

function f() {/*from  w w  w .j a v  a 2s .  co m*/
  return Array.from(arguments);
}
let a = f(1, 2, 3);
console.log(a);// [ 1, 2, 3 ]

Using arrow functions and Array.from() 

// Using an arrow function as the map function to manipulate the elements
let a = Array.from([1, 2, 3], x => x + x);      
console.log(a);// [2, 4, 6]

Generate a sequence of numbers 

let a = Array.from({length: 5}, (v, i) => i);
console.log(a);// [0, 1, 2, 3, 4]

console.log(Array.from("CSS"));

Sets and Maps can be converted into an new array instance using from() 

const m = new Map().set(1, 2) //from w  ww.j av a2s . co  m
                   .set(3, 4); 

const s = new Set().add(1) 
                   .add(2) 
                   .add(3) 
                   .add(4); 
        
console.log(Array.from(m));
console.log(Array.from(s));

Array.from() performs a shallow copy of an existing array 

const a1 = [1, 2, 3, 4];  /* w  w w  .  j  av  a  2 s .c  o  m*/
const a2 = Array.from(a1); 

console.log(a1);         // [1, 2, 3, 4]  
console.log(a1 === a2);  // false

Any iterable object can be used 

const iter = { // w  ww. ja va 2s  .  c o  m
              *[Symbol.iterator]() { 
                yield 1; 
                yield 2;  
                yield 3; 
                yield 4; 
              
              } 
}; 
console.log(Array.from(iter));  // [1, 2, 3, 4]

The arguments object can now easily be casted into an array: 

function getArgsArray() { 
   return Array.from(arguments); 
} 
console.log(getArgsArray(1, 2, 3, 4));  // [1, 2, 3, 4]

from() will use a custom object with required properties 

const arrayLikeObject = { /*www . j av  a  2s . c  om*/
              0: 1, 
              1: 2,  
              2: 3, 
              3: 4, 
              length: 4 
}; 
console.log(Array.from(arrayLikeObject));  // [1, 2, 3, 4]

Array.from() map function

Array.from() accepts a second optional map function argument.

This allows you to augment the new array's values without creating an intermediate array first.

A third optional argument specifies the value of this inside the map function. 

const a1 = [1, 2, 3, 4]; //from www .  j  av a  2s.c o m
const a2 = Array.from(a1, x => x**2);  
const a3 = Array.from(a1, function(x) {return x**this.exponent}, {exponent: 2}); 
console.log(a2);  // [1, 4, 9, 16]  
console.log(a3);  // [1, 4, 9, 16]



PreviousNext

Related