Partie 1 / Blogs / Perficient

Les tableaux sont la pierre angulaire de la programmation JavaScript, offrant un moyen polyvalent de conserver et de gérer les données. Dans ce premier segment, nous explorerons les méthodes de tableau essentielles que tout développeur JavaScript devrait connaître. Si vous avez envie d’avancer plus loin, gardez un œil sur méthodes de tableau avancées en JavaScript.

Introduction aux méthodes de tableau essentielles

Les tableaux sont des structures de données fondamentales en JavaScript, permettant de stocker et de manipuler efficacement des collections d’objets. Ce blog jette les bases des conversions de tableaux en JavaScript et explore les méthodes de tableau importantes.

push() et pop()

pousser()

La fonction ajoute des éléments à la fin d’un tableau.

Exemple:

const fruits = ["apple", "banana"];
fruits.push("orange"); 
console.log("Push method\n", fruits);

Sortir:

populaire()

Seule la dernière personne dans la file d’attente part lorsque quelqu’un part par la fin. De même, le dernier élément est supprimé d’un tableau et renvoyé par pop().

Exemple:

const fruits = ["apple", "banana", "orange"];
const removedFruit = fruits.pop();
console.log("Pop method", fruits);

Sortir:

shift() et unshift()

Changeons de sujet et parlons du début du réseau, là où les gens arrivent et partent en premier.

changement()

Cette méthode est comme si la première personne en ligne partait. La fonction supprime le premier élément d’un tableau et le renvoie.

Exemple:

const Movies = ['The Lion King', 'Aladdin', 'The Jungle Book', 'Moana']
const firstMovie = Movies.shift();
console.log('Shift method:\n',Movies)

Sortir:

unshift() :

C’est comme faire de la place à un tout nouveau personnage en tête de file. Unshift() fournit de nouveaux facteurs au début d’un tableau.

Exemple:

const Movies = ['The Lion King', 'Aladdin', 'The Jungle Book', 'Moana']
Movies.unshift('maleficent');
console.log('unshift method:\n',Movies)

Sortir:

concaténer

Cela combine des tableaux, créant un nouveau tableau sans altérer les originaux.

Exemple:

const Movies1 = ["The Lion King", "Aladdin"];
const Movies2 = ["The Jungle Book", "Moana"];

const combinedMovies = Movies1.concat(Movies2);
console.log("concat method:\n", combinedMovies);

Sortir:

tranche()

Imaginez-vous couper une tranche de pizza sans déranger le reste. La méthode slice() supprime un morceau d’un tableau et vous donne un nouveau tableau sans affecter l’original.

Exemple:

const vegetables = ["cucumbers", "carrots", "potatoes", "Onions"];
const sliceOfVegetable = vegetables.slice(1, 3);
console.log("slice method:\n", sliceOfVegetable);

Sortir:

épissure()

Pensez à vous procurer un collier avec des fleurs que vous pouvez réorganiser ou ajouter. splice() vous permet d’apporter des modifications à un tableau en supprimant ou en remplaçant des éléments et en en insérant de nouveaux à des emplacements spécifiques.

Exemple:

const games = ["Archery", "Base ball", "Cricket"];
games.splice(2, 2, "Dodgeball", "Football");
console.log("splice mathods:\n", games);

Sortir:

àSpliced()

La méthode Array.toSpliced() crée un nouveau tableau en supprimant ou en remplaçant des éléments dans un tableau existant sans modifier le tableau d’origine. Puisqu’il s’agit d’une opération immuable, le tableau source ne change pas. Lorsque vous souhaitez travailler avec une version modifiée du tableau d’origine mais que vous devez conserver son état, cette approche s’avère pratique.

Syntaxe

array.toSpliced(start, deleteCount, item1, item2,... itemN)

Paramètres

commencer: L’index auquel commencer la modification du tableau. Un index négatif peut être utilisé, en comptant à rebours à partir du dernier élément.

deleteCount : les éléments seront supprimés du tableau, à partir du début donné.

élément1, élément2,…, élémentN : Éléments à ajouter au tableau à partir de la position de départ.

Liste des tâches originales

const tasks = ['Email team', 'Meeting at 2 PM', 'Write report'];

Ajouter des éléments sans supprimer

Supposons que vous souhaitiez ajouter deux nouvelles tâches à la fin sans supprimer aucune tâche existante.

const addedTasks = tasks.toSpliced(3, 0, 'Update project plan', 'Review budgets');

console.log(addedTasks);

Sortir:

Supprimer des éléments sans en ajouter

Disons que la réunion a été annulée et que vous souhaitez la supprimer de la liste sans rien ajouter de nouveau.

const removedTasks = tasks.toSpliced(1, 1);

console.log(removedTasks);

Sortir:

Remplacement d’un élément

Si vous devez remplacer « Rédiger un rapport » par « Préparer la présentation », voici comment procéder :

const replacedTask = tasks.toSpliced(2, 1, 'Prepare presentation');

console.log(replacedTask);

Sortir:

Utiliser des index négatifs

Supposons que vous souhaitiez ajouter une tâche à la fin, mais que vous utilisiez un index négatif pour spécifier la position.

const negativeIndexAdd = tasks.toSpliced(-1, 0, 'Check emails');

console.log(negativeIndexAdd);

Sortir:

Suppression et ajout avec un index négatif

Enfin, si vous souhaitez remplacer la dernière tâche par deux nouvelles utilisant un indice négatif,

const negativeIndexReplace = tasks.toSpliced(-1, 1, 'Prepare invoices', 'Send updates');

console.log(negativeIndexReplace);

Sortir:

copierDans()

La méthode copie une séquence d’éléments dans le même tableau, écrasant ainsi les éléments existants.

Syntaxe

array.copyWithin(target, start, end)

Paramètres

• cible: l’index vers lequel copier les éléments.
• commencer: L’index à partir duquel commencer la copie des éléments.
• fin: (facultatif) index pour arrêter la copie, mais non inclus. En cas d’omission, copyUntil() copiera jusqu’à la fin du tableau.

Exemple:

const array = ['apple', 'banana', 'cherry', 'date', 'elderberry'];

// Copy the elements from index 0 to index 3, overwriting elements starting from index 2
array.copyWithin(2, 0, 3);

console.log(array);

Sortir:

Conclusion

Alors que nous concluons la première partie de notre étude des méthodes de tableaux essentielles de JavaScript, gardez à l’esprit que ces techniques fondamentales servent de base à des opérations plus complexes. Restez à l’écoute pour le deuxième chapitreoù nous passerons en revue les fonctions de tableau plus importantes et élargirons notre boîte à outils JavaScript.