Understand javascript class array

The js array is familiar to everyone, because you have to use it wherever you go, but it has a "twin brother" called an array-like (also called a pseudo-array), some people may understand, some people don’t, today Let's take a look.

What is an array-like

As the name suggests, this thing must be something that looks like an array, but is not an array. What is that? In fact, it is just an object, a long object like an array.

Difference with array

What is the difference between that type of array and array:
1. Both have length attributes.
2. The class array can also be traversed by for loop. Some class arrays can also be traversed by for of.
3. The class array does not have the prototype method of the array, so the class array is not available. Call related array methods (eg push, slicec, concat, etc.)

What kind of arrays are there

Common arrays are

1. The parameters of the function
2. The dom list obtained by methods such as getElementsByTagName, getElementsByClassName, getElementsByName (also called HTMLCollection )
3. NodeList node list obtained by querySelectorAll() method

Next, let's take a look at these three types of arrays respectively

arguments

Arguments are a keyword of javascript. It refers specifically to the parameter set of the function, which contains 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 there is a length attribute. At the same time, it can be seen that its type is object, and after it is converted to string, it is object Arguments, which represents the Arguments object. At the same time, you can see that he also has an attribute callee, and the value of this attribute seems to be the function body we defined, then let's take a look at the output

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 yourself, please don't just call this attribute, because once you call it, you will continue to call yourself and enter an endless loop until the stack overflows. Like below

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>今天天气不太好</div>
<div>因为下雨了</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 converting to string, it is object HTMLCollection. Represents the HTMLCollection object

Node List (NodeList)

The collection of nodes obtained by document.querySelectorAll()

<div class="abc">今天天气不太好</div>
<div class="abc">因为下雨了</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 the nodeList also has the length attribute, and it is the object NodeList after being converted to the string, which represents the NodeList object. This object is an object in line with Iterator interface specification, so it can be for ... of traversal (Iterator is what I'm not here to talk, and we can see for yourself what is Iterator )

Features

The prototype method of the array does not exist for the class array, but when the class array needs to call the array method to do anything, the following methods can be used

• Use call, apply for method borrowing, and borrow the respective methods of the array
• Convert an array-like array to an array. Then call the array method

call, apply for method borrowing

In fact, we have already used this method above. When the class array is converted 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, then how to convert the class array into an array!

1. Some methods can be borrowed from the array 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')

2. Use ES6's new method to convert to an array
   ES6 adds a new Array.from method, which can convert a class array to an array. An expansion operator is also provided, which can directly expand an array-like array 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 for the array-like, welcome to discuss together