Array.from (Array.

Used to turn two types of objects into true arrays.

  • Array-like objects
  • Iterable objects (including the new ES6 data structures Set and Map).

1. Array-like objects are converted to real arrays using array. from.

let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3 }; Var arr1 = []; / / / 'a', 'b', 'c'] / / written ES6 let arr2 = Array. The from (arrayLike); // ['a', 'b', 'c']Copy the code

The usual array-like objects are the collection of Nodelists returned by DOM operations, and the Arguments object inside the function. Array.from can turn them into real arrays.

/ / the NodeList object let ps = document. QuerySelectorAll (" p "); Array.from(ps).forEach(function (p) { console.log(p); }); Function foo() {var args = array. from(arguments); / /... }Copy the code

In the above code, the querySelectorAll method returns an array-like object. You can only use the forEach method if you convert the object into a real array.

2. Array.from can convert any data structure that has an Iterator interface to an Array.

// ['h', 'e', 'l', 'l', 'o']
let namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']
Copy the code

In the above code, the string and Set structures have an Iterator interface and can therefore be converted from array. from to a true Array. If the argument is a real Array, array. from returns a new Array that is exactly the same.

Array.from([1, 2, 3])
// [1, 2, 3]
Copy the code

Extension operator (…) You can also convert certain data structures into arrays.

Function foo() {var args = [...arguments]; } / / NodeList object [... document querySelectorAll (' div ')]Copy the code

The interface called behind the extension operator (Symbol. Iterator) cannot be transformed if an object is not deployed with this interface.

3. The array. from method supports array-like objects.

The only essential characteristic of an array-like object is that it must have a length attribute. Therefore, any object with a length attribute can be converted to an Array by the array. from method, but the extension operator cannot.

Array.from({ length: 3 }); // [ undefined, undefined, undefined ]Copy the code

In the above code, array. from returns an Array with three members, each of which is undefined. The extension operator does not convert this object. For browsers that have not yet deployed this method, the array.prototype.slice method can be used instead.

const toArray = (() =>

Array.from ? Array.from : obj => []

Copy the code

4.Array.from can also take a second argument, which acts like an Array’s map method, processing each element and putting the processed value into the returned Array.

Array.from(arrayLike, x => x * x); Array.from(arrayLike).map(x => x * x); Array. From ([1, 2, 3], (x) => x * x) // [1, 4, 9] let spans = document.querySelectorAll(''); // map() let names1 =, s => s.textContent); // array. from() let names2 = array. from(SPANS, s => s.spans) The following example converts an Array member with a False Boolean to 0. Array.from([1, , 2, , 3], (n) => n || 0) // [1, 0, 2, 0, 3]Copy the code

Another example is the types of data that are returned.

function typesOf () {
return Array.from(arguments, value => typeof value)
typesOf(null, [], NaN)
// ['object', 'object', 'number']
Copy the code

If the map function uses the this keyword, you can also pass the third argument to array. from to bind this.

5.array.from () can turn various values into true arrays and also provides map functionality.

What this really means is that as long as you have an original data structure, you can work with its values and then convert it into a canonical array structure, and then you can use a large number of array methods.

Array.from({ length: 2 }, () => 'jack')

// ['jack', 'jack']
Copy the code

In the above code, the first argument to array. from specifies the number of times the second argument is run. This feature makes the use of the method very flexible. Another application of array.from () is to convert a string into an Array and then return the length of the string. Because it handles Unicode characters correctly, it avoids the JavaScript bug of counting Unicode characters greater than \uFFFF as two characters.

function countSymbols(string) {
return Array.from(string).length;
Copy the code