How to convert pseudo arrays to arrays by ES6

Today, I would like to share with you the relevant knowledge points about how ES6 converts pseudo arrays into arrays. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

In ES6, you can use the from () method of an array type to convert a pseudo-array into an array, which converts an array-like object or traverable object into a real array, with the syntax "Array.from (pseudo-array object) .forEache (item= > console.log (item))".

The operating environment of this tutorial: windows7 system, ECMAScript version 6, Dell G3 computer.

A New feature of ECMAScript6-pseudo Array

What is a pseudo array: if all keys of an object are positive integers or zeros and have the length attribute, then the object is much like an array, called a pseudo array.

Typical pseudo arrays: arguments objects, most sets of DOM elements, and strings.

Example

Let arrayLike = {"0": "a", "1": "b", "2": "c", "length": 3}

Like the arrayLike object above, it has a length attribute, and key is also an ordered sequence.

So you can traverse, or you can query the length. But you cannot call the methods of an array. For example, push, pop and other methods.

Before ES6, there was another common pseudo array: arguments.

Arguments also looks like an array, but it has no array methods.

Arguments.push (1), for example, is bound to report an error.

How to convert pseudo arrays to arrays by ES6

In ES6, you can use the from method of type Array to convert pseudo arrays into arrays.

The Array.from () method is used to convert two types of objects into a real array:

1. Objects similar to arrays can be understood as "pseudo arrays"

2. Traversable objects (such as strings)

Test 1 Test 2 Test 3 / declare variable let variable, const constant let btns=document.getElementsByName ("button"); console.log ("btns", btns); / / get a pseudo array / / an exception occurs here: Uncaught TypeError:btns.forEach is not a function btns.forEach (item= > console.log (item)) Array.from (btns) .forEache (item= > console.log (item)) / / convert a pseudo array to an array

The main purpose of Array.from is to convert pseudo arrays and traverable objects into arrays.

The reason for saying "main function" is that Array.from also provides two parameters that can be passed. This can extend many kinds of tricks.

The second argument to Array.from is a function, similar to the map traversal method. For traversing.

The third parameter of Array.from accepts a this object that changes the this direction.

Usage of the third parameter (not commonly used)

Let helper = {diff: 1, add (value) {return value + this.diff; / / Note there is a this}}; function translate () {return Array.from (arguments, helper.add, helper);} let numbers = translate (1,2,3); console.log (numbers); / 2,3,4

Extended knowledge: convert strings into arrays

Let msg = 'hello';let msgArr = Array.from (msg); console.log (msgArr); / / output: ["h", "e", "l", "l", "o"] these are all the contents of the article "how ES6 converts pseudo arrays into arrays". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.