Shulou(Shulou.com)06/02 Report--

This article is about how to use Array.from () in JavaScript. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

There is a function in JavaScript: Array.from: allows useful conversions on JavaScript collections (such as arrays, class array objects, or iterable objects such as strings, map, set, etc.).

1. Introduction

Before we begin, let's recall the role of Array.from (). Syntax:

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

ArrayLike: a required parameter, a pseudo-array object or iterable object that you want to convert to an array.

MapFunction: optional parameter, mapFunction (item,index) {...} is the function called on each item in the collection. The returned value is inserted into the new collection.

ThisArg: optional parameter, this object when executing the callback function mapFunction. This parameter is rarely used.

For example, let's multiply each item in the class array by 2:

Const someNumbers = {'0: 10,'1: 15, length: 2}; Array.from (someNumbers, value = > value * 2); / / = > [20,30]

two。 Convert a class array to an array

The first use of Array.from () is to convert class array objects into arrays.

Usually, the class array objects you will encounter are: the arguments keyword in the function, or a DOM collection.

In the following example, let's sum the parameters of the function:

Function sumArguments () {return Array.from (arguments). Reduce ((sum, num) = > sum + num);} sumArguments (1,2,3); / / = > 6

Array.from (arguments) converts the class array object arguments into an array and then uses the reduce method of the array to sum.

In addition, the first parameter of Array.from () can be any iterable object, so let's move on to some examples:

Array.from ('Hey'); / / > [' one', 'eBay,' y'] Array.from (new Set (['one',' two'])); / / > ['one',' two'] const map = new Map (); map.set ('one', 1) map.set (' two', 2); Array.from (map); / / > ['one', 1], [' two', 2]]

3. Clone an array

There are many ways to clone arrays in JavaScript. As you might expect, Array.from () can easily implement a shallow copy of an array.

Const numbers = [3,6,9]; const numbersCopy = Array.from (numbers); numbers = numbersCopy; / / = > false

Array.from (numbers) creates a shallow copy of the numbers array, and the result of numbers = = numbersCopy is false, meaning that although numbers and numbersCopy have the same items, they are different array objects.

Can I use Array.from () to create clones of arrays, including all nested ones? Challenge!

Function recursiveClone (val) {return Array.isArray (val)? Array.from (val, recursiveClone): val;} const numbers = [[0,1,2], ['one',' two', 'three']]; const numbersClone = recursiveClone (numbers); numbersClone; / / = > [[0,1,2], [' one', 'two',' three']] numbers [0] = = numbersClone [0] / / = > false

RecursiveClone () can make a deep copy of an array by determining whether the item of the array is an array, and if it is an array, it continues to call recursiveClone () to achieve a deep copy of the array.

Can you write a deep copy of an array that is shorter than using Array.from () recursive copy? If you can, please write it in the comments section below.

4. Populate the array with values

If you need to initialize the array with the same value, then Array.from () would be a good choice.

Let's define a function and create an array filled with the same default values:

Const length = 310 Const init = 0th Const result = Array.from ({length}, () = > init); result; / / = > [0,0,0]

Result is a new array with a length of 3 and each item of the array is 0. Call the Array.from () method, passing in a class array object {length} and a mapFunction function that returns the initialization value.

However, there is an alternative method, array.fill (), that does the same thing.

Const length = 310 Const init = 0x Const result = Array (length) .fill (init); fillArray2 (0,3); / / = > [0,0,0]

Fill () populates the array correctly with initial values.

4.1 populate the array with objects

When each item in the initialized array should be a new object, Array.from () is a better solution:

Const length = 310 Const resultA = Array.from ({length}, () = > ({})); const resultB = Array (length). Fill ({}); resultA; / / = > [{}, {}, {}] resultB; / / > [{}, {}, {}] resultA [0] = resultA [1]; / / > falseresultB [0] = resultB [1]; / / = > true

The resultA returned by Array.from is initialized with a different empty object instance. This happens because mapFunction, that is, () = > ({}) here, returns a new object each time it is called.

The resultB created by the fill () method is then initialized with the same empty object instance. Null items are not skipped.

4.2 how about using array.map?

Is it possible to do this using the array.map () method? Let's try it:

Const length = 310 Const init = 0x Const result = Array (length). Map (() = > init); result; / / = > [undefined, undefined, undefined]

The map () method does not seem normal, and the array created is not the expected [0,0,0], but an array with three empty items.

This is because Array (length) creates an array with three empty items (also known as a sparse array), but the map () method skips null items.

5. Generate numeric range

You can use Array.from () to generate a range of values. For example, the following range function generates an array starting at 0 through end-1.

Function range (end) {return Array.from ({length: end}, (_, index) = > index);} range (4); / / = > [0,1,2,3]

In the range () function, Array.from () provides an array-like {length:end}, and a map function that simply returns the current index. So you can generate a range of values.

6. Array deduplication

Because the input parameter of Array.from () is an iterable object, we can use it in combination with Set to quickly remove duplicates from the array.

Function unique (array) {return Array.from (new Set (array));} unique ([1,1,2,3,3]); / / = > [1,2,3]

First, new Set (array) creates a collection that contains arrays, and the Set collection removes duplicates.

Because the Set collection is iterable, you can use Array.from () to convert it to a new array.

In this way, we implement the array de-duplication.

7. Conclusion

The Array.from () method accepts class array objects and iteratable objects, it can accept a map function, and the map function does not skip numeric items with a value of undefined. These features offer many possibilities for Array.from ().

As mentioned above, you can easily convert a class array object to an array, clone an array, populate the array with initialization, generate a range, and deduplicate the array.

In fact, Array.from () is a very good design, flexible configuration, and allows a lot of collection transformations.

Thank you for reading! This is the end of the article on "how to use Array.from () in JavaScript". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.