Usage and description of pseudo-arrays in JavaScript

Pseudo-arrays in JavaScript

1. What is a pseudo-array

There is a kind of class array, or pseudo-array, in JavaScript. The frequently seen pseudo-arrays include the arguments object of function, the NodeList class obtained (NodeList itself has the forEach method), etc.

A pseudo-array is not an array, it has no inheritance, but it "looks like an array", it does not have standard methods for arrays itself, but it can reuse these standard methods.

example

function arrayLike() {
    (a => (a));//TypeError:  is not a function
}
arrayLike(1, 2, 3);

As shown in the above example, the arguments object itself does not have a forEach method, but it can reuse these standard methods of arrays.

example

function arrayLike() {
    // (a => (a));
    [].(arguments, a => (a));// 1 2 3 Change this pointing through call and call the method of the array    [...arguments].forEach(a => (a));// 1 2 3  Build a real array and then call the array's method}
arrayLike(1, 2, 3);

2. How to create a pseudo-array object

An array object must have two characteristics:

• Have an integer length attribute with a range of 0~232-1
• The length attribute is greater than the maximum index of the object, and the index is an integer in the range 0-232 -2

So it is very simple. As long as these two characteristics are implemented, one object is a pseudo-array object.

example

const arr = { 1: 'AAA', 3: 'CCC', length: 8, }; [].(arr, (item, i) => (item, i)); //AAA 1 CCC 3

3. Concat method of array

For arrays and pseudo-arrays, in the standard methods of arrays, only the concat method is not universal. For a pseudo-array, the concat method will connect it as a whole.

example

([].(arr, [7, 8]));//[ { '1': 'AAA', '3': 'CCC', length: 8 }, 7, 8 ]
([1, 2].concat([7, 8]));//[ 1, 2, 7, 8 ]

The above example shows the different results of calling concat from arrays and pseudo-arrays. When encountering this situation, we only convert the pseudo-arrays ourselves, such as:

1. Copy the pseudo-array through the slice method

([].([].(arr), [7, 8]));
//[ <1 empty item>, 'AAA', <1 empty item>, 'CCC', <4 empty items>, 7, 8 ]

2. Change the default behavior when concat operations on pseudo-array objects

const arr = {
    1: 'AAA',
    3: 'CCC',
    length: 8,
    []: true,
};
([].(arr, [7, 8]));
//[ <1 empty item>, 'AAA', <1 empty item>, 'CCC', <4 empty items>, 7, 8 ]

JavaScript pseudo-array to true array

First, we will introduce two very simple and direct methods (pseudo-arrays are iterable objects):

[...Pseudo-array] // ES6's syntax sugar directly turns pseudo array (object) into true array(Pseudo-array) // ArrayStatic methods in，直接将Pseudo-array(Object)Turns into a true array

The following explains the difference between a pseudo-array and a true array, and also uses an array method to turn a pseudo-array into a true array:

The difference between a pseudo-array and a true array

• Pseudo-arrays are objects
• Pseudo-array prototype is an Object, not an Array
• So pseudo-arrays do not have array methods, such as push(), shift(), find(), etc.
• The attribute name of the pseudo-array is similar to the subscript of the array. It is represented by numbers such as 0, 1, 2, … and also has a length attribute.

Can array method objects be used? ==> Because most methods of arrays need to traverse the array, process and create a new array to put it back, and the call to array items arr[i] can also be used, so the pseudo-array object can adapt to some array methods

Pseudo-arrays are objects, so how do you use the array method? ==> You can use [].array method.call (pseudo-array, parameters...) or [].array method.apply (pseudo-array, parameters) to call

Therefore, using the similarities between pseudo-arrays and arrays (the attributes are similar to subscripts, and they have length attributes, and they can be called with [ ]), it is easy to use the array method to turn the pseudo-arrays into true arrays.

// Below I tried using the possible methods in the array and came up with the following methods that can turn a pseudo-array into an array// The arguments in the function are objects that store the function parameter list and special methods. It is a pseudo-array. We will try it as an example.// In actual application, if the pseudo-array is an iterable object, it is enough to directly use the first two simplest methods.
function fun1(v1, v2, v3) {
    ('-----------------arguments-------------------')
    (arguments) // Arguments { 0: 1, 1: 2, 2: 3, … }
    ((arguments)) // false
    ('------------------------------------')
    
    let x = null  // Define the variable x and receive the result after the pseudo-array conversion    
    // Simple method (pseudo-array is an iterable object)    x = [...arguments]
    
    x = (arguments)
    
    
    // Call array method    x = [].(arguments, v => true)
    
    x = [].(arguments, v => v)
    
    x = [].(arguments)


    // After calling each of the above methods, the pseudo array is successfully converted into a true array, and the true arrays they return are the same, as follows    (x) // Array(3) [ 1, 2, 3 ]
    ((x)) // true
} 

fun1(1, 2, 3)

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.