Maison >interface Web >js tutoriel >Explication sur les tableaux et la méthode des tableaux

Explication sur les tableaux et la méthode des tableaux

Patricia Arquette
Patricia Arquetteoriginal
2025-01-21 00:32:09635parcourir

Explanation on Arrays and Arrays method

Explication détaillée et méthodes courantes des tableaux JavaScript :

Qu'est-ce qu'un tableau ?

En JavaScript, un tableau est un objet spécial utilisé pour stocker une série de valeurs (éléments) sous un nom de variable. Les valeurs peuvent être de différents types de données (nombres, chaînes, booléens, objets ou même autres tableaux).

Caractéristiques principales :

  • Ordonné : Les éléments du tableau ont un ordre spécifique, avec leurs positions indexées à partir de 0.
  • Mutable : Une fois un tableau créé, ses éléments peuvent être modifiés.
  • Dynamique : Les tableaux peuvent augmenter ou diminuer en taille selon les besoins.

Créer un tableau :

  • Représentation littérale :
<code class="language-javascript">   const myArray = [1, "hello", true, null]; </code>
  • Utiliser le constructeur Array :
<code class="language-javascript">   const anotherArray = new Array(5); // 创建一个包含5个空槽的数组
   const yetAnotherArray = new Array(1, 2, 3); </code>

Accéder aux éléments du tableau :

Utiliser la notation entre crochets et l'indexation :

<code class="language-javascript">   const fruits = ["apple", "banana", "orange"];
   console.log(fruits[0]); // 输出: "apple" (第一个元素)
   console.log(fruits[2]); // 输出: "orange" (第三个元素)</code>

Modifier les éléments du tableau :

Attribuez la nouvelle valeur à l'index souhaité :

<code class="language-javascript">   fruits[1] = "grape"; 
   console.log(fruits); // 输出: ["apple", "grape", "orange"]</code>

Méthodes de tableau couramment utilisées :

  • push() : Ajoute un ou plusieurs éléments à la fin du tableau.
<code class="language-javascript">   fruits.push("mango"); </code>
  • pop() : Supprime le dernier élément du tableau et le renvoie.
<code class="language-javascript">   const removedFruit = fruits.pop(); </code>
  • unshift() : Ajoute un ou plusieurs éléments au début du tableau.
<code class="language-javascript">   fruits.unshift("kiwi"); </code>
  • shift() : Supprime le premier élément du tableau et le renvoie.
<code class="language-javascript">   const firstFruit = fruits.shift(); </code>
  • slice() : Crée une copie superficielle d'une partie du tableau.
<code class="language-javascript">   const citrusFruits = fruits.slice(1, 3); // 从索引1到2(不包括2)的元素</code>
  • splice() : Ajouter/supprimer des éléments du tableau à la position spécifiée.
<code class="language-javascript">   fruits.splice(1, 0, "pear"); // 在索引1处插入"pear"
   fruits.splice(2, 1); // 从索引2处删除1个元素</code>
  • concat() : Crée un nouveau tableau en concaténant les tableaux existants.
<code class="language-javascript">   const combinedFruits = fruits.concat(["pineapple", "strawberry"]); </code>
  • join() : Concatène tous les éléments du tableau dans une chaîne, séparés par le délimiteur spécifié.
<code class="language-javascript">   const fruitString = fruits.join(", "); </code>
  • indexOf() : Renvoie le premier index de l'élément donné.
<code class="language-javascript">   const index = fruits.indexOf("apple"); </code>
  • includes() : Vérifie si le tableau contient un élément.
<code class="language-javascript">   const hasBanana = fruits.includes("banana"); </code>
  • forEach() : Exécutez la fonction fournie une fois pour chaque élément du tableau.
<code class="language-javascript">   fruits.forEach(fruit => console.log(fruit)); </code>
  • map() : Crée un nouveau tableau en appliquant une fonction à chaque élément du tableau d'origine.
<code class="language-javascript">   const fruitLengths = fruits.map(fruit => fruit.length); </code>
  • filter() : Crée un nouveau tableau contenant uniquement les éléments qui réussissent le test fourni par la fonction.
<code class="language-javascript">   const longFruits = fruits.filter(fruit => fruit.length > 5); </code>

Ceci est un aperçu de base des tableaux JavaScript et de leurs méthodes. Il existe de nombreuses autres méthodes disponibles, chacune ayant son propre objectif spécifique. J'espère que cela aide!

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
Article précédent:Utiliser Promise.all()Article suivant:Utiliser Promise.all()