Usage of Array.from in JavaScript ES6

ES6 adds the from function to Array to convert other objects into arrays.

Of course, other objects also have requirements, not all of them. Both types of objects can be converted into arrays.

1. Deploy objects with the Iterator interface, such as Set, Map, and Array.

2. Array-like object. What is an array-like object? It means that an object must have a length attribute. Without length, the result will be an empty array.

Convert map

Convert the key-value pairs of the Map object into a one-dimensional array.

In fact, the sequence of converted array elements is key1, value1, key2, value2, key3, value3....

const map1 = new Map();
map1.set('k1', 1);
map1.set('k2', 2);
map1.set('k3', 3);
console.log('%s', Array.from(map1))

Result:

k1,1,k2,2,k3,3

Convert set

#Convert the elements of the Set object into an array.

const set1 = new Set();
set1.add(1).add(2).add(3)
console.log('%s', Array.from(set1))

Result

1,2,3

Convert string

You can disassemble the ascii string into a piece of data, or you can Accurately decompose unicode strings into arrays.

console.log('%s', Array.from('hello world'))
console.log('%s', Array.from('\u767d\u8272\u7684\u6d77'))

Result:

h,e,l,l,o, ,w,o,r,l,d
白,色,的,海

Array-like object

An array-like object must have length, their element attributes The name must be a numeric value or a character that can be converted to a numeric value.

Note: The attribute name represents the index number of the array. If there is no such index number, the corresponding element in the transferred array will be empty.

console.log('%s', Array.from({  0: '0',  1: '1',  3: '3',
  length:4}))

Result:

0,1,,3

If the object does not have a length attribute, then it will be converted into an empty array.

console.log('%s', Array.from({  0: 0,  1: 1}))

The result is an empty array.

When the object's attribute name cannot be converted into an index number.

console.log('%s', Array.from({
  a: '1',
  b: '2',
  length:2}))

The result is also an empty array

Array.from can accept three parameters

Let’s look at the definition:

Array.from(arrayLike[, mapFn[, thisArg]])

arrayLike: The converted object.

mapFn: map function.

thisArg: The object pointed to by this in the map function.

The second parameter, map function

is used to process each element in the conversion, and the processed result is The element values ​​of the result array.

console.log('%s', Array.from([1, 2, 3, 4, 5], (n) => n + 1))

Result:

The map function above actually adds 1 to each value in the array.

2,3,4,5,6

The third parameter, the object pointed to by this in the map function

This parameter is very useful, we can process it Separate data and processing objects, encapsulate various data processing methods into different objects, and use the same name for the processing methods.

When calling Array.from to convert the data object, different processing objects can be injected according to the actual situation to obtain different results, which is suitable for decoupling.

This approach is the application of template design pattern, which is somewhat similar to dependency injection.

let diObj = n + 2'%s'1, 2, 3, 4, 5

Result:

3,4,5,6,7

The above is the detailed content of Usage of Array.from in JavaScript ES6. For more information, please follow other related articles on the PHP Chinese website!