Accueil

5 méthodes de matrice JavaScript à maîtriser aujourd'hui

Added 2019-11-28


Les développeurs Web de tous les niveaux, des programmeurs débutants aux experts en programmation, en viennent à constater l’importance de JavaScript dans le développement de sites Web modernes. JavaScript est tellement dominant qu’il est essentiel de savoir si vous allez créer des applications.

Les tableaux constituent l'un des éléments les plus puissants du langage JavaScript. Les tableaux se trouvent généralement dans de nombreux langages de programmation et sont utiles pour stocker des données.

JavaScript utilise des tableaux mais ajoute des fonctionnalités utiles appelées méthodes de tableau. Il y en a cinq que vous devriez examiner de près pour développer vos compétences en tant que développeur.

Quelles sont les méthodes de tableau?

Méthodes de tableau sont des fonctions intégrées à JavaScript que vous pouvez appliquer à vos tableaux. Chaque méthode a une fonction unique qui effectue une modification ou un calcul dans votre tableau, vous évitant d'avoir à coder à partir de fonctions communes.

Les méthodes de tableaux en JavaScript sont exécutées à l'aide d'une notation par points attachée à votre variable de tableau. S'agissant uniquement de fonctions JavaScript, elles se terminent toujours par des parenthèses pouvant contenir des arguments facultatifs. Voici une méthode attachée à un tableau simple appelémon tableau.

var myArray = [1,2,3];
myArray.pop ();

Ce code appliquerait une méthode appeléepopau tableau.

Exemple de tableau

Pour chaque exemple, utilisons un exemple de tableau que nous appelleronsmon tableau, pour exécuter les méthodes. N'hésitez pas à installer votre console et à coder au fur et à mesure.

var myArray = [2,4,5,7,9,12,14];

Découvrons cinq méthodes puissantes!

1. Array.push ()

Ce qu'il fait:pousser() prend votre tableau et ajoute un ou plusieurs éléments à la fin du tableau, puis renvoie la nouvelle longueur du tableau. Cette méthode modifiera votre tableau existant.

Ajoutons le nombre 20 au tableau en lançantpousser(), en utilisant 20 comme argument.

var myArray = [2,4,5,7,9,12,14];
myArray.push (20);

Voyons si cela a fonctionné

console.log (myArray);
[2,4,5,7,9,12,14,20]

Lancer lepousser() La méthode sur myArray a ajouté la valeur donnée dans l'argument dans le tableau. Dans ce cas, 20. Lorsque vous vérifiez myArray dans la console, vous verrez que la valeur est maintenant ajoutée à la fin du tableau.

2. Array.concat ()

Qu'est-ce que fait:concat () peut fusionner deux ou plusieurs tableaux ensemble dans un nouveau tableau. Il ne modifie pas les tableaux existants mais en crée un nouveau.

Prenonsmon tableau et fusionner un tableau appelénewArray dans ça.

var myArray = [2,4,5,7,9,12,14];
var newArray = [1,2,3];
var result = myArray.concat (newArray);
console.log (résultat);
[2,4,5,7,9,12,14,1,2,3]

Cette méthode fonctionne à merveille lorsque vous utilisez plusieurs tableaux ou valeurs que vous devez combiner, le tout en une étape assez simple lorsque vous utilisez des variables.

3. Array.join ()

Ce qu'il fait:joindre() prend un tableau et concatène le contenu du tableau, séparé par une virgule. Le résultat est placé dans une chaîne. Vous pouvez spécifier un séparateur si vous souhaitez utiliser une alternative à une virgule.

Voyons comment cela fonctionne avec myArray. Commencez par utiliser la méthode par défaut sans argument séparateur, qui utilisera une virgule.

var myArray = [2,4,5,7,9,12,14];
myArray.join ();
"2,4,5,7,9,12,14"

JavaScript va générer une chaîne, chaque valeur du tableau étant séparée par une virgule. Vous pouvez utiliser un argument dans la fonction pour changer le séparateur. Voyons le avec deux arguments: un seul espace et une chaîne.

myArray.join ('');
"2 4 5 7 9 12 14"
myArray.join ('et');
"2 et 4 et 5 et 7 et 9 et 12 et 14"

Le premier exemple est un espace, permettant de lire facilement une chaîne.

Le deuxième exemple utilise(' et ')et il y a deux choses à savoir ici.

Premièrement, nous utilisons le mot ‘et’ pour séparer les valeurs. Deuxièmement, il y a un espace des deux côtés du mot «et». C’est une chose importante à garder à l’esprit lorsque vous utilisezjoindre(). JavaScript lit les arguments littéralement, donc si cet espace est laissé à part, tout sera regroupé (c'est-à-dire «2 et 4 et 5…», etc.) Ce n'est pas une sortie très lisible!

4. Array.forEach ()

Ce qu'il fait:pour chaque() (sensible à la casse!) exécute une fonction sur chaque élément de votre tableau. Cette fonction est une fonction que vous créez, similaire à l’utilisation d’une boucle «pour» pour appliquer une fonction à un tableau, mais avec beaucoup moins de travail de code.

Il y a un peu plus àpour chaque() regardons donc la syntaxe, puis effectuons une fonction simple à démontrer.


myArray.forEach (function (item) {
//code
});

Nous utilisonsmon tableau,pour chaque() est appliqué avec la notation par points. Vous placez la fonction que vous souhaitez utiliser à l'intérieur de la parenthèse d'argument, qui estfonction (article)dans l'exemple.

Parlons defonction (article). C'est la fonction exécutée à l'intérieur de forEach (), et elle a son propre argument. Nous appelons l'argumentarticle. Il y a deux choses à savoir sur cet argument:

  • Lorsque forEach () parcourt votre tableau, il applique le code à cet argument. Considérez-le comme une variable temporaire contenant l'élément en cours.
  • Vous choisissez le nom de l'argument, il peut être nommé comme vous le souhaitez. En règle générale, cela s'appelle quelque chose qui le rend plus facile à comprendre, comme «élément» ou «élément».

Voyant ces deux choses à l’esprit, voyons un exemple simple. Ajoutons 15 à chaque valeur et demandons à la console d’afficher le résultat.


myArray.forEach (function (item) {
    console.log (élément + 15);
});

Nous utilisonsarticledans cet exemple en tant que variable, la fonction est donc écrite pour ajouter 15 à chaque valeur viaarticle. La console imprime ensuite les résultats. Voici à quoi cela ressemble dans une console Google Chrome.

Fonction forEach appliquée à un tableau dans la console JavaScript

Le résultat est chaque nombre dans le tableau, mais avec 15 ajoutés!

5. Array.map ()

Ce qu'il fait:carte() effectue une fonction sur chaque élément de votre tableau et place le résultat dans un nouveau tableau.

Exécuter une fonction sur chaque élément ressemble à forEach (). La différence ici estcarte() crée un nouveau tableau lorsqu'il est exécuté. ForEach () ne crée pas automatiquement un nouveau tableau, vous devez coder une fonction spécifique pour le faire.

Utilisons map () pour doubler la valeur de chaque élément de myArray et les placer dans un nouveau tableau. Vous verrez le mêmefonction (article) syntaxe pour un peu plus de pratique.

var myArray = [2,4,5,7,9,12,14];
var doubleArray = myArray.map (function (item) {
retourner l'article * 2;
});

Voyons les résultats dans la console.

console.log (doubleArray);
[4,8,10,14,18,24,28]

mon tableau est inchangé:

console.log (myArray);
[2,4,5,7,9,12,14]

Prochaines étapes de votre parcours JavaScript

Les tableaux constituent un élément puissant du langage JavaScript. C'est pourquoi de nombreuses méthodes sont intégrées pour vous faciliter la vie en tant que développeur. La meilleure façon de maîtriser ces cinq méthodes est de pratiquer.





Nuage de tags

Choix de L'éditeur

Gadgets technologiques et critiques 2019