How to convert array-like object to array in javascript

In JavaScript, an array-like object refers to any object that has numeric keys and has a length property. For example, the NodeList object in the DOM and the arguments object in the function are array-like objects. In some cases, we need to convert array-like objects into real arrays to more conveniently manipulate data. This article will introduce three methods to convert array-like objects into arrays.

Method 1: slice method of array

The first method is to use the slice() method of the array, which can copy a section of elements from the start index to the end index to a new array middle. We can apply slice() method to array-like objects using call() or apply().

For example, we can use the following code to convert a NodeList object into an array:

const nodeList = document.querySelectorAll('li');
const array = Array.prototype.slice.call(nodeList);

In this example, we first use the querySelectorAll() method to get the NodeList object of the li element. Then, we convert the NodeList object into an array using the Array.prototype.slice.call() method.

Method 2: Use Array.from()

The second method is to use the Array.from() method. This method converts an array-like object or iterable object into a real array. The first parameter of the Array.from() method is the object to be converted, and the second parameter is an optional mapping function that will be applied to each element.

For example, we can use the following code to convert a NodeList object into an array:

const nodeList = document.querySelectorAll('li');
const array = Array.from(nodeList);

In this example, we first use the querySelectorAll() method to get the NodeList object of the li element. Then, we convert the NodeList object into an array using the Array.from() method.

Method 3: Use the spread operator

The third method is to use the spread operator…. This operator expands an iterable object into a series of arguments. We can apply it to an empty array and then insert the array-like object into that array.

For example, we can use the following code to convert a NodeList object into an array:

const nodeList = document.querySelectorAll('li');
const array = [...nodeList];

In this example, we first use the querySelectorAll() method to get the NodeList object of the li element. We then use the spread operator to convert the NodeList object into an array.

Summary

The above three methods can convert array-like objects into real arrays. When choosing a method, you should consider code readability and performance. If you need to convert large amounts of data, use a more performant method. If readability is more important, use a more readable method.

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