Tableaux JavaScript

Les tableaux JavaScript sont utilisés pour stocker plusieurs valeurs dans un seul variable.

Exemple

var cars = ["Saab", "Volvo", "BMW"];

Essayez-le vous-même

Qu'est-ce qu'un tableau ?

Un tableau est un type spécial de variable qui peut stocker une valeur ou plusieurs valeurs à la fois.

Si vous avez une liste de projets (par exemple, une liste de marques de voitures), stocker les marques de voitures dans une seule variable devrait être ainsi :

var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW";

Cependant, si vous souhaitez parcourir toutes les voitures et trouver une valeur spécifique ? Et si ce n'est pas trois marques de voitures, mais trois cents ?

La solution est un tableau !

Un tableau peut stocker de nombreuses valeurs sous un seul nom et accéder à ces valeurs par leur index.

Créer un tableau

L'utilisation du texte d'array est la méthode la plus simple pour créer un tableau JavaScript.

Syntaxe :

var array-name = [item1, item2, ...];

Exemple

var cars = ["Saab", "Volvo", "BMW"];

Essayez-le vous-même

Les espaces et les retours chariots ne sont pas importants. La déclaration peut s'étendre sur plusieurs lignes :

Exemple

var cars = [
    "Saab",
    "Volvo",
    "BMW"
];

Essayez-le vous-même

Ne pas écrire de virgule après le dernier élément (par exemple, "BMW",).

Il peut y avoir des problèmes de compatibilité entre navigateurs.

en utilisant le mot-clé JavaScript new

L'exemple suivant créera également un tableau et lui assignera des valeurs :

Exemple

var cars = new Array("Saab", "Volvo", "BMW");

Essayez-le vous-même

Les deux exemples ci-dessus ont le même effet. Il n'est pas nécessaire d'utiliser new Array().

Pour des raisons de concision, de lisibilité et de vitesse d'exécution, veuillez utiliser la première méthode (méthode de texte d'array).

par leur index.

Nous accédons aux éléments d'un tableauNuméro d'index (sous-index)pour faire référence à un élément d'un tableau.

Cette instruction accède à la valeur du premier élément de l'array :

var name = cars[0];

Cette instruction modifie le premier élément de l'array :

cars[0] = "Opel";

Exemple

var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];

Essayez-le vous-même

[0] est l'élément premier du tableau.[1] est le deuxième. Les indices commencent à 0.

Changer l'élément d'un tableau

Cette instruction modifie la valeur du premier élément de l'array :

cars[0] = "Opel";

Exemple

var cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
document.getElementById("demo").innerHTML = cars[0];

Essayez-le vous-même

Accéder à l'ensemble du tableau

Avec JavaScript, vous pouvez accéder à l'ensemble du tableau en utilisant le nom du tableau :

Exemple

var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;

Essayez-le vous-même

Les tableaux sont des objets

Les tableaux sont un type spécial d'objet. En JavaScript, les tableaux utilisent typeof Les opérateurs retournent "object".

Cependant, il est préférable de décrire les tableaux JavaScript en tant que tableaux.

L'utilisation des tableauxdes nombresPour accéder à ses "éléments" dans cet exemple,person[0] Retourne Bill :

Tableau :

var person = ["Bill", "Gates", 62];

Essayez-le vous-même

Les objets utilisentNomPour accéder à ses "membres" dans cet exemple,person.firstName Retourne Bill :

Objet :

var person = {firstName:"Bill", lastName:"Gates", age:19};

Essayez-le vous-même

Les éléments du tableau peuvent être des objets

Les variables JavaScript peuvent être des objets. Un tableau est un type spécial d'objet.

C'est pourquoi vous pouvez stocker différents types de variables dans le même tableau.

Vous pouvez stocker des objets dans un tableau. Vous pouvez également stocker des fonctions dans un tableau :

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;

Attributs et méthodes des tableaux

La véritable puissance des tableaux JavaScript se cache dans les attributs et les méthodes des tableaux :

Exemple

var x = cars.length;   // L'attribut length retourne le nombre d'éléments
var y = cars.sort();   // La méthode sort() trie le tableau

Nous allons apprendre les méthodes de tableau au chapitre suivant.

L'attribut length

length L'attribut retourne la longueur du tableau (le nombre d'éléments du tableau).

Exemple

var fruits = ["Banane", "Orange", "Pomme", "Mangue"];
fruits.length;                       // La longueur de fruits est 4

Essayez-le vous-même

length L'attribut est toujours supérieur à l'indice maximal du tableau (index).

Accéder à l'élément premier du tableau

Exemple

fruits = ["Banana", "Orange", "Apple", "Mango"];
var first = fruits[0];

Essayez-le vous-même

Accéder à l'élément final du tableau

Exemple

fruits = ["Banana", "Orange", "Apple", "Mango"];
var last = fruits[fruits.length - 1];

Essayez-le vous-même

Parcourir les éléments d'un tableau

Le moyen le plus sûr de parcourir un tableau est d'utiliser "for"Boucle :"

Exemple

var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
     text += "<li>" + fruits[i] + "</li>";
}

Essayez-le vous-même

