What is a pseudo array in javascript

In JavaScript, a pseudo-array, also known as an array-like object, is an array-like object that stores data according to an index and has a length attribute; because it is an object, the pseudo-array does not have the push of an array. (), forEach() and other methods.

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

Definition and characteristics of pseudo array

Pseudo array (ArrayLike), also known as array-like. Is an array-like object that stores data according to index and has a length property. But it has the following characteristics.

• Storing data by index

  0: xxx, 1: xxx, 2: xxx...

• Has the length attribute

  But the length attribute is not dynamic and will not change as the members change

• Methods such as push() and forEach() without arrays

  arrayLike.__proto__ === Object.prototype;   //true 
  arrayLike instanceof Object; //true 
  arrayLike instanceof Array; //false

Common typical pseudo-arrays, including the set of DOM elements obtained through $() in jQuery, functions The arguments object, and the String object.

Example:

    var arrLike = {
        0: 'a',
        1: 'b',
        2: 'c',
        length: 3,
    }
    arrLike[1]; //'a'
    arrLike.length; //3
    arrLike.push('d'); //Uncaught TypeError: arrLike.push is not a function

How to convert a pseudo array into a real array

    var arrLike = {
        0: 'a',
        1: 'b',
        2: 'c',
        length: 3,
    };

1. Traverse and add an empty array

    var arr = [];
    for(var i = 0; i < arrLike.length; i++){
        arr.push(arrLike[i]);
    }

Relatively simple and easy to understand, but the steps are a bit cumbersome.

2. Use slice() method of array [Recommended]

    ;[].slice.call(arrLike);

or

    Array.prototype.slice.apply(arrLike);

Use slice() to return a new array, use call() or apply() points its scope to a pseudo array.

Note that no additional attributes other than the index value will be retained in the returned array.

For example, the context attribute in the DOM pseudo array obtained by $() in jQuery will not be retained after being converted by this method.

Simulate the internal implementation of slice()

    Array.prtotype.slice = function(start, end){
        var result = new Array();
        var start = start | 0;
        var end = end | this.length;
        for(var i = start; i < end; i++){
            result.push(this[i]);
        }
        return result;
    }

3. Modify the prototype pointer

    arrLike.__proto__ = Array.prototype;

In this way, arrLike inherits the method in Array.prototype , you can use push(), unshift() and other methods, and the length value will also change dynamically.

In addition, this method of directly modifying the prototype chain will also retain all attributes in the pseudo array, including attributes that are not index values.

4. The Array.from() method in ES2015

The Array.from() method creates a new array instance from an array-like or iterable object. .

    var arr = Array.from(arrLike);

The result obtained is similar to the second method, only the attributes within the index value are retained.

[Recommended learning: javascript advanced tutorial]

The above is the detailed content of What is a pseudo array in javascript. For more information, please follow other related articles on the PHP Chinese website!