In-depth understanding of javascript class array

js array is probably familiar to everyone, because it is used everywhere, but it has a "twin brother" called class array (also called pseudo-array). Some people may know it, while others may not. Let's take a look at it today.

What is an array-like

As the name suggests, this thing must be something that looks like an array, but it is not an array. So what is it? Actually, it is an object, an object that looks like an array.

The difference from array

What is the difference between a class array and an array:
1. All have length attributes
2. Class arrays can also be traversed by for loops, and some class arrays can also be traversed by for of
3. Class arrays do not have array prototype methods, so class arrays cannot call related array methods (such as push, slice, concat, etc.)

What are the types of arrays?

Common class arrays are

• Function arguments
• DOM list (also called HTMLCollection) obtained by getElementsByTagName, getElementsByClassName, getElementsByName, etc.
• NodeList node list obtained by querySelectorAll() method
  

Next, let's look at these three types of arrays.

arguments

arguments is a keyword in javascript. Refers specifically to the parameter set of a function, which includes all the parameters and other properties of the function. It does not need to be defined and can be used directly in the function body

function args(a, b, c) {
	console.log(arguments)
	console.log(typeof arguments)
	console.log({}.toString.call(arguments))
}

args('a', 'b', 'c')

Let's look at the output

It can be seen that arguments contains all parameters and has a length attribute. It can also be seen that its type is object, and after conversion to string it is object Arguments, which represents the Arguments object. At the same time, you can see that it also has an attribute callee, and the value of this attribute seems to be the function body we defined, so let's output it and see

function args(a, b, c) {
	console.log(arguments.callee)
}

args('a', 'b', 'c')

As you can see, the output is indeed our function itself. Since it represents itself, please do not call this property casually, because once called, it will continue to call itself and enter an infinite loop until the stack overflows. Like this

function args (a, b, c) {
 console.log(123)
 arguments.callee()
}

args('a', 'b', 'c')

DOM list (HTMLCollection)

This category refers to the collection of DOM lists obtained through getElementsByTagName or getElementsByClassName or getElementsByName.

<div>The weather is not very good today</div>
<div>Because it's raining</div>
<script>
 var domList = document.getElementsByTagName('div')
 console.log(domList)
 console.log(typeof domList)
 console.log({}.toString.call(domList))
</script>

It can be seen that domList also has a length attribute. And, after conversion to string, it is object HTMLCollection. Represents an HTMLCollection object

NodeList

A collection of nodes obtained through document.querySelectorAll()

<div class="abc">The weather is not very good today</div>
<div class="abc">Because it rains</div>
<script>
 var nodeList = document.querySelectorAll('div')
 console.log(nodeList)
 console.log(typeof nodeList)
 console.log({}.toString.call(nodeList))
</script>

It can be seen that nodeList also has a length attribute, and after being converted into a string, it is object NodeList, which represents a NodeList object. This object is an object that conforms to the Iterator interface specification, so it can be traversed by for...of (I will not explain what Iterator is here, you can go and see what Iterator is yourself)

Features

There is no prototype method for arrays, but when an array needs to call an array method to do anything, it can be done in the following way

• Use call and apply to borrow methods and borrow the respective methods of arrays
• Converts an array-like object to an array. Then call the array method

Call and apply to borrow methods

In fact, we have already used this method above. When converting a class array to a string, did we borrow the toString() method of the object above?

Let’s list a few more

function args(a, b, c) {
 Array.prototype.push.call(arguments, '123')
 console.log(arguments)
 Array.prototype.splice.call(arguments, 0, 1)
 console.log(arguments)
 Array.prototype.unshift.apply(arguments, [1,2,3])
 console.log(arguments)
}

args('a', 'b', 'c')

Array-like to Array

After converting the class array into an array, you can call the respective array methods at will, so how do you convert the class array into an array!

You can use some array methods to generate a new array

function args(a, b, c) {
 let arr = Array.prototype.slice.call(arguments)
 console.log(arr)
 arr = Array.prototype.concat.apply([], arguments)
 console.log(arr)
}

args('a', 'b', 'c')

Convert to an array using ES6's new method

ES6 adds a new Array.from method that can convert a class array into an array. A spread operator is also provided to expand an array-like object directly in an array.

function args(a, b, c) {
 let arr = Array.from(arguments)
 console.log(arr)
 arr = [...arguments]
 console.log(arr)
}

args('a', 'b', 'c')

Well, that's all about class arrays. Welcome to discuss it together.

Summarize

This is the end of this article about javascript class arrays. For more relevant javascript class array content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!