Partie 3 / Blogs / Perficient

Bienvenue dans la troisième partie de notre série sur l’amélioration de vos compétences JavaScript grâce aux méthodes de tableau. Après avoir établi une base solide avec des méthodes de tableaux simples, nous sommes maintenant prêts à aborder des méthodes plus avancées. Dans ce blog, nous découvrirons des méthodes de tableaux sophistiquées qui offrent une plus grande flexibilité et puissance dans la manipulation des données. Préparez-vous à débloquer de nouvelles prouesses en matière de programmation alors que nous poursuivons notre plongée approfondie dans les méthodes de tableau de JavaScript. Si vous ne l’avez pas encore fait, assurez-vous d’explorer les méthodes de tableau essentielles dans Partie 1 et Partie 2 de cette série.

Les méthodes de tableau avancées englobent un large éventail de catégories, chacune servant à des fins spécifiques dans la manipulation des données. Ceux-ci inclus:

• Méthodes de recherche et de recherche de tableaux
• Méthodes et astuces de tri des tableaux
• Méthodes d’itération de tableau

Ces catégories fournissent aux développeurs des outils puissants pour localiser des éléments, organiser les données et parcourir efficacement les tableaux, améliorant ainsi les capacités de la programmation JavaScript.

Méthodes de recherche et de recherche de tableaux

indexOf() et lastIndexOf()

Ces méthodes avancées de création de tableaux sont comme des projecteurs dans l’obscurité, vous aidant à localiser exactement l’emplacement d’un élément spécifique dans un tableau. Si l’élément est trouvé, il révèle son index. Indice de() découvre la première occurrence, tandis que dernierIndexOf() révèle le dernier. Cependant, si l’élément est introuvable, ils renvoient -1, indiquant que la recherche a échoué.

Exemple:

const animals = ["Cheetah", "Lion", "Zebra", "Horse", "Cheetah", "Deer"];
const firstIndex = animals.indexOf("Cheetah");
console.log("firstIndex", firstIndex);
const lastIndex = animals.lastIndexOf("Cheetah");
console.log("lastIndex", lastIndex);

Sortir:

inclut()

Il est utilisé pour déterminer si une valeur est incluse dans l’entrée système et renvoie vrai ou faux selon le cas.

Exemple:

const colors = ['red', 'green', 'blue'];
console.log("includes method:")
console.log(colors.includes('green'));
console.log(colors.includes('yellow'));

Sortir:

find() et findIndex()

trouver()

Cette fonction permet de trouver le premier élément du tableau qui remplit une condition. S’il est trouvé, il renvoie l’élément ; sinon, il n’est pas défini.

Exemple:

const movies = ["The Lion King", "Aladdin", "The Jungle Book", "Moana"];
const foundMovie = movies.find((movie) => movie === "Aladdin");
console.log("find method:\n", foundMovie);

Sortir:

trouverIndex()

Il renvoie l’index du premier élément du tableau qui satisfait la fonction de test donnée. Si la fonction ne satisfait aucun élément, elle renverra -1.

Exemple:

const movies = ["The Lion King", "Aladdin", "The Jungle Book", "Moana"];
const index = movies.findIndex((movie) => movie === "Moana");
console.log("findIndex method:\n", index);

Sortir:

trouverDernier()

Cette méthode récupère le dernier élément du tableau qui répond à la condition définie par la fonction de test fournie.

Exemple:

const numbers = [10, 20, 30, 40, 50];
const lastNumber = numbers.findLast(num => num > 20);
console.log("Output:",lastNumber);

Sortir:

trouverLastIndex()

Il récupère l’index du dernier élément du tableau qui remplit les conditions fixées par la fonction de test.

Exemple:

const numbers = [10, 20, 30, 40, 50];
const lastIndex = numbers.findLastIndex(num => num > 20);
console.log("Last index of matched condition:",lastIndex); // Output: 4 (index of 50)

Sortir:

Méthodes d’itération de tableau

pour chaque()

C’est comme si un guide vous faisait visiter un musée, s’arrêtant à chaque exposition en cours de route. La méthode exécute une fonction pour chaque élément d’un tableau.

Exemple:

const numbers = [1, 2, 3, 4, 5];
console.log("forEach method:")
numbers.forEach((num) => console.log(num * 2));

Sortir:

flat() et flatMap()

plat()

Imaginez que vous ayez une pile de plateaux imbriqués, chacun contenant des éléments. flat() revient à retirer tous les éléments de ces plateaux et à les mettre dans un seul plateau, simplifiant ainsi l’organisation.

Exemple:

const nestedArray = [["Peter Pan", "Aladdin"], ["Mulan", "Maleficent"], ["Moana", "Tangled"]];
const flattenedArray = nestedArray.flat();
console.log("flat method:\n",flattenedArray);

Sortir:

flatMap()

C’est comme avoir une pile de cahiers : vous devez examiner chaque page, écrire quelque chose dessus, puis rassembler toutes ces pages dans un nouveau cahier. flatMap() mappe d’abord chaque élément du tableau à l’aide d’une fonction que vous proposez, puis aplatit le résultat dans un nouveau tableau, ce qui facilite sa gestion.

Exemple:

const numbers = [1, 2, 3];
const mappedAndFlattened = numbers.flatMap(num => [num * 2, num * 3]);
console.log("flatMap:\n",mappedAndFlattened);

Sortir:

filtre()

Considérez-le comme un filtre sur une machine à café qui sépare le café moulu du café infusé, garantissant ainsi que seule l’eau pure entre. Filter() en JavaScript recherche chaque élément d’un tableau pour établir une condition spécifique, en stockant uniquement les éléments qui satisfont à la condition et utiliser ces éléments pour créer un nouveau tableau.

Exemple:

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter((num) => num % 2 === 0);
console.log("filter method:\n", evenNumbers);

Sortir:

chaque() et certains()

Ces méthodes sont comme des gardiens, vérifiant chaque élément par rapport à une condition.

chaque():

La condition est vérifiée si tous les éléments sont remplis.

Exemple:

const numbers = [2, 4, 6, 7, 8];
const allEven = numbers.every((num) => num % 2 === 0);
console.log("every method:\n", allEven);

sortir:

quelques():

Vérifie si au moins un élément remplit une condition.

Exemple:

const numbers = [2, 4, 6, 7, 8];
const anyEven = numbers.some((num) => num % 2 === 0);
console.log("some method:\n", anyEven);

Sortir:

réduire():

C’est comme avoir une calculatrice qui vous fournit tous les nombres d’une liste. Vous fournissez une fonction qui indique à la calculatrice un moyen de combiner chaque plage avec le total cumulé.

Syntaxe:

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

Exemple:

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((total, current) => total + current, 0);
console.log("reduce method:\n",sum);

Sortir:

Exemple 2 :

const items = [
  { name: "Shirt", price: 20 },
  { name: "Pants", price: 30 },
  { name: "Shoes", price: 50 },
];

const totalPrice = items.reduce((acc, item) => acc + item.price, 0);
console.log("reduce method:");
console.log("Total Price:", totalPrice);

Sortir:

réduireDroite()

La fonction réduit chaque valeur du tableau (de droite à gauche) par rapport à un accumulateur pour produire une valeur unique.

Exemple:

const arr = [1, 2, 3, 4];
const sum = arr.reduceRight((accumulator, currentValue) => accumulator + currentValue);
console.log("Sum of all numbers:",sum); // Output: 10 (4 + 3 + 2 + 1)

Sortir:

Méthodes de tri des tableaux

1. Tri alphabétique des tableaux

trier():

Les éléments d’un tableau sont triés sur place par la méthode sort() et le tableau trié est renvoyé. Il réorganise les éléments soit sur place, soit en créant un nouveau tableau trié.

Exemple:

const numbers = [36, 17, 84, 01, 65, 19, 22, 16];
const sortedNumbers = numbers.sort();
console.log("sort method:\n",sortedNumbers)

sortir:

inverse()

reverse() L’ordre des éléments dans le tableau est inversé. C’est comme regarder une image miroir de votre tableau. Déplace un tableau vers son emplacement et renvoie une référence au même tableau ; le premier élément du tableau est désormais le dernier et le dernier élément du tableau est le premier.

Exemple:

const animals = ["Cheetah", "Lion", "Zebra", "Horse", "Deer"];
animals.reverse();
console.log("reverse method:");
console.log("Array in reverse order:", animals);

Sortir:

àTrié()

Le tableau est renvoyé avec les éléments triés par ordre croissant.

Exemple:

const numbers = [5, 2, 8, 1, 4];
const sortedNumbers = numbers.toSorted();
console.log("Sorted in ascending order",sortedNumbers);

Sortir:

àInversé()

Renvoie le tableau avec les éléments dans l’ordre inverse.

Exemple:

const numbers = [1, 2, 3, 4, 5];
const reversedNumbers = numbers.toReversed();
console.log("Elements in reverse order:",reversedNumbers);

Sortir:

2. Tri numérique de tableau

Math.min()

Le plus petit nombre parmi les arguments fournis est renvoyé.

Exemple:

const minNumber = Math.min(22,15,34); 
console.log("Smallest number in the series:",minNumber);

Sortir:

Math.max()

La fonction détermine le plus grand nombre parmi les arguments fournis.

Exemple:

const maxNumber = Math.max(10, 45, 20); 
console.log("Largest number in the series:",maxNumber);

Sortir:

Conclusion

Notre exploration des méthodes de tableaux JavaScript nous a conduit des opérations fondamentales à des techniques plus avancées. Ces outils permettent aux développeurs de manipuler efficacement les données et de réfléchir de manière critique à la résolution de problèmes en JavaScript. En maîtrisant ces méthodes, vous améliorerez vos compétences en codage et découvrirez des couches plus profondes du potentiel de JavaScript. Continuez à vous entraîner et à expérimenter pour débloquer des possibilités encore plus grandes dans votre parcours de codage. Pour ceux qui ont commencé ici, pensez à revoir les méthodes essentielles Partie 1 et Partie 2 pour garantir une compréhension complète des bases des baies.