How to convert pseudo array to array in ES6

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

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

ECMAScript6 new features - pseudo array

What is a pseudo array: If all the keys of an object are positive integers or zero, and there is a length attribute, then this object Just like an array, it is called a pseudo array.

Typical pseudo-arrays: arguments objects, most DOM element sets, and strings.

Example

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

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

So you can traverse and query the length. But you cannot call array methods. Such as push, pop and other methods.

Before ES6, there was also a common pseudo-array: arguments.

arguments also looks like an array, but it does not have array methods.

For example, arguments.push(1), this will definitely report an error.

How to convert a pseudo array into an array in ES6

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

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

1. Array-like objects can be understood as "pseudo arrays"

2. Traversable objects (such as strings)

  <button name="button">测试1</button>
    <br/>
    <button name="button">测试2</button>
    <br/>
    <button name="button">测试3</button>
    <br/>
<script>
//声明变量let变量，const常量
let btns=document.getElementsByName("button");
console.log("btns",btns);//得到一个伪数组
//此处出现异常:Uncaught TypeError:btns.forEach is not a function 
btns.forEach(item=>console.log(item))
</script>
<script>
Array.from(btns).forEache(item=>console.log(item))//将伪数组转换为数组
</script>

The main function of Array.from is to convert pseudo arrays and traversable objects into arrays.

The reason why we say "main function" is because Array.from also provides 2 parameters to pass. This can extend many kinds of small gameplay.

• The second parameter of Array.from is a function, similar to the map traversal method. Used to traverse.

• The third parameter of Array.from accepts a this object, which is used to change the this pointer.

Usage of the third parameter (not commonly used)

let helper = {
 diff: 1,
 add (value) {
  return value + this.diff; // 注意这里有个 this
 }
};

function translate () {
 return Array.from(arguments, helper.add, helper);
}

let numbers = translate(1, 2, 3);

console.log(numbers); // 2, 3, 4

Expand knowledge: convert string into array

let msg = 'hello';
let msgArr = Array.from(msg);
console.log(msgArr);
// 输出: ["h", "e", "l", "l", "o"]

[Related recommendations:javascript video tutorial、web front-end】

The above is the detailed content of How to convert pseudo array to array in ES6. For more information, please follow other related articles on the PHP Chinese website!