Vous pouvez également utiliser Array.foreach() Fonction :

Exemple

var fruits, text;
fruits = ["Banana", "Orange", "Apple", "Mango"];
text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
function myFunction(value) {
  text += "<li>" + value + "</li>";
}

Essayez-le vous-même

Ajouter un élément à l'array

La meilleure méthode pour ajouter un nouvel élément à l'array est d'utiliser push() Méthode :

Exemple

var fruits = ["Banane", "Orange", "Pomme", "Mangue"];
fruits.push("Lemon");                // Ajouter un nouvel élément (Lemon) à fruits

Essayez-le vous-même

Vous pouvez également utiliser length Propriété pour ajouter un nouvel élément à l'array :

Exemple

var fruits = ["Banane", "Orange", "Pomme", "Mangue"];
fruits[fruits.length] = "Lemon";     // Ajouter un nouvel élément (Lemon) à fruits

Essayez-le vous-même

Attention !

Ajouter un élément à l'indice le plus élevé peut créer des " trous " non définis dans l'array :

Exemple

var fruits = ["Banane", "Orange", "Pomme", "Mangue"];
fruits[6] = "Lemon";                 // Ajouter un nouvel élément (Lemon) à fruits

Essayez-le vous-même

Tableau associatif

De nombreux éléments de programmation supportent les tableaux avec des indices nommés.

Les tableaux avec des indices nommés sont appelés tableaux associatifs (ou tableaux hachés).

JavaScript Les tableaux JavaScript avec des indices nommés ne sont pas supportés.des tableaux d'indices nommés.

En JavaScript, les tableaux ne peuvent être utilisés qu'avecindices numériques.

Exemple

var person = [];
person[0] = "Bill";
person[1] = "Gates";
person[2] = 62;
var x = person.length;          // person.length retourne 3
var y = person[0];              // person[0] retourne "Bill"

Essayez-le vous-même

Attention !

Si vous utilisez des indices nommés, JavaScript redéfinira l'array comme un objet standard.

Après cela, toutes les méthodes et propriétés des tableaux produiront des résultats incorrects.

Exemple :

var person = [];
person["firstName"] = "Bill";
person["lastName"] = "Gates";
person["age"] = 62;
var x = person.length;         // person.length retournera 0
var y = person[0];              // person[0] retournera undefined

Essayez-le vous-même

La différence entre un tableau et un objet

En JavaScript,TableauUtilisezindices numériques.

En JavaScript,objetUtilisezIndices nommés.

Un tableau est un type spécial d'objet qui a des indices numériques.

Quand utiliser un tableau et quand utiliser un objet ?

  • JavaScript ne prend pas en charge les tableaux associatifs
  • Si vous souhaitez que les éléments soient nomméschaîne de caractères (texte)Alors, utilisezobjet.
  • Si vous souhaitez que les éléments soient nommésdes nombresAlors, utilisezTableau.

Évitez new Array()

Il n'est pas nécessaire d'utiliser le constructeur intégré de tableau JavaScript new Array().

Utilisez [] À la place !

Les deux lignes suivantes créent un nouveau tableau vide nommé points :

var points = new Array();         // Mal
var points = [];                  // Bien

Les deux lignes suivantes créent un nouveau tableau contenant six nombres :

var points = new Array(40, 100, 1, 5, 25, 10); // Mal
var points = [40, 100, 1, 5, 25, 10];          // Bien

Essayez-le vous-même

new Les mots-clés ne font que compliquer le code. Ils peuvent également produire des résultats imprévus :

var points = new Array(40, 100);  // Crée un tableau contenant deux éléments (40 et 100)

Que se passe-t-il si je supprime un de ces éléments ?

var points = new Array(40);       // Crée un tableau contenant 40 éléments non définis !!

Essayez-le vous-même

Comment reconnaître un tableau

Une question courante est : comment puis-je savoir si une variable est un tableau ?

Le problème réside dans l'opérateur JavaScript typeof Retourne "object":

var fruits = ["Banane", "Orange", "Pomme", "Mangue"];
typeof fruits;             // Retourne object

Essayez-le vous-même

L'opérateur typeof retourne "object", car un tableau JavaScript est un objet.

Solution 1 :

Pour résoudre ce problème, ECMAScript 5 a défini une nouvelle méthode Array.isArray():

Array.isArray(fruits);     // Renvoie true

Essayez-le vous-même

Le problème avec cette solution est ECMAScript 5 Non pris en charge dans les anciens navigateurs.

Solution 2 :

Créez votre propre isArray() La fonction résout ce problème :

function isArray(x) {
    return x.constructor.toString().indexOf("Array") > -1;
}

Essayez-le vous-même

Si le paramètre est un tableau, la fonction ci-dessus renvoie toujours true.

Ou une explication plus précise serait : Si l'objet prototype contient le mot "Array", alors renvoie true.

Solution 3 :

Si l'objet est créé par le constructeur donné, alors instanceof Opérateur renvoyant true :

var fruits = ["Banane", "Orange", "Pomme", "Mangue"];
fruits instanceof Array     // Renvoie true

Essayez-le vous-même