First, what is an Array Like?

A simple definition if an object haslengthProperty value, it is an array of classes

So what are the common class arrays?

This is common in the DOM, such as are of various kinds of element search API return array, such as the document. The getElementsByTagName, document. QuerySelectorAll and so on. In addition to DOM apis, arguments in function are also common arrays of classes

So how do you turn an array of classes into an array? This is a typical scenario for class array manipulation, as well as a typical interview question

We’ll use {length: 3} to illustrate the class array

Excerpt from Japanese [Q168] in JS how to convert a class array into an array. In addition, there are more front end questions here, welcome to exchange

ES6+

There is a very simple API in ES6: Array.from

// [undefined, undefined, undefined]
Array.from({ length: 3 })
Copy the code

There are simpler operators besides array. from… The extension operator, but it only works on iterable objects that have the Symbol(symbol.iterator) property value

Having the Symbol(symbol.iterator) attribute value means you can use for of to loop over

// Applies to iterable objects
[...document.querySelectorAll('div')]
Copy the code

But strictly speaking, it cannot convert an array of classes to an array, such as {length: 3}. It will throw an exception

// Uncaught TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator)){[...length: 3}]
Copy the code

ES5

Before we do that, instead of {length: 3}, we use the following data to represent the class array

const arrayLike = {
  0: 3.1: 4.2: 5.length: 3
}
Copy the code

In ES5 you can use the Array API to change this or arguments.

The most common conversion is array.prototype.slice

Array.prototype.slice.call(arrayLike)
Copy the code

Of course due to borrowingArray API, any API that takes an array as input and an array as output can do array conversion, such as

  • Array(use the arguments)
  • Array.prototype.concat(use the arguments)
  • Array.prototype.slice(use this)
  • Array.prototype.map(use this)
  • Array.prototype.filter(use this)
Array.apply(null, arrayLike)
Array.prototype.concat.apply([], arrayLike)
Array.prototype.slice.call(arrayLike)
Array.prototype.map.call(arrayLike, x => x)
Array.prototype.filter.call(arrayLike, x => 1)
Copy the code

Everything is fine at this point, except for one special case, sparse arrays. Before we do that, let’s ask ourselves how much of the following code is output

// How much does this code output
Array(100).map(x= > 1)
Copy the code

See Array(100).map(x => 1) for the result

Sparse Array

Using Array(n) creates a sparse Array that contains non-real elements to save space and is displayed as empty on the console, as shown below

[,,,] and Array(3) both return a sparse Array

> [,] [empty x3]
> Array(3[the empty x3]
Copy the code

When the class array is {length: 3}, any method that calls the class array this will return a sparse array, and any method that calls the class array arguments will return a dense array

conclusion

In summary, the most reliable way to convert an array of classes into an array is by following three methods

Array.from(arrayLike)
Array.apply(null, arrayLike)
Array.prototype.concat.apply([], arrayLike)
Copy the code

The following methods need to be considered for converting sparse arrays

Array.prototype.filter.call(divs, x => 1)
Array.prototype.map.call(arrayLike, x => x)
Array.prototype.filter.call(arrayLike, x => 1)
Copy the code

Note that the following methods are iterable objects

[...arrayLike]
Copy the code

I am Shanyue94. Please add shanyue94 on wechat to communicate with me. In addition, you can pay attention to my public account [The road to full stack Growth].