Les principales fonctions des tableaux en JavaScript sont essentielles pour manipuler efficacement les collections de données. Comprendre comment utiliser ces fonctions peut considérablement améliorer vos compétences en JavaScript et vous permettre de manipuler des tableaux avec aisance. Apprenons leurs fonctionnalités et comment les implémenter grâce à des exemples concrets de code.

Introduction aux Fonctions des Tableaux en JavaScript

Les tableaux en JavaScript sont des structures de données qui permettent de stocker plusieurs valeurs. Grâce aux nombreuses méthodes intégrées, vous pouvez effectuer des opérations complexes en toute simplicité. Voici les principales fonctions que vous devez connaître.

1. Ajouter des Éléments : push() et unshift()

La méthode push() permet d’ajouter un ou plusieurs éléments à la fin d’un tableau :

let fruits = ["pomme", "banane"];
fruits.push("orange");
console.log(fruits); // ["pomme", "banane", "orange"]

Pour ajouter des éléments au début du tableau, utilisez la méthode unshift() :

let fruits = ["pomme", "banane"];
fruits.unshift("kiwi");
console.log(fruits); // ["kiwi", "pomme", "banane"]

2. Supprimer des Éléments : pop() et shift()

La méthode pop() retire le dernier élément du tableau :

let fruits = ["pomme", "banane", "orange"];
let last = fruits.pop();
console.log(fruits); // ["pomme", "banane"]
console.log(last); // "orange"

La méthode shift() retire le premier élément du tableau :

let fruits = ["pomme", "banane", "orange"];
let first = fruits.shift();
console.log(fruits); // ["banane", "orange"]
console.log(first); // "pomme"

3. Accéder aux Éléments : indexOf() et includes()

Pour trouver la position d’un élément dans le tableau, utilisez indexOf() :

let fruits = ["pomme", "banane", "orange"];
let position = fruits.indexOf("banane");
console.log(position); // 1

Pour vérifier si un élément existe dans le tableau, utilisez includes() :

let fruits = ["pomme", "banane", "orange"];
let exists = fruits.includes("kiwi");
console.log(exists); // false

4. Transformer des Tableaux : map() et filter()

La méthode map() crée un nouveau tableau en appliquant une fonction sur chaque élément du tableau d’origine :

let numbers = [1, 2, 3, 4];
let doubled = numbers.map(x => x * 2);
console.log(doubled); // [2, 4, 6, 8]

La méthode filter() crée un nouveau tableau avec tous les éléments qui passent un test fourni par une fonction :

let numbers = [1, 2, 3, 4];
let evens = numbers.filter(x => x % 2 === 0);
console.log(evens); // [2, 4]

5. Réduire un Tableau : reduce()

La méthode reduce() applique une fonction qui est un « accumulateur » à chaque élément du tableau (de gauche à droite) pour le réduire à une seule valeur :

let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((acc, x) => acc + x, 0);
console.log(sum); // 10

6. Trouver des Éléments : find() et findIndex()

La méthode find() retourne la première valeur dans le tableau qui satisfait à la condition fournie par une fonction :

let numbers = [1, 2, 3, 4];
let firstEven = numbers.find(x => x % 2 === 0);
console.log(firstEven); // 2

La méthode findIndex() fonctionne de manière similaire, mais retourne l’index de la première valeur qui satisfait la condition :

let numbers = [1, 2, 3, 4];
let firstEvenIndex = numbers.findIndex(x => x % 2 === 0);
console.log(firstEvenIndex); // 1

7. Trier et Inverser : sort() et reverse()

La méthode sort() trie les éléments du tableau en place et retourne le tableau :

let fruits = ["pomme", "banane", "orange"];
fruits.sort();
console.log(fruits); // ["banane", "orange", "pomme"]

La méthode reverse() inverse les éléments du tableau en place :

let fruits = ["pomme", "banane", "orange"];
fruits.reverse();
console.log(fruits); // ["orange", "banane", "pomme"]

8. Fusionner des Tableaux : concat() et spread operator

La méthode concat() est utilisée pour fusionner deux ou plusieurs tableaux :

let fruits = ["pomme", "banane"];
let vegetables = ["carotte", "brocoli"];
let food = fruits.concat(vegetables);
console.log(food); // ["pomme", "banane", "carotte", "brocoli"]

L’opérateur spread (trois points …) permet également de fusionner des tableaux :

let fruits = ["pomme", "banane"];
let vegetables = ["carotte", "brocoli"];
let food = [...fruits, ...vegetables];
console.log(food); // ["pomme", "banane", "carotte", "brocoli"]

9. Copier des Tableaux : slice() et from()

La méthode slice() crée une copie peu profonde d’une portion d’un tableau dans un nouveau tableau sélectionné depuis le début jusqu’à la fin (fin non inclus) :

let fruits = ["pomme", "banane", "orange"];
let copy = fruits.slice();
console.log(copy); // ["pomme", "banane", "orange"]

La méthode Array.from() peut également être utilisée pour créer une copie d’un tableau :

let fruits = ["pomme", "banane", "orange"];
let copy = Array.from(fruits);
console.log(copy); // ["pomme", "banane", "orange"]

10. Transformer en Chaîne : join()

La méthode join() crée et retourne une nouvelle chaîne de caractères en concaténant tous les éléments d’un tableau :

let fruits = ["pomme", "banane", "orange"];
let fruitsString = fruits.join(", ");
console.log(fruitsString); // "pomme, banane, orange"

Categorized in:

Javascript,

Tagged in: