Maison > interface Web > js tutoriel > le corps du texte

Explorer les méthodes de tableau JavaScript avec des exemples

王林
Libérer: 2024-07-18 05:58:00
original
989 Les gens l'ont consulté

Exploring JavaScript Array Methods with Examples

Les tableaux JavaScript sont polyvalents et offrent un large éventail de méthodes intégrées pour manipuler, itérer et gérer efficacement les données. Comprendre ces méthodes est crucial pour une programmation efficace. Examinons quelques méthodes de tableau couramment utilisées avec des exemples pratiques.

Méthodes de tableau

  • push() : Ajoute un ou plusieurs éléments à la fin d'un tableau et renvoie la nouvelle longueur du tableau.
let fruits = ['apple', 'banana'];
fruits.push('orange');  // returns 3 (new length of array)
console.log(fruits);    // Output: ['apple', 'banana', 'orange']
Copier après la connexion
  • pop() : Supprime le dernier élément d'un tableau et renvoie cet élément.
let fruits = ['apple', 'banana', 'orange'];
let lastFruit = fruits.pop();  // returns 'orange'
console.log(fruits);           // Output: ['apple', 'banana']
console.log(lastFruit);        // Output: 'orange'
Copier après la connexion
  • shift() : Supprime le premier élément d'un tableau et renvoie cet élément supprimé.
let fruits = ['apple', 'banana', 'orange'];
let firstFruit = fruits.shift();  // returns 'apple'
console.log(fruits);              // Output: ['banana', 'orange']
console.log(firstFruit);          // Output: 'apple'
Copier après la connexion
  • unshift() : Ajoute un ou plusieurs éléments au début d'un tableau et renvoie la nouvelle longueur du tableau.
let fruits = ['banana', 'orange'];
fruits.unshift('apple');  // returns 3 (new length of array)
console.log(fruits);      // Output: ['apple', 'banana', 'orange']
Copier après la connexion
  • forEach() : Exécute une fonction fournie une fois pour chaque élément du tableau.
let numbers = [1, 2, 3];
numbers.forEach(function(num) {
  console.log(num * 2);  // Output: 2, 4, 6
});
Copier après la connexion
  • map() : Crée un nouveau tableau rempli avec les résultats de l'appel d'une fonction fournie sur chaque élément du tableau appelant.
let numbers = [1, 2, 3];
let doubled = numbers.map(function(num) {
  return num * 2;
});
console.log(doubled);  // Output: [2, 4, 6]
Copier après la connexion
  • filter() : Crée un nouveau tableau avec tous les éléments qui réussissent le test implémenté par la fonction fournie.
let numbers = [1, 2, 3, 4, 5];
let evens = numbers.filter(function(num) {
  return num % 2 === 0;
});
console.log(evens);  // Output: [2, 4]
Copier après la connexion
  • find() : Renvoie le premier élément du tableau qui satisfait à la fonction de test fournie.
let numbers = [10, 20, 30, 40, 50];
let found = numbers.find(function(num) {
  return num > 25;
});
console.log(found);  // Output: 30
Copier après la connexion
  • reduce() : Applique une fonction à un accumulateur et à chaque élément du tableau (de gauche à droite) pour le réduire à une seule valeur.
let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function(acc, current) {
  return acc + current;
}, 0);
console.log(sum);  // Output: 15 (1 + 2 + 3 + 4 + 5)
Copier après la connexion
  • indexOf() : Renvoie le premier index auquel un élément donné peut être trouvé dans le tableau, ou -1 s'il n'est pas présent.
let fruits = ['apple', 'banana', 'orange', 'apple'];
let index = fruits.indexOf('apple');  // returns 0
console.log(index);                   // Output: 0
Copier après la connexion
  • lastIndexOf() : Renvoie le dernier index auquel un élément donné peut être trouvé dans le tableau, ou -1 s'il n'est pas présent.
let fruits = ['apple', 'banana', 'orange', 'apple'];
let lastIndex = fruits.lastIndexOf('apple');  // returns 3
console.log(lastIndex);                      // Output: 3
Copier après la connexion

Ces méthodes de tableau sont des outils fondamentaux pour manipuler efficacement les structures de données en JavaScript. En maîtrisant ces méthodes, vous obtiendrez une boîte à outils puissante pour gérer les tableaux dans divers scénarios de programmation.

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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal