Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

Class array as a special JS existence, novice in the first contact with class array often there will be some doubts, what is the case of class array? What’s the difference between a class array and an array? Can I use it as an array? How do I convert a class array into a real array?

An array of class

JS class arrays are mainly divided into two classes:

  • Function argument objectargumentsThe arrow function does notargumentsparameter
function fn() {
    console.log(arguments);
}
Copy the code
  • usingquerySelectorAll,getElementsByNameTo get toNodeList, the use ofgetElementsByTagName,getElementsByClassNameTo get toHTMLCollection

HTML content:

<ul id="ul">
  <li name="li" class="li">11</li>
  <li name="li" class="li">22</li>
  <li name="li" class="li">33</li>
</ul>
Copy the code

Four types of arrays can be obtained:

document.querySelectorAll("li");
document.getElementsByTagName('li');
document.getElementsByClassName('li');
document.getElementsByName('li');
Copy the code

Class array && array

Use arguments as an Array representation to contrast with Array

Class array:

function fn() {
  console.log(arguments); // Arguments(2) [1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ] 
  console.log(arguments.length); / / 2
  console.log(typeof arguments); // object
  console.log(Object.prototype.toString.call(arguments)); // [object Arguments]
}

fn(1.2);
Copy the code

Array:

const arr = [1.2];
console.log(arr); / / (2) [1, 2]
console.log(arr.length); / / 2
console.log(typeof arr); // object
console.log(Object.prototype.toString.call(arr)); // [object Array]
Copy the code

We can see the similarities and differences between class arrays and arrays by printing above:

Thing in common:

All have the length attribute, you can get the number of its elements

Differences:

  1. There’s obviously one more class in the arraycalleeProperty does not exist on the array
  2. Class arrays cannot call array methods, as you can see from the following figure

You cannot use an array of classes as an array

Class array to array

Since the class array cannot use some of the array’s functions directly, we sometimes expect to take the class array and use it as an array. We can call some of the array’s functions, so what are the methods?

Borrowing an array method

You can use call and apply to change the this pointer to call the array’s methods

function fn() {
	console.log(Array.prototype.slice.call(arguments)); / / [1, 2]
}

fn(1.2);
Copy the code

First, we borrow the slice function of an array, which returns a real array

Array.from

You can convert an array of classes to an array using the from function that comes with arrays

cosnt arr = Array.from(arguments);
Copy the code

It returns an array

Extended operator

It can be used as follows:

const arr = [...arguments]
Copy the code

It can also be used directly when a function accepts arguments:

function fn(. args) {}
Copy the code

Now inside the function, args is an array