Tableaux JavaScript
Un tableau est une variable spéciale, qui peut contenir plusieurs valeurs :
const voitures = [“Saab”, “Volvo”, “BMW”];
Essayez-le vous-même »
Pourquoi utiliser des tableaux ?
Si vous avez une liste d’éléments (une liste de noms de voitures, par exemple), le stockage des voitures dans des variables uniques pourrait ressembler à ceci :
laissez voiture1 = “Saab” ;
laissez car2 = “Volvo” ;
laissez voiture3 = “BMW” ;
Cependant, que se passe-t-il si vous voulez parcourir les voitures et en trouver une en particulier ? Et si vous n’aviez pas 3 voitures, mais 300 ?
La solution est un tableau !
Un tableau peut contenir plusieurs valeurs sous un seul nom, et vous pouvez accéder aux valeurs en vous référant à un numéro d’index.
Création d’un tableau
L’utilisation d’un littéral de tableau est le moyen le plus simple de créer un tableau JavaScript.
Syntaxe:
constante nom_tableau = [item1, item2, …];
Il est courant de déclarer des tableaux avec les constante mot-clé.
En savoir plus sur constante avec des tableaux dans le chapitre : JS Array Const.
Les espaces et les sauts de ligne ne sont pas importants. Une déclaration peut s’étendre sur plusieurs lignes :
Vous pouvez également créer un tableau, puis fournir les éléments :
Exemple
const voitures = [];
voitures[0]= “Saab” ;
voitures[1]= “Volvo” ;
voitures[2]= “BMW” ;
Essayez-le vous-même »
Utilisation du mot-clé JavaScript new
L’exemple suivant crée également un tableau et lui attribue des valeurs :
Les deux exemples ci-dessus font exactement la même chose.
Il n’est pas nécessaire d’utiliser new Array().
Pour plus de simplicité, de lisibilité et de vitesse d’exécution, utilisez la méthode du tableau littéral.
Accéder aux éléments du tableau
Vous accédez à un élément de tableau en vous référant au numéro d’index:
Note: Les index de tableau commencent par 0.
[0] est le premier élément.
[1] est le deuxième élément.
Modification d’un élément de tableau
Cette instruction modifie la valeur du premier élément dans cars:
Accéder au tableau complet
Avec JavaScript, le tableau complet est accessible en se référant au nom du tableau :
Exemple
const voitures = [“Saab”, “Volvo”, “BMW”];
document.getElementById(“démo”).innerHTML = voitures ;
Essayez-le vous-même »
Les tableaux sont des objets
Les tableaux sont un type particulier d’objets. Le typeof L’opérateur en JavaScript renvoie “object” pour les tableaux.
Mais, les tableaux JavaScript sont mieux décrits comme des tableaux.
Utilisation des tableaux Nombres pour accéder à ses “éléments”. Dans cet exemple, person[0]
renvoie Jean :
Utilisation des objets des noms pour accéder à ses “membres”. Dans cet exemple,
person.firstName
renvoie Jean :
Les éléments du tableau peuvent être des objets
Les variables JavaScript peuvent être des objets. Les tableaux sont des types particuliers d’objets.
Pour cette raison, vous pouvez avoir des variables de différents types dans le même Array.
Vous pouvez avoir des objets dans un tableau. Vous pouvez avoir des fonctions dans un tableau. Vous pouvez avoir des tableaux dans un Array :
monTableau[0] = Date.maintenant ;
monTableau[1] = maFonction ;
monTableau[2] = mesVoitures ;
Propriétés et méthodes des tableaux
La véritable force des tableaux JavaScript réside dans les propriétés et méthodes de tableau intégrées :
cars.length // Renvoie le nombre d’éléments
cars.sort() // Trie le tableau
Les méthodes de tableau sont couvertes dans les chapitres suivants.
La propriété de longueur
Le length La propriété d’un tableau renvoie la longueur d’un tableau (le nombre d’éléments du tableau).
Exemple
const fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
soit longueur = fruits.longueur ;
Essayez-le vous-même »
Le length propriété est toujours un de plus que l’indice de tableau le plus élevé.
Accéder au premier élément du tableau
Exemple
const fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
laisser fruit = fruits[0];
Essayez-le vous-même »
Accéder au dernier élément du tableau
Exemple
const fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
laisser fruit = fruits[fruits.length – 1];
Essayez-le vous-même »
Éléments de tableau en boucle
Une façon de parcourir un tableau consiste à utiliser un for boucle:
Exemple
const fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
let fLen = fruits.length;
let text = “
” ;
pour (soit i = 0 ; i < fLen ; i++) {
texte += “
- ” + fruits[i] + “
” ;
}
texte += “
” ;
Essayez-le vous-même »
Vous pouvez également utiliser le Array.forEach() fonction:
Exemple
const fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
let text = “
” ;
fruits.forEach(maFonction);
texte += “
” ;
function maFonction(valeur) {
texte += “
” + valeur + “
” ;
}
Essayez-le vous-même »
Ajout d’éléments de tableau
Le moyen le plus simple d’ajouter un nouvel élément à un tableau consiste à utiliser le push() méthode:
Exemple
const fruits = [“Banana”, “Orange”, “Apple”];
fruits.push(“Citron”); // Ajoute un nouvel élément (Citron) aux fruits
Essayez-le vous-même »
Un nouvel élément peut également être ajouté à un tableau à l’aide de la length propriété:
Exemple
const fruits = [“Banana”, “Orange”, “Apple”];
des fruits[fruits.length] = “Citron” ; // Ajoute “Citron” aux fruits
Essayez-le vous-même »
AVERTISSEMENT !
L’ajout d’éléments avec des index élevés peut créer des “trous” indéfinis dans un tableau :
Exemple
const fruits = [“Banana”, “Orange”, “Apple”];
des fruits[6] = “Citron” ; // Crée des “trous” indéfinis dans les fruits
Essayez-le vous-même »
Tableaux associatifs
De nombreux langages de programmation prennent en charge les tableaux avec des index nommés.
Les tableaux avec des index nommés sont appelés tableaux associatifs (ou hachages).
JavaScript fait pas prennent en charge les tableaux avec des index nommés.
En JavaScript, tableaux utilisez toujours index numérotés.
Exemple
const personne = [];
personne[0] = “Jean” ;
personne[1] = “Biche” ;
personne[2] = 46 ;
personne.longueur ; // Retournera 3
personne[0]; // Retournera “John”
Essayez-le vous-même »
AVERTISSEMENT !!
Si vous utilisez des index nommés, JavaScript redéfinira le tableau en un objet.
Après cela, certaines méthodes et propriétés de tableau produiront résultats incorrects.
Exemple:
const personne = [];
personne[“firstName”] = “Jean” ;
personne[“lastName”] = “Biche” ;
personne[“age”] = 46 ;
personne.longueur ; // Retournera 0
personne[0]; // Retournera undefined
Essayez-le vous-même »
La différence entre les tableaux et les objets
En JavaScript, tableaux utiliser index numérotés.
En JavaScript, objets utiliser index nommés.
Les tableaux sont un type particulier d’objets, avec des index numérotés.
Quand utiliser les tableaux. Quand utiliser les objets.
- JavaScript ne prend pas en charge les tableaux associatifs.
- Tu devrais utiliser objets quand vous voulez que les noms des éléments soient
chaînes (texte). - Tu devrais utiliser tableaux quand vous voulez que les noms des éléments soient
Nombres.
JavaScript nouveau tableau()
JavaScript a un constructeur de tableau intégré new Array().
Mais vous pouvez utiliser en toute sécurité [] plutôt.
Ces deux instructions différentes créent toutes deux un nouveau tableau vide nommé points :
points constants = new Array();
points constants = [];
Ces deux instructions différentes créent toutes deux un nouveau tableau contenant 6 nombres :
points const = new Array(40, 100, 1, 5, 25, 10);
points constants = [40, 100, 1, 5, 25, 10];
Essayez-le vous-même »
Le new mot-clé peut produire des résultats inattendus :
// Crée un tableau avec trois éléments :
points const = new Array(40, 100, 1);
Essayez-le vous-même »
// Crée un tableau avec deux éléments :
points constants = new Array(40, 100);
Essayez-le vous-même »
// Crée un tableau avec un élément ???
points constants = nouveau tableau (40);
Essayez-le vous-même »
Une erreur courante
points constants = [40];
n’est pas la même chose que :
points constants = nouveau tableau (40);
// Crée un tableau avec 40 éléments non définis :
points constants = nouveau tableau (40);
Essayez-le vous-même »
Comment reconnaître un tableau
Une question courante est : comment savoir si une variable est un tableau ?
Le problème est que l’opérateur JavaScript typeof Retour “object” :
L’opérateur typeof renvoie object car un tableau JavaScript est un objet.
Solution 1 :
Pour résoudre ce problème ECMAScript 5 (JavaScript 2009) a défini une nouvelle méthode Array.isArray():
Solution 2 :
Le instanceof L’opérateur renvoie vrai si un objet est créé par un constructeur donné :
Référence complète de la baie
Pour une référence Array complète, rendez-vous sur :
Référence complète du tableau JavaScript.
La référence contient des descriptions et des exemples de toutes les propriétés et méthodes Array.
#Tableaux #JavaScript
