Comment détecter si une variable est un tableau

Quelle est la meilleure méthode standard pour plusieurs navigateurs pour déterminer si une variable en JavaScript est un tableau ou non?

En recherchant sur le Web, il existe un certain nombre de suggestions différentes, certaines bonnes et quelques-unes invalides.

Par exemple, voici une approche de base:

function isArray(obj) {
    return (obj && obj.length);
}

Cependant, notez ce qui se passe si le tableau est vide ou si obj n'est en fait pas un tableau mais implémente une propriété length, etc.

Alors, quelle implémentation est la meilleure en termes de fonctionnement, de cross-browser et de performances efficaces?

La vérification de type des objets dans JS se fait via instanceof, ie

obj instanceof Array

Cela ne fonctionnera pas si l'objet est passé à travers les limites du cadre, car chaque cadre a son propre Arrayobjet. Vous pouvez contourner ce problème en vérifiant la propriété [[Class]] interne de l'objet. Pour l'obtenir, utilisez Object.prototype.toString()(cela est garanti pour fonctionner par ECMA-262):

Object.prototype.toString.call(obj) === '[object Array]'

Les deux méthodes ne fonctionneront que pour les tableaux réels et non pour les objets de type tableau comme les argumentslistes d'objets ou de nœuds. Comme tous les objets de type tableau doivent avoir une lengthpropriété numérique , je les vérifierais comme ceci:

typeof obj !== 'undefined' && obj !== null && typeof obj.length === 'number'

Veuillez noter que les chaînes passeront cette vérification, ce qui pourrait entraîner des problèmes car IE n'autorise pas l'accès aux caractères d'une chaîne par index. Par conséquent, vous souhaiterez peut-être passer typeof obj !== 'undefined'à typeof obj === 'object'pour exclure les primitives et les objets hôtes avec des types distincts de 'object'tous. Cela laissera toujours passer les objets string, qui devront être exclus manuellement.

Dans la plupart des cas, ce que vous voulez vraiment savoir, c'est si vous pouvez parcourir l'objet via des indices numériques. Par conséquent, il peut être judicieux de vérifier si l'objet a une propriété nommée à la 0place, ce qui peut être fait via l'une de ces vérifications:

typeof obj[0] !== 'undefined' // false negative for `obj[0] = undefined`
obj.hasOwnProperty('0') // exclude array-likes with inherited entries
'0' in Object(obj) // include array-likes with inherited entries

Le transtypage en objet est nécessaire pour fonctionner correctement pour les primitives de type tableau (c'est-à-dire les chaînes).

Voici le code pour des vérifications robustes pour les tableaux JS:

function isArray(obj) {
    return Object.prototype.toString.call(obj) === '[object Array]';
}

et objets de type tableau itérables (c'est-à-dire non vides):

function isNonEmptyArrayLike(obj) {
    try { // don't bother with `typeof` - just access `length` and `catch`
        return obj.length > 0 && '0' in Object(obj);
    }
    catch(e) {
        return false;
    }
}

L'arrivée d'ECMAScript 5e édition nous donne la méthode la plus sûre pour tester si une variable est un tableau, Array.isArray () :

Array.isArray([]); // true

Alors que la réponse acceptée ici fonctionnera dans les cadres et les fenêtres pour la plupart des navigateurs, ce n'est pas le cas pour Internet Explorer 7 et les versions antérieures , car Object.prototype.toStringappelé sur un tableau à partir d'une fenêtre différente reviendra [object Object], non [object Array]. IE 9 semble avoir régressé vers ce comportement également (voir le correctif mis à jour ci-dessous).

Si vous souhaitez une solution qui fonctionne sur tous les navigateurs, vous pouvez utiliser:

(function () {
    var toString = Object.prototype.toString,
        strArray = Array.toString(),
        jscript  = /*@cc_on @_jscript_version @*/ +0;

    // jscript will be 0 for browsers other than IE
    if (!jscript) {
        Array.isArray = Array.isArray || function (obj) {
            return toString.call(obj) == "[object Array]";
        }
    }
    else {
        Array.isArray = function (obj) {
            return "constructor" in obj && String(obj.constructor) == strArray;
        }
    }
})();

Ce n'est pas entièrement incassable, mais il ne serait brisé que par quelqu'un qui essaie de le casser. Cela fonctionne autour des problèmes dans IE7 et inférieur et IE9. Le bogue existe toujours dans IE 10 PP2 , mais il pourrait être corrigé avant la publication.

PS, si vous n'êtes pas sûr de la solution, je vous recommande de la tester à votre guise et / ou de lire le billet de blog. Il existe d'autres solutions potentielles si vous ne vous sentez pas à l'aise avec la compilation conditionnelle.

Crockford a deux réponses à la page 106 de «The Good Parts». Le premier vérifie le constructeur, mais donnera de faux négatifs sur différents cadres ou fenêtres. Voici le second:

if (my_value && typeof my_value === 'object' &&
        typeof my_value.length === 'number' &&
        !(my_value.propertyIsEnumerable('length')) {
    // my_value is truly an array!
}

Crockford souligne que cette version identifiera le argumentstableau comme un tableau, même s'il ne dispose d'aucune des méthodes de tableau.

Son analyse intéressante du problème commence à la page 105.

Il y a une autre discussion intéressante (post-Good Parts) ici qui comprend cette proposition:

var isArray = function (o) {
    return (o instanceof Array) ||
        (Object.prototype.toString.apply(o) === '[object Array]');
};

Toute la discussion me fait ne jamais vouloir savoir si quelque chose est ou non un tableau.

jQuery implémente une fonction isArray, ce qui suggère que la meilleure façon de le faire est

function isArray( obj ) {
    return toString.call(obj) === "[object Array]";
}

(extrait de jQuery v1.3.2 - légèrement ajusté pour avoir un sens hors contexte)

Voler le gourou John Resig et jquery:

function isArray(array) {
    if ( toString.call(array) === "[object Array]") {
        return true;
    } else if ( typeof array.length === "number" ) {
        return true;
    }
    return false;
}

Qu'allez-vous faire avec la valeur une fois que vous décidez qu'il s'agit d'un tableau?

Par exemple, si vous avez l'intention d'énumérer les valeurs contenues si cela ressemble à un tableau OU s'il s'agit d'un objet utilisé comme table de hachage, le code suivant obtient ce que vous voulez (ce code s'arrête lorsque la fonction de fermeture renvoie autre chose que "indéfini". Notez qu'il n'itère PAS sur les conteneurs COM ou les énumérations; cela reste un exercice pour le lecteur):

function iteratei( o, closure )
{
    if( o != null && o.hasOwnProperty )
    {
        for( var ix in seq )
        {
            var ret = closure.call( this, ix, o[ix] );
            if( undefined !== ret )
                return ret;
        }
    }
    return undefined;
}

(Remarque: "o! = Null" teste à la fois null et indéfini)

Exemples d'utilisation:

// Find first element who's value equals "what" in an array
var b = iteratei( ["who", "what", "when" "where"],
    function( ix, v )
    {
        return v == "what" ? true : undefined;
    });

// Iterate over only this objects' properties, not the prototypes'
function iterateiOwnProperties( o, closure )
{
    return iteratei( o, function(ix,v)
    {
        if( o.hasOwnProperty(ix) )
        {
            return closure.call( this, ix, o[ix] );
        }
    })
}

Si vous faites cela dans CouchDB (SpiderMonkey), utilisez

Array.isArray(array)

comme array.constructor === Arrayou array instanceof Arrayne fonctionne pas. L'utilisation array.toString() === "[object Array]"fonctionne mais semble assez douteuse en comparaison.

Si vous voulez plusieurs navigateurs, vous voulez jQuery.isArray .

Sur w3school, il y a un exemple qui devrait être assez standard.

Pour vérifier si une variable est un tableau, ils utilisent quelque chose de similaire à ceci

function arrayCheck(obj) { 
    return obj && (obj.constructor==Array);
}

testé sur Chrome, Firefox, Safari, ie7

L'une des versions les mieux étudiées et discutées de cette fonction se trouve sur le site PHPJS . Vous pouvez créer un lien vers des packages ou accéder directement à la fonction . Je recommande vivement le site pour des équivalents bien construits de fonctions PHP en JavaScript.

Pas assez de références égales aux constructeurs. Parfois, ils ont différentes références de constructeur. J'utilise donc des représentations sous forme de chaîne.

function isArray(o) {
    return o.constructor.toString() === [].constructor.toString();
}

Remplacer Array.isArray(obj)parobj.constructor==Array

échantillons:

Array('44','55').constructor==Array retourne vrai (IE8 / Chrome)

'55'.constructor==Array return false (IE8 / Chrome)