This article has participated in the Denver Nuggets Creators Camp 3 “More Productive writing” track, see details: Digg project | creators Camp 3 ongoing, “write” personal impact

preface

We often hear people mention class array, also often encounter class array to true array how to turn the problem? To understand arrays of classes, we’re going to talk about arrays, so we’re going to explore that today

My simple understanding

My understanding is that JS array is a special data structure that uses a variable to store multiple data. It can obtain the data of the corresponding position by array subscript, and JS provides a series of properties and methods to operate the array.

An array of classes is just an array-like object; It’s essentially two things that look like each other an object and an array, and because it looks like an array, and it works like an array, people tend to call it an array.

Class array composition

Class arrays have several necessary components:

  1. The attribute should be an indexed (numeric) attribute;
  2. Must have the length attribute
  3. It is best to add the push and splice methods of arrays

Class array is not strange, function of the arguments is to belong to the class array, in DOM operations, we also often get a class array (such as the document. The getElementsByClassName ())

Let’s take a closer look. What’s in there?

Delve into

Start by defining a normal method and executing it, and look at print arguments

function fn(){
  console.log(arguments)
}
fn('a'.'b'.'c')
Copy the code

The results are as follows:

This confirms the two points we made above:

  1. Attributes must be indexed;
  2. Must have the length attribute

Let’s see if an array of classes can do something like an array

arguments[0] = 'Modify existing data by subscript';
arguments[3] =  "Add new data by subscript"
console.log(arguments)
console.log(arguments.length)/ / 3
Copy the code

The results are as follows

Notice that we modify, view, and add data to the class array by subscript, but this does not affect length. If you think about it, this is more like the basic property of an object, which is to access subscripts as other properties. It just looks like an array.

And let’s see if we can do array push

arguments.push("push");
Copy the code

The answer, as you might think, is no!

Uncaught TypeError: arguments. Push is not a function

If you think about one thing, it’s easy to understand. Let me ask you about some of the column methods we use in arrays (push, POP, Shift, splice, Join, concat… Etc.) are defined where? Is it defined on the prototype of the Array constructor, so that all Array instances can be used? Prototpe (); prototpe (); prototpe ();

Next we add a push method to Arguments

function fn() {
  arguments.push = Array.prototype.push;
  arguments.push('d');
  console.log(arguments)
}
fn('a'.'b'.'c')
Copy the code

Result: Add an array of classes for the push method, which dynamically increases the length property when pushing data.

In addition to arguments we can customize an array of classes as follows

// Create a custom array
var obj = {
  1: "a".2: 'b'.3: 'c'.length: 3.push: Array.prototype.push,
  splice: Array.prototype.splice
}
Copy the code

So one might say, why do we add splice here?

In fact, it was stated at the beginning that the last of the necessary parts of the class array should be push and splice. Push can dynamically grow the length property while pushing data, while splice? In some tutorials, you can make an array of classes look exactly like an array when printed. But my latest version of Google is printed out as an array:

But it doesn’t matter. Splice can add it or not.

Here is a pen test:

var obj = {
  2: 'a',
  3: 'b',
  length : 2,
  push: Array.prototype.push,
}
obj.push('c');
obj.push('d');
console.log(obj);
Copy the code

The answer might surprise you:

To understand the inner workings of push, we have to go back to when we manually encapsulated the push method

Array.prototype._push = function(){
    for(var i=0; i<arguments.length; i++){this[this.length] = arguments[i];
        this.length++
    }
    return this.length;
}
Copy the code

Length.length ++ = this.length [I]; length.length ++ = this.length [I]; length.length ++ So here’s the answer.

Finally, if you want to convert an array to a real array, read on:

A few ways to turn a class array into a real array

Call (obj) Array. The prototype. Slice.

When we talked about arrays, we can copy new arrays using the slice method

var arr = [1.2.3.4.5];
var newArr = arr.slice()
console.log(newArr);// intercepts the entire array [1,2,3,4,5];
Copy the code

Array. The from () method

var arr= Array.from(obj);
Copy the code

With ES6 extension operators…

var arr= [...obj];
Copy the code

These are three of the simplest and most common

END

So that’s arrays and arrays like

If you have any questions, please leave a message