Maison > interface Web > js tutoriel > Comprendre les tableaux en JavaScript

Comprendre les tableaux en JavaScript

Susan Sarandon
Libérer: 2024-12-21 19:48:21
original
494 Les gens l'ont consulté

Understanding Arrays in JavaScript

Tableaux en JavaScript

En JavaScript, un tableau est un type spécial d'objet utilisé pour stocker des collections ordonnées de données. Les tableaux peuvent contenir plusieurs valeurs de différents types de données, notamment des nombres, des chaînes, des objets ou même d'autres tableaux.


1. Création de tableaux

A. Utilisation du littéral de tableau

La manière la plus courante de créer un tableau consiste à utiliser des crochets [].

Exemple :

const fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits); // Output: ["Apple", "Banana", "Cherry"]
Copier après la connexion
Copier après la connexion
Copier après la connexion

B. Utilisation du nouveau constructeur Array()

Cette méthode crée un tableau vide ou un tableau avec des éléments spécifiés.

Exemple :

const numbers = new Array(5); // Creates an array with 5 empty slots
console.log(numbers.length); // Output: 5
const colors = new Array("Red", "Green", "Blue");
console.log(colors); // Output: ["Red", "Green", "Blue"]
Copier après la connexion
Copier après la connexion

2. Accéder aux éléments du tableau

Les éléments du tableau sont accessibles à l'aide de indexation de base zéro.

Exemple :

const fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits); // Output: ["Apple", "Banana", "Cherry"]
Copier après la connexion
Copier après la connexion
Copier après la connexion
  • Mise à jour des éléments :
const numbers = new Array(5); // Creates an array with 5 empty slots
console.log(numbers.length); // Output: 5
const colors = new Array("Red", "Green", "Blue");
console.log(colors); // Output: ["Red", "Green", "Blue"]
Copier après la connexion
Copier après la connexion

3. Méthodes de tableau courantes

A. Ajout et suppression d'éléments

  • push() : Ajoute un élément à la fin du tableau.
const fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[0]); // Output: Apple
console.log(fruits[2]); // Output: Cherry
Copier après la connexion
  • pop() : Supprime le dernier élément.
fruits[1] = "Blueberry";
console.log(fruits); // Output: ["Apple", "Blueberry", "Cherry"]
Copier après la connexion
  • unshift() : Ajoute un élément au début.
fruits.push("Mango");
console.log(fruits); // Output: ["Apple", "Banana", "Cherry", "Mango"]
Copier après la connexion
  • shift() : Supprime le premier élément.
fruits.pop();
console.log(fruits); // Output: ["Apple", "Banana"]
Copier après la connexion

B. Trouver des éléments

  • indexOf() : Trouve l'index d'un élément.
fruits.unshift("Strawberry");
console.log(fruits); // Output: ["Strawberry", "Apple", "Banana"]
Copier après la connexion
  • includes() : Vérifie si un élément existe dans le tableau.
fruits.shift();
console.log(fruits); // Output: ["Apple", "Banana"]
Copier après la connexion

C. Transformer des tableaux

  • map() : Crée un nouveau tableau en transformant chaque élément.
console.log(fruits.indexOf("Banana")); // Output: 1
Copier après la connexion
  • filter() : Crée un nouveau tableau avec des éléments qui réussissent un test.
console.log(fruits.includes("Cherry")); // Output: false
Copier après la connexion
  • reduce() : Réduit le tableau à une seule valeur.
const numbers = [1, 2, 3];
const squared = numbers.map((num) => num ** 2);
console.log(squared); // Output: [1, 4, 9]
Copier après la connexion

D. Combinaison et découpage de tableaux

  • concat() : Combine deux tableaux ou plus.
const evenNumbers = numbers.filter((num) => num % 2 === 0);
console.log(evenNumbers); // Output: [2]
Copier après la connexion
  • slice() : renvoie une partie du tableau.
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // Output: 6
Copier après la connexion
  • splice() : ajoute ou supprime des éléments d'un tableau.
const moreFruits = ["Peach", "Grape"];
const allFruits = fruits.concat(moreFruits);
console.log(allFruits); // Output: ["Apple", "Banana", "Peach", "Grape"]
Copier après la connexion

4. Itérer sur des tableaux

  • pour Boucle :
const sliced = allFruits.slice(1, 3);
console.log(sliced); // Output: ["Banana", "Peach"]
Copier après la connexion
  • pour...de Boucle :
allFruits.splice(1, 1, "Orange");
console.log(allFruits); // Output: ["Apple", "Orange", "Peach", "Grape"]
Copier après la connexion
  • Méthode forEach() :
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}
Copier après la connexion

5. Tableaux multidimensionnels

Les tableaux peuvent contenir d'autres tableaux, créant une matrice ou une structure multidimensionnelle.

Exemple :

for (let fruit of fruits) {
  console.log(fruit);
}
Copier après la connexion

6. Tri et inversion des tableaux

  • sort() : trie le tableau sur place.
fruits.forEach((fruit) => console.log(fruit));
Copier après la connexion
  • reverse() : Inverse l'ordre des éléments.
const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];
console.log(matrix[1][2]); // Output: 6
Copier après la connexion

7. Déstructuration de tableaux

La déstructuration vous permet d'extraire les valeurs des tableaux en variables.

Exemple :

const fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits); // Output: ["Apple", "Banana", "Cherry"]
Copier après la connexion
Copier après la connexion
Copier après la connexion

8. Résumé

  • Les tableaux sont utilisés pour stocker des collections ordonnées de données en JavaScript.
  • Accédez aux éléments à l'aide d'index.
  • Utilisez des méthodes matricielles telles que push(), map(), filter() et réduire() pour la manipulation et la transformation.
  • Les tableaux sont polyvalents et essentiels pour gérer des collections dynamiques de données en JavaScript.

Bonjour, je m'appelle Abhay Singh Kathayat !
Je suis un développeur full-stack avec une expertise dans les technologies front-end et back-end. Je travaille avec une variété de langages et de frameworks de programmation pour créer des applications efficaces, évolutives et conviviales.
N'hésitez pas à me contacter à mon e-mail professionnel : kaashshorts28@gmail.com.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal