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

Comprendre les tableaux en JavaScript

Susan Sarandon
Susan Sarandonoriginal
2024-12-21 19:48:21497parcourir

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"]

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"]

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"]
  • 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"]

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
  • pop() : Supprime le dernier élément.
fruits[1] = "Blueberry";
console.log(fruits); // Output: ["Apple", "Blueberry", "Cherry"]
  • unshift() : Ajoute un élément au début.
fruits.push("Mango");
console.log(fruits); // Output: ["Apple", "Banana", "Cherry", "Mango"]
  • shift() : Supprime le premier élément.
fruits.pop();
console.log(fruits); // Output: ["Apple", "Banana"]

B. Trouver des éléments

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

C. Transformer des tableaux

  • map() : Crée un nouveau tableau en transformant chaque élément.
console.log(fruits.indexOf("Banana")); // Output: 1
  • filter() : Crée un nouveau tableau avec des éléments qui réussissent un test.
console.log(fruits.includes("Cherry")); // Output: false
  • 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]

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]
  • slice() : renvoie une partie du tableau.
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // Output: 6
  • 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"]

4. Itérer sur des tableaux

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

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);
}

6. Tri et inversion des tableaux

  • sort() : trie le tableau sur place.
fruits.forEach((fruit) => console.log(fruit));
  • 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

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"]

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!

Déclaration:
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