Comment vérifier si un objet est un tableau en JavaScript : les 3 meilleures méthodes

Comment vérifier si un objet est un tableau en JavaScript : guide complet

Avez-vous déjà pensé : « J'ai pourtant passé un tableau, mais le code plante avec une erreur » ? Situation familière. En JavaScript, les tableaux sont des objets, et une simple vérification avec typeof ne fonctionnera pas ici. Aujourd'hui, nous allons analyser trois méthodes principales pour vérifier si un objet est un tableau, et déterminer laquelle utiliser dans des projets réels.

Pourquoi typeof ne convient-il pas ?

Avant de plonger dans les détails, comprenons pourquoi les débutants trébuchent souvent sur ce point. En JavaScript, les tableaux sont un cas particulier d'objets. Par conséquent, l'opérateur typeof pour un tableau renverra "object", et non "array". Essayez par vous-même :

const arr = [1, 2, 3];\nconsole.log(typeof arr); // "object" — inutile

De plus, typeof null === "object" est un bug connu du langage qui ne sera pas corrigé. Donc, si vous vérifiez des données provenant d'un utilisateur ou d'une API, vous ne pouvez pas vous fier à typeof. Des méthodes plus fiables sont nécessaires.

Méthode 1 : Array.isArray() — le standard moderne

Depuis ES5 (2009), JavaScript dispose de la méthode intégrée Array.isArray(). C'est la manière la plus correcte et la plus simple de vérifier si un objet est un tableau.

const arr = [10, 20, 30];\nconst notArr = { length: 3, 0: 'a', 1: 'b', 2: 'c' };\n\nconsole.log(Array.isArray(arr));    // true\nconsole.log(Array.isArray(notArr)); // false\nconsole.log(Array.isArray('hello')); // false\nconsole.log(Array.isArray(null));    // false

Pourquoi est-ce le meilleur choix ? Parce que Array.isArray() fonctionne correctement même dans des scénarios complexes : si le tableau provient d'une autre iframe ou d'un autre cadre, instanceof peut échouer, mais pas Array.isArray(). Il vérifie le type interne [[Class]] de l'objet, et non la chaîne de prototypes.

Support des navigateurs

Cette méthode est prise en charge par tous les navigateurs modernes, y compris Internet Explorer 9+. Si vous devez prendre en charge des navigateurs très anciens (IE 8 et inférieur), utilisez un polyfill ou la troisième méthode.

Méthode 2 : instanceof Array — le classique

L'opérateur instanceof vérifie si le prototype Array.prototype est présent dans la chaîne de prototypes de l'objet. Cela semble compliqué, mais en pratique, cela fonctionne ainsi :

const arr = [1, 2, 3];\nconsole.log(arr instanceof Array); // true\n\nconst obj = { a: 1 };\nconsole.log(obj instanceof Array); // false\n\n// Et voici la surprise :\nconst iframeArr = new iframe.contentWindow.Array(1, 2, 3);\nconsole.log(iframeArr instanceof Array); // false ! (si le tableau provient d'une autre iframe)

Voici le piège : si votre page contient plusieurs iframes ou si vous travaillez avec des Web Workers, les tableaux provenant de différents contextes globaux ont des prototypes différents. instanceof ne tient pas compte de cela et peut renvoyer false pour un véritable tableau. Par conséquent, dans le développement moderne, il est préférable d'abandonner instanceof pour la vérification des tableaux.

Méthode 3 : Object.prototype.toString.call() — le soldat universel

Cette méthode était utilisée avant l'apparition de Array.isArray(). Elle est toujours pertinente si vous devez écrire un polyfill ou travailler dans un environnement où Array.isArray n'est pas disponible.

function isArray(obj) {\n  return Object.prototype.toString.call(obj) === '[object Array]';\n}\n\nconsole.log(isArray([1, 2]));      // true\nconsole.log(isArray({ a: 1 }));    // false\nconsole.log(isArray('string'));    // false\nconsole.log(isArray(null));        // false

Comment cela fonctionne-t-il ? La méthode toString de l'objet Object.prototype renvoie une chaîne de la forme [object Type]. Pour les tableaux, c'est toujours [object Array]. Cette méthode contourne le problème des iframes, car elle vérifie le type interne de l'objet.