I mentioned using the SELectors API provided by the DOM in my article on browser redrawing and reordering from a performance perspective, Document. QuerySelectorAll () method is better than such as document. The getElementsByTagName () method of this kind of 2 ~ 6 times higher than that of performance in different browsers, . Reason is that the document querySelectorAll () method returns a NodeList (a node contains the matched to the array object), rather than a contains the real-time collection of HTML document structure, avoided the rearrangement or redraw brought by the HTML structure update operations. Redraw and rearrange are not the focus of this discussion, but those who are interested are welcome to move on: Front-end performance Optimization: Redraw and redraw browser renderings in detail.

We mentioned that NodeList is an array-like object. What is an array-like object? What’s the difference between a class array and an array? Between them and what ancient entanglements, mo panic, next let us use the code to find out…

What is a class array

An array-like object is an object that uses a naturally increasing integer as its key name and length as the number of elements.

Here’s an example:

var array = ['zhangsan'.'lisi'.'zhaoliu'];

var arrayLike = {
    0: 'zhangsan'.1: 'lisi'.2: 'zhaoliu'.length: 3
}
Copy the code

The arrayLike object in the code block is an array-like object (with indexes 0, 1, and 2 and a length attribute).

In the same code above, the array variable is a real array. It also contains several indexes and length attributes. Why is it an array and not an array? To understand this problem thoroughly, let’s compare data reading, length fetching, and their respective traversal

Class array and array data read

Using the above code block as an example, we read one of their values:

var arrayVal = array[0]); // name
var arrayLikeVal = arrayLike[0]; // name

array[0] = 'new name';
arrayLike[0] = 'new name';
Copy the code

The code is simple and doesn’t need to be explained too much, but the core conclusion is that the usage is very similar from the point of view of data fetching and value setting, whether it is fetching data or setting object property values.

Class array and array length get and itself traversal

Again, from a code perspective:

// Get the length
console.log(array.length); / / 3
console.log(arrayLike.length); / / 3

/ / traverse
for(var i = 0, len = array.length; i < len; i++) {
  / /...
}
for(var i = 0, len = arrayLike.length; i < len; i++) {
    // ...
}
Copy the code

As can be seen from the result, class array and array length value acquisition and traversal application is very similar.

We say very similar, not the same, because there are a lot of differences between class arrays and arrays. So, comparing their common usage, let’s look at the differences between arrays and class arrays.

It should be noted that arrays are actually much more efficient than class arrays when traversal is required. Therefore, if there is a need to traverse class arrays (such as traversing all elements in a NodeList collection), it is recommended to convert class arrays to arrays first and perform traversal to optimize performance.

The method call

Array.push() = array.push (); array.push () = array.push (); array.push ()

array.push('tianqi') // array = ['zhangsan', 'lisi', 'zhaoliu', 'tianqi']

arrayLike.push('tianqi') // arrayLike.push is not a function
Copy the code

That is, there is no push method in an array of classes. In fact, there is no array of any of the classes that operate on an array of classes, except for a few of the things mentioned above. So, an array of classes is an array of classes.

But what if I don’t want to use methods in an array of classes?

Call with the Call /apply method

We know that the call and apply methods can change this to refer to a real array, so we can use array methods on class arrays. Take the function.call method as an example:

var arrayLike = {
    0: 'name'.1: 'age'.2: 'sex'.length: 3
}

Array.prototype.join.call(arrayLike, ':'); // name:age:sex

Array.prototype.map.call(arrayLike, function(item){
    return  `${item}-map`;
});
// ["name-map", "age-map", "sex-map"]

Copy the code

Thus, we use the array method indirectly by changing the this pointer of the class array.

Class arrays are converted to arrays

The second way to get an array to use an array is to convert an array to a real array, and then you can use an array method, but this is actually a generalization of how an array is converted to an array, and it doesn’t have anything to do with how an array uses an array method.

There are several ways to convert an array of classes to an array, based on the property that partial array method calls return a new array:

// 1. slice
Array.prototype.slice.call(arrayLike); // ["name", "age", "sex"] 

// 2. splice
Array.prototype.splice.call(arrayLike, 0); // ["name", "age", "sex"] 

// 3. ES6 Array.from
Array.from(arrayLike); // ["name", "age", "sex"] 

// 4. concat
Array.prototype.concat.apply([], arrayLike)

// 5 ES6 ... Arguments can be converted to arrays when operators are used as function arguments
function translateArray(. arguments) {
    // ...
}
Copy the code

The above five methods are all methods of converting an array to an array. Except for the two methods provided by ES6, the other three methods rely on the principle that the functions themselves return a new array.

In fact, based on this feature, we can also use it to achieve the effect of fast copy array, the same way as array conversion array.

The final summary

In this section, we compare the usage of class array and array from the point of view of code, and summarize several kinds of array conversion to array and the method of using array in class array:

  • Class arrays are used similarly in ways of reading and setting values, fetching lengths, and traversing themselves.

  • There are no operation methods on class arrays.

  • You can use an array’s methods indirectly in an array of classes by changing the this pointer with the function. call or function. apply methods.

  • Based on the fact that some of the functions in an array return a new array, we can implement array-to-array conversions or make quick copies of arrays.

  • In fact, the efficiency of traversing array is much higher than class array, so when traversing an array of class, it is recommended to optimize the way to first convert the array to traversal requirements.

Due to the limited level, if there is incomplete or omission of mistakes, please criticize the readers, all the way you, very grateful!

Thanks to this era, we can stand on the shoulders of giants and peep out the magnificence of the program world. I would like to travel through the mountains and rivers of the program world with a pure heart! May every colleague who walks in the world of program live the way they want in their hearts, come on.