Qu'est-ce qu'un pseudo-tableau en javascript

En JavaScript, un pseudo-tableau, également appelé objet de type tableau, est un objet de type tableau qui stocke les données selon un index et possède un attribut de longueur. Parce qu'il s'agit d'un objet, un pseudo-tableau n'a pas l'attribut de longueur. fonctions push() et forEach d'un tableau () et d'autres méthodes.

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

Définition et caractéristiques du pseudo-tableau

Pseudo-tableau (ArrayLike), également connu sous le nom de tableau. Est un objet de type tableau qui stocke les données en fonction de l'index et possède une propriété de longueur. Mais il présente les caractéristiques suivantes.

• Stocker les données par index

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

• 具有length属性

  但是length

• a l'attribut length
  maislength n'est pas dynamique et ne changera pas à mesure que les membres changent

N'a pas de tableau push(), forEach() et d'autres méthodes

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

Pseudo-tableaux typiques courants, y compris l'ensemble des éléments DOM obtenus via $() dans jQuery, l'objet arguments dans la fonction et l'objet String.

Exemple :

    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

Comment convertir un pseudo-tableau en un vrai tableau

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

1. Parcourez et ajoutez un tableau vide

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

C'est relativement simple et facile à comprendre, mais les étapes sont légèrement lourdes.

2. Utilisez la méthode slice() du tableau [Recommandé]

    ;[].slice.call(arrLike);

ou

    Array.prototype.slice.apply(arrLike);

Utilisez slice() pour renvoyer un nouveau tableau, et utilisez call() ou apply() pour pointer son environnement vers le pseudo-tableau.

Notez qu'aucun attribut supplémentaire autre que la valeur d'index ne sera conservé dans le tableau renvoyé.

Par exemple, l'attribut de contexte dans le pseudo-tableau DOM obtenu par $() dans jQuery ne sera pas conservé après avoir été converti par cette méthode.

Simulez l'implémentation interne de 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 Modifiez le pointeur du prototype

    arrLike.__proto__ = Array.prototype;

De cette façon, arrLike hérite des méthodes d'Array.prototype, et vous pouvez utiliser push(), unshift() et autres. méthodes, valeur de longueur Cela changera également dynamiquement.

De plus, cette méthode de modification directe de la chaîne prototype conservera également tous les attributs du pseudo-tableau, y compris les attributs qui ne sont pas des valeurs d'index.

4. Méthode Array.from() dans ES2015

La méthode Array.from() crée une nouvelle instance de tableau à partir d'un objet de type tableau ou itérable.

    var arr = Array.from(arrLike);

Le résultat obtenu est similaire à la deuxième méthode, seuls les attributs contenus dans la valeur de l'index sont conservés. 🎜🎜【Apprentissage recommandé : 🎜Tutoriel avancé javascript🎜】🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!