Apply your JS skills to key Mozilla projects as an MDN Fellow! http://mzl.la/MDNFellowship

mozilla
Vos résultats de recherche

    Array

    Résumé

    Les objets globaux Array sont des constructeurs pour tableaux, qui sont des objets de haut-niveau (en termes de complexité homme-machine) et qui sont semblables à des listes.

    Syntaxe

    [element0, element1, ..., elementN]
    new Array(element0, element1[, ...[, elementN]])
    new Array(arrayLength)
    element0, element1, ..., elementN
    Un tableau est initialisé avec les éléments donnés, sauf dans le cas où un argument seul est passé au constructeur Array et que l'argument est un nombre. (Voir ci-après.) Notez que ce cas spécial s'applique aux tableaux créés avec le constructeur Array, pas avec des tableaux créés avec des littéraux qui utilisent les crochets.
    arrayLength
    Si le premier argument passé au constructeur Array est un entier entre 0 et 232-1 (inclus), un nouveau tableau sera créé avec ce nombre d'éléments. Si l'argument est un autre nombre, une exception RangeError sera levée.

    Description

    Les tableaux JavaScript sont des objets semblables à une liste et possèdent plusieurs méthodes incorporées pour exécuter des opérations de parcours et de modification. Ni la taille d'un tableau ni les types de ses éléments n'est fixé. Puisque la  dimension d'un tableau peut augmenter ou diminuer à tout moment, les tableaux ne sont pas garantis d'être compacts. En général, cela permet de couvrir plusieurs cas pratiques. En revanche si cette compacité est nécessaire pour votre cas d'utilisation, vous pourriez envisager d'utiliser les tableaux typés.

    Notez que vous ne devriez pas considérer un tableau comme un tableau associatif (en anglais). Vous pouvez utiliser des objets classiques à la place pour obtenir ce comportements (cette approche n'est pas sans inconvénient non plus, mais c'est la plus pertinente). Voir le billet sur les dictionnaires légers en JavaScript avec des clés arbitraires par exemple.

    Accéder aux éléments d'un tableau

    Les tableaux sont indicés à partir de zéro ; le premier élément d'un tableau a 0 pour indice, et la position du dernier élément est donnée par length moins 1.

    var arr = ["le premier élément", "le second élément"];  
    console.log(arr[0]);             // affiche "le premier élément"    
    console.log(arr[1]);             // affiche "le second élément"  
    console.log(arr[arr.length - 1]);// affiche "le second élément"

    Les éléments d'un tableau sont simplement des propriétés d'objets. Cependant, le code suivant renverra une erreur car le nom de la propriété utilise est invalide :

    console.log(arr.0); // erreur de syntaxe

    Ce comportement est tout à fait normal. En effet, il n'est pas possible d'accéder aux propriétés dont le nom commence par un chiffre avec cette notation (le point). Il est nécessaire d'utiliser la syntaxe avec les crochets pour accéder à ces propriétés. Ainsi, si pour un objet quelconque, on avait une propriété nommée '3d', on ne pourra y faire référence qu'en utilisant les crochets. Ainsi :

    var années = [1950, 1960, 1970, 1980, 1990, 2000, 2010];
    console.log(années.0);  // erreur de syntaxe
    console.log(années[0]); // fonctionne correctement     
    renderer.3d.setTexture(model, "personnage.png");   // erreur de syntaxe
    renderer["3d"].setTexture(model, "personnage.png");// fonctionne correctement 

    Dans cet exemple, on utilise des doubles quotes autour de 3d. On peut aussi utiliser les doubles quotes pour accéder aux éléments d'un tableau (ex. : années["2"] au lieu de années[2]), mais ce n'est pas obligatoire. Dans l'instruction années[2], le nombre sera converti en une chaîne de caractères par le moteur JavaScript. Pour cette raison, si on utilise les noms de propriété "2" et "02", on fera référence à deux propriétés différentes, le fragment de code suivant renvoie donc true:

        console.log(années["2"] != années["02"]); 

    De façon semblable, les propriétés nommées avec des mots-clés réservés ne peuvent être consultées qu'en utilisant la syntaxe avec crochets :

    var promise = {
      'var'  : 'text',
      'array': [1, 2, 3, 4]
    };
    
    console.log(promise['array']);

    Relation entre length et les propriétés numériques

    La propriété length d'un tableau est liée aux propriétés numériques du tableau. Lorsqu'elles sont utilisées, plusieurs méthodes natives utilisent cette propriété : join, slice, indexOf, etc. D'autres méthodes comme push et splice modifient le tableau et la propriété length.

    var fruits = [];  
    fruits.push("banane", "pomme", "pêche");  
          
    console.log(fruits.length); // 3

    Lorsqu'on définit une nouvelle propriété numérique pour un tableau, que l'index utilisé est valide et que celui-ci est dehors des limites actuelles du tableau, le moteur JavaScript mettra à jour la propriété length :

    fruits[5] = "mangue";  
    console.log(fruits[5]);  // "mangue"
    console.log(Object.keys(fruits)); // ['0', '1', '2', '5'] 
    console.log(fruits.length); // 6 

    On peut également modifier la propriété directement (cela n'ajoutera pas de nouveaux éléments) :

    fruits.length = 10;  
    console.log(Object.keys(fruits)); // ['0', '1', '2', '5']         
    console.log(fruits.length);  // 10

    En revanche, si on diminue la valeur de length, cela supprimera des éléments :

    fruits.length = 2;
    console.log(Object.keys(fruits)); // ['0', '1']
    console.log(fruits.length); // 2

    Pour plus d'informations sur le comportement de cette propriété, voir la page Array.length.

    Création d'un tableau utilisant le résultat d'une correspondance

    Le résultat d'une correspondance entre une expression rationnelle et une chaîne peut créer un tableau. Ce tableau possède des propriétés et des éléments qui fournissent des informations sur cette correspondance. Il est possible d'obtenir un tableau grâce aux méthodes RegExp.prototype.exec, String.match, and String.replace. Pour mieux comprendre le fonctionnement de ces propriétés et de ces éléments, on pourra utiliser l'exemple et le tableau qui suivent :

    var maRegexp = /d(b+)(d)/i;
    var monTableau = maRegexp.exec("cdbBdbsbz");

    Les propriétés et les éléments retournés depuis cette correspondance sont les suivants :

    Propriété/Élément Description Exemple
    input Une propriété en lecture seule qui reflète la chaîne originale sur laquelle l'expression rationnelle a été appliquée. cdbBdbsbz
    index Une propriété en lecture seule qui est l'indice de la correspondance dans la chaîne (les indices commencent à 0) 1
    [0] Une propriété en lecture seule qui spécifie les derniers caractères correspondants. dbBd
    [1], ...[n] Des éléments en lecture seul qui spécifient les correspondances de chaînes entre parenthèse, s'ils sont inclus dans une expression régulière. Le nombre de chaînes possibles est illimité. [1]: bB
    [2]: d

    Propriétés

    Pour les propri.c3.a9t.c3.a9s héritées par les instances de Array, consultez Propri.c3.a9t.c3.a9s des instances de Array.
    Array.length
    La propriété de longueur pour le constructeur Array, elle vaut 1.
    Array.prototype
    Cette propriété permet d'ajouter des propriétés à tous les tableaux.

    Méthodes

    Pour les m.c3.a9thodes héritées par les instances de Array, consultez M.c3.a9thodes des instances de Array.
    Array.from()
    Cette méthode permet de créer une nouvelle instance d'Array à partir d'un objet semblable à un tableau ou d'un itérable.
    Array.isArray()
    Cette méthode renvoie true si la variable est un tableau, false sinon.
    Array.observe()
    Cette méthode permet d'« observer » de façon asynchrone les modifications faites sur un tableau. Cette méthode est semblable à la méthode Object.observe() utilisée pour les objets. Elle fournit un flux contenant les modifications, dans l'ordre d'application, apportées au tableau.
    Array.of()
    Cette mtéhode permet de créer une nouvelle instance d'Array à partir d'un nombre variable d'arguments (peu importe la quantité ou le type des arguments utilsés).

    Instances d'Array

    Toutes les instances d'Array héritent de Array.prototype. Le prototype du constructeur Array peut être modifié afin d'affecter l'ensemble des instances grâce à l'héritage.

    Les propriétés

    Array.prototype.constructor
    Cette propriété définit la fonction qui crée le prototype d'un objet.
    Array.prototype.length
    Cette propriété renvoie le nombre d'éléments d'un tableau.

    Les méthodes

    Les mutateurs

    Ces méthodes modifient le tableau :

    Array.prototype.copyWithin()
    Cette méthode copie une série d'éléments de tableau dans le tableau.
    Array.prototype.fill()
    Cette méthode remplie tous les éléments d'un tableau avec une même valeur, éventuellement entre un indice de début et un indice de fin.
    Array.prototype.pop()
    Cette méthode supprime le dernier élément d'un tableau et retourne cet élément.
    Array.prototype.push()
    Cette méthode ajoute un ou plusieurs éléments à la fin d'un tableau et retourne la nouvelle longueur du tableau.
    Array.prototype.reverse()
    Cette méthode renverse l'ordre des éléments d'un tableau - le premier élément devient le dernier, et le dernier devient le premier.
    Array.prototype.shift()
    Cette méthode supprime le premier élément d'un tableau et retourne cet élément.
    Array.prototype.sort()
    Cette méthode trie en place les éléments d'un tableau et retourne le tableau.
    Array.prototype.splice()
    Cette méthode permet d'ajouter ou de retirer des éléments d'un tableau.
    Array.prototype.unshift()
    Cette méthode permet d'ajouter un ou plusieurs éléments au début d'un tableau et renvoie la nouvelle longueur du tableau.

    Les accesseurs

    Ces méthodes ne modifient pas l'état du tableau et en retournent une représentation.

    Array.prototype.concat()
    Cette méthode renvoie un nouveau tableau constitué de ce tableau concaténé avec un ou plusieurs autre(s) tableau(x) et/ou valeur(s).
    Array.prototype.includes()
    Cette méthode détermine si le tableau contient ou non un certain élément. Elle renvoie true ou false selon le cas de figure.
    Array.prototype.join()
    Cette méthode concatène tous les éléments d'un tableau en une chaîne de caractère.
    Array.prototype.slice()
    Cette méthode extrait une portion d'un tableau pour retourner un nouveau tableau constitué de ces éléments.
    Array.prototype.toSource()
    Cette méthode renvoie la représentation littérale du tableau spécifié ; vous pouvez utiliser cette valeur pour créer un nouveau tableau. Elle surcharge la méthode Object.prototype.toSource().
    Array.prototype.toString()
    Cette méthode renvoie une chaîne de caractères représentant le tableau et ses éléments. Elle surcharge la méthode Object.prototype.toString().
    Array.prototype.toLocaleString()
    Cette méthode retourne une chaîne de caractères représentant le tableau et ses éléments en tenant compte de la locale. Elle surcharge la méthode Object.prototype.toLocaleString().
    Array.prototype.indexOf()
    Cette méthode retourne le premier (plus petit) index d'un élément égal à la valeur passée en paramètre à l'intérieur du tableau, ou -1 si aucun n'a été trouvé.
    Array.prototype.lastIndexOf()
    Cette méthode retourne le dernier (plus grand) index d'un élément égal à la valeur passée en paramètre à l'intérieur du tableau, ou -1 si aucun n'a été trouvé.

    Les méthodes d'itération

    Plusieurs méthodes utilisent des fonctions comme argument. Ces fonctions sont utilisées afin de traiter, d'une façon ou d'une autre, chaque élément du tableau. Lorsque ces méthodes sont invoquées, on évalue la longueur du tableau et on traite chacun des éléments dont l'indice est inférieur à la longueur (les éléments ajoutés en cours de route ne seront pas traités). Les autres modifications apportées au tableau (affecter une valeur ou supprimer un élément) peuvent avoir un impact sur les traitements des éléments suivants. Bien que ce comportement soit bien défini pour les différentes méthodes, afin de ne pas complexifier le code outre-mesure, lorsqu'on modifiera un tableau, on en créera une copie avant d'invoquer une telle méthode.

    Array.prototype.forEach()
    Cette méthode appelle une fonction sur chacun des éléments du tableau.
    Array.prototype.entries()
    Cette méthode renvoie un nouvel objet Array Iterator qui contient les paires clef/valeur pour chaque index du tableau.
    Array.prototype.every()
    Cette méthode renvoie true si chaque élément du tableau satisfait la fonction de test passée en paramètre.
    Array.prototype.some()
    Cette méthode renvoie true si au moins un élément du le tableau satisfait la fonction de test passée en paramètre.
    Array.prototype.filter()
    Cette méthode crée un nouveau tableau contenant tous les éléments du tableau pour lesquels la fonction de filtrage passée en argument retourne true.
    Array.prototype.find()
    Cette méthode renvoie la valeur d'un élément trouvé dans le tableau et qui satisfait la fonction de test passée en paramètre, undefined sinon.
    Array.prototype.findIndex()
    Cette méthode renvoie l'index d'un élément trouvé dans le tableau qui satisfait la fonction de test passée en paramètre ou -1 si aucun ne la satisfait.
    Array.prototype.keys()
    Cette méthode retourne un nouvel Array Iterator qui contient les indices pour chaque élément dans le tableau.
    Array.prototype.map()
    Cette méthode crée un nouveau tableau contenant les images de chaque élément du tableau de départ par la fonction passée en paramètre.
    Array.prototype.reduce()
    Cette méthode applique une fonction sur un accumulateur et sur chaque valeur du tableau (de gauche à droite) de façon à obtenir une unique valeur à la fin.
    Array.prototype.reduceRight()
    Cette méthode applique une fonction sur un accumulateur et sur chaque valeur du tableau (de droite à gauche) de façon à obtenir une unique valeur à la fin.
    Array.prototype.values()
    Cette méthode renvoie un nouvel objet Array Iterator qui contient les valeurs de chaque indice du tableau.
    Array.prototype[@@iterator]()
    Cette méthode renvoie un nouvel objet Array Iterator qui contient les valeurs de chaque indice du tableau.

    Les méthodes génériques de manipulation de tableaux

    Parfois, on peut vouloir appliquer des méthodes pour les tableaux sur des chaînes ou d'autres objets semblables aux tableaux (ex. : l'objet arguments). Une chaîne sera donc traitée comme un tableau de caractères. Ainsi, si on souhaite vérifier que chaque caractère d'une chaîne str est bien une lettre comprise entre 'a' et 'z', on pourra utiliser :

    function estUneLettre(caractère) {
      return caractère >= 'a' && caractère <= 'z';
    }
    
    if (Array.prototype.every.call(str, estUneLettre)) {
      console.log("La chaîne '" + str + "' ne contient que des lettres entre a et z!");
    }
    

    Cette notation étant plutôt verbeuse, une notation raccourcie a été introduite avec JavaScript 1.6 :

    if (Array.every(str,estUneLettre)) {
      console.log("La chaîne '" + str + "' ne contient que des lettres entre a et z !");
    }
    

    Des méthodes génériques sont également disponibles pour les String.

    Ces fonctions ne sont pas standards (elles ne font pas partie d'ECMAScript), voici un fragment d'émulation (shim) qui permet de les utiliser dans les différents navigateurs :

    // Assumes Array extras already present (one may use polyfills for these as well)
    (function() {
      'use strict';
    
      var i,
        // We could also build the array of methods with the following, but the
        //   getOwnPropertyNames() method is non-shimable:
        // Object.getOwnPropertyNames(Array).filter(function(methodName) {
        //   return typeof Array[methodName] === 'function'
        // });
        methods = [
          'join', 'reverse', 'sort', 'push', 'pop', 'shift', 'unshift',
          'splice', 'concat', 'slice', 'indexOf', 'lastIndexOf',
          'forEach', 'map', 'reduce', 'reduceRight', 'filter',
          'some', 'every'
        ],
        methodCount = methods.length,
        assignArrayGeneric = function(methodName) {
          if (!Array[methodName]) {
            var method = Array.prototype[methodName];
            if (typeof method === 'function') {
              Array[methodName] = function() {
                return method.call.apply(method, arguments);
              };
            }
          }
        };
    
      for (i = 0; i < methodCount; i++) {
        assignArrayGeneric(methods[i]);
      }
    }());
    

    Voir aussi la méthode Array.from introduite avec ECMAScript 6.

    Exemples

    Créer un tableau

    Dans l'exemple suivant, on crée un tableau tableauMsg, d'une longueur nulle. Ensuite, on lui affecte des valeurs pour tableauMsg[0] et tableauMsg[99], ce qui aura pour effet de modifier la propriété length (qui vaudra alors 100).

    var tableauMsg = [];
    tableauMsg[0] = 'Coucou';
    tableauMsg[99] = 'monde';
    
    if (tableauMsg.length === 100) {
      console.log('La longueur du tableau vaut 100.');
    }
    

    Créer un tableau à deux dimensions

    Dans l'exemple qui suit, on crée un plateau d'échec grâce à un tableau de chaînes de caractères sur deux dimensions. Le premier mouvement est effectué en copiant 'p' de (6,4) vers (4,4). La position anciennement occupée par le pion (6,4) devient vide.

    var plateau = [ 
      ['T','C','F','R','K','F','C','T'],
      ['P','P','P','P','P','P','P','P'],
      [' ',' ',' ',' ',' ',' ',' ',' '],
      [' ',' ',' ',' ',' ',' ',' ',' '],
      [' ',' ',' ',' ',' ',' ',' ',' '],
      [' ',' ',' ',' ',' ',' ',' ',' '],
      ['p','p','p','p','p','p','p','p'],
      ['t','c','f','k','r','f','c','t'] ];
    
    console.log(plateau.join('\n') + '\n\n');
    
    // On déplace le pion de deux cases en avant 2
    plateau[4][4] = plateau[6][4];
    plateau[6][4] = ' ';
    console.log(plateau.join('\n'));
    

    Voici le résultat affiché :

    T,C,F,R,K,F,C,T
    P,P,P,P,P,P,P,P
     , , , , , , , 
     , , , , , , , 
     , , , , , , , 
     , , , , , , , 
    p,p,p,p,p,p,p,p
    t,c,f,k,r,f,c,t
    
    T,C,F,R,K,F,C,T
    P,P,P,P,P,P,P,P
     , , , , , , , 
     , , , , , , , 
     , , , ,p, , , 
     , , , , , , , 
    p,p,p,p, ,p,p,p
    t,c,f,k,r,f,c,t
    

    Spécifications

    Spécification Statut Commentaires
    Première édition d'ECMAScript Standard Définition initiale
    ECMAScript 5.1 (ECMA-262)
    La définition de 'Array' dans cette spécification.
    Standard Ajout de nouvelles méthodes : Array.isArray, indexOf, lastIndexOf, every, some, forEach, map, filter, reduce, reduceRight
    ECMAScript 6 (ECMA-262)
    La définition de 'Array' dans cette spécification.
    Draft Ajout de nouvelles méthodes : Array.from, Array.of, find, findIndex, fill, copyWithin

    Compatibilité des navigateurs

    Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Support simple (Oui) (Oui) (Oui) (Oui) (Oui)
    Fonctionnalité Android Chrome pour Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Support simple (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)

    Voir aussi

    Étiquettes et contributeurs liés au document

    Dernière mise à jour par : SphinxKnight,
    Masquer la barre latérale