15 méthodes de tableau JavaScript que vous devriez maîtriser aujourd’hui
Les développeurs Web de tous niveaux, des programmeurs novices aux experts en codage, commencent à voir l’importance de JavaScript dans le développement de sites Web modernes. JavaScript est si dominant que savoir si vous allez créer une application Web est une compétence essentielle.
Les tableaux sont l’un des blocs de construction les plus puissants intégrés au langage JavaScript. Les tableaux sont courants dans de nombreux langages de programmation et peuvent être utilisés pour stocker des données.
JavaScript inclut également des fonctionnalités utiles appelées méthodes de tableau. Voici 15 façons que vous devriez examiner de plus près pour améliorer vos compétences en tant que développeur.
Qu’est-ce qu’une méthode tableau ?
méthode de tableau est une fonction JavaScript intégrée qui peut être appliquée aux tableaux. Chaque méthode a une fonction unique qui effectue une modification ou un calcul sur votre tableau, vous évitant d’avoir à écrire des fonctions communes à partir de zéro.
Les méthodes de tableau en JavaScript fonctionnent en utilisant la notation par points attachée aux variables de tableau. Comme ce ne sont que des fonctions JavaScript, elles se terminent toujours par des parenthèses pouvant contenir des paramètres facultatifs.Voici une méthode qui s’ajoute à un tableau simple appelé mon tableau.
laissez monTableau = [1,2,3]; monTableau.pop();
Ce code appliquera un Musique pop au tableau.
exemple de tableau
Pour chaque exemple, utilisez le tableau d’exemple que nous appellerons mon tableau, exécutez la méthode. N’hésitez pas à ouvrir votre console et à coder.
Faire une vidéo du jour
laissez monTableau = [2,4,5,7,9,12,14];
Ces exemples supposent que vous comprenez les bases de JavaScript et son fonctionnement. Ce n’est pas grave si vous ne le faites pas, nous sommes tous ici pour apprendre et grandir.
Apprenez-en plus sur ces quinze formations puissantes !
1. Tableau.push()
Ce qu’il peut faire : pousser() Prenez votre tableau et ajoutez un ou plusieurs éléments à la fin du tableau, puis renvoyez la nouvelle longueur du tableau. Cette méthode modifiera votre tableau existant.
Ajoutez le nombre 20 au tableau en exécutant pousser()Utilisez 20 comme paramètre.
laissez monTableau = [2,4,5,7,9,12,14];
monTableau.push(20);
Vérifiez si cela fonctionne :
console.log(monTableau);
[2,4,5,7,9,12,14,20]
Cours pousser() La méthode sur myArray ajoute la valeur donnée dans le paramètre au tableau. Dans ce cas 20. Lorsque vous inspectez myArray dans la console, vous verrez que la valeur est maintenant ajoutée à la fin du tableau.
2. Array.concat()
Ce qu’il peut faire : relier() Deux tableaux ou plus peuvent être fusionnés en un nouveau tableau. Il ne modifie pas un tableau existant, il en crée un nouveau.
prendre mon tableau et fusionner un fichier appelé nouveau tableau va dans.
laissez monTableau = [2,4,5,7,9,12,14];
laisser nouveau tableau = [1,2,3];
let result = myArray.concat(newArray);console.log(result);
[2,4,5,7,9,12,14,1,2,3]
Cette approche fonctionne à merveille lorsqu’il s’agit de plusieurs tableaux ou valeurs qui doivent être combinés, avec une étape très simple lorsque vous travaillez avec des variables.
3. Array.join()
Ce qu’il peut faire : se joindre à() Prend un tableau et concatène le contenu des tableaux, séparés par des virgules. Le résultat est placé dans une chaîne. Si vous souhaitez utiliser une alternative à la virgule, vous pouvez spécifier le délimiteur.
Découvrez comment fonctionne myArray. Utilisez d’abord la méthode par défaut sans paramètre de délimiteur, qui utilisera une virgule.
laissez monTableau = [2,4,5,7,9,12,14];
monTableau.join(); « 2,4,5,7,9,12,14 »
JavaScript affichera une chaîne avec chaque valeur du tableau séparée par une virgule. Vous pouvez utiliser des paramètres dans la fonction pour modifier le délimiteur. Observez-le avec deux arguments : un espace et une chaîne.
monTableau.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 qui permet de lire facilement une chaîne.
Le deuxième exemple utilise (‘ et’)voici deux choses à savoir.
Tout d’abord, nous utilisons le mot « et » pour séparer les valeurs. Deuxièmement, il y a un espace de chaque côté du mot « et ».C’est une chose importante à retenir lors de l’utilisation se joindre à().JavaScript lit littéralement les paramètres ; donc si cet espace est omis, tout est compressé (c’est-à-dire « 2and4and5… » etc.) Pas une sortie très lisible !
4. Array.forEach()
Ce qu’il peut faire : pour chaque() (sensible à la casse !) Exécute une fonction pour chaque élément du tableau. Cette fonction est toute fonction que vous créez, similaire à l’utilisation d’une boucle « for » pour appliquer une fonction à un tableau, mais avec beaucoup moins d’effort de code.
encore une chose pour chaque(); regardez la syntaxe, puis exécutez une fonction simple pour démontrer.
myArray.forEach(fonction(élément){
//code
});
nous utilisons mon tableau, pour chaque() Appliquer la notation par points.Vous mettez la fonction que vous souhaitez utiliser entre parenthèses de paramètres, c’est-à-dire fonction (élément) dans l’exemple.
regarde fonction (élément)C’est la fonction exécutée à l’intérieur de forEach() et elle a ses propres paramètres.nous appelons paramètres choseIl y a deux choses à savoir sur cet argument :
- Lorsque forEach() parcourt votre tableau, il applique du code à ce paramètre. Considérez-le comme une variable temporaire qui contient l’élément actuel.
- Vous choisissez le nom du paramètre, il peut être nommé comme vous le souhaitez. Habituellement, cela sera nommé quelque chose de plus facile à comprendre, comme « élément » ou « élément ».
Avec ces deux choses à l’esprit, jetez un oeil à cet exemple simple. Ajoutez 15 à chaque valeur et laissez la console afficher le résultat.
myArray.forEach(fonction(élément){
journal de la console (élément + 15);
});
nous utilisons chose comme variables dans cet exemple, donc la fonction est écrite en ajoutant 15 à chaque valeur choseEnsuite, la console imprime le résultat. Voici à quoi cela ressemble dans la console Google Chrome.
Le résultat est chaque nombre du tableau, mais avec 15 ajoutés !
5. Array.map()
Ce qu’il peut faire : carte() Exécute une fonction sur chaque élément du tableau et place le résultat dans un nouveau tableau.
L’exécution d’une fonction sur chaque élément ressemble à forEach().La différence ici est carte() Crée un nouveau tableau au moment de l’exécution. forEach() ne crée pas automatiquement un nouveau tableau, vous devez écrire une fonction spécifique pour le faire.
Utilisez map() pour doubler la valeur de chaque élément de myArray et placez-les dans un nouveau tableau.vous verrez la même chose fonction (élément) Grammaire pour plus de pratique.
laissez monTableau = [2,4,5,7,9,12,14]; let doubleArray = myArray.map(function(item){
article de retour * 2;
});
Vérifiez les résultats dans la console.
console.log(doubleArray);
[4,8,10,14,18,24,28]
mon tableau constante:
console.log(monTableau);
[2,4,5,7,9,12,14]
6. Array.unshift()
Ce qu’il fait : Semblable au fonctionnement de la méthode push(), annuler le décalage() La méthode prend votre tableau et ajoute un ou plusieurs éléments au début du tableau au lieu de la fin, et renvoie la nouvelle longueur du tableau. Cette méthode modifiera votre tableau existant.
laissez monTableau = [2,4,5,7,9,12,14];
myArray.unshift(0);
Lors de la connexion du tableau à la console, vous devriez voir le nombre 0 au début du tableau.
console.log(monTableau);
[0, 2,4,5,7,9,12,14]
7. Tableau.sort()
Ce qu’il fait : Le tri est l’une des opérations les plus courantes effectuées sur les tableaux et est très utile. Javascript taper() La méthode array peut être utilisée pour trier des tableaux de nombres ou même des chaînes avec une seule ligne de code. Cette opération est en place, renvoyant le tableau trié en modifiant le tableau initial.prendre un autre ensemble de nombres mon tableau cette fois.
laissez monTableau = [12, 55, 34, 65, 10];
monTableau.sort((a,b) => a – b);
Étant donné que le tri est effectué sur place, vous n’avez pas besoin de déclarer une variable distincte pour le tableau trié.
console.log(monTableau);
[10, 12, 34, 55, 65]
Par défaut, les tableaux sont triés par ordre croissant, mais vous pouvez éventuellement passer une fonction personnalisée à taper() méthode pour trier le tableau de la manière souhaitée. Dans ce cas, je passe une fonction de flèche personnalisée pour trier le tableau par ordre croissant.
8. Array.reverse()
Fonction : Comme son nom l’indique, sens inverse() La méthode est utilisée pour inverser l’ordre des éléments dans un tableau. Notez que cela n’inverse pas le contenu du tableau, seulement l’ordre lui-même. Voici un exemple pour mieux comprendre cette méthode :
laissez monTableau = [2,4,5,7,9,12,14];
monTableau.reverse()
Enregistrez la sortie sur la console pour vérifier le fonctionnement.
console.log(monTableau);
[14, 12, 9, 7, 5, 4, 2]
Comme vous pouvez le voir, l’ordre des éléments a été inversé. Auparavant, l’élément au dernier indice (élément 14 à l’indice 6) est maintenant l’élément au zéro indice, et ainsi de suite.
9. Array.tranche()
Ce qu’il peut faire : pièce() Utilisé pour récupérer une copie superficielle d’une partie d’un tableau. En termes simples, cette méthode vous permet de sélectionner un élément spécifique dans un tableau par index. Vous pouvez transmettre l’index et l’élément de début et l’index de fin facultatif de l’élément à récupérer.
Si aucun index de fin n’est fourni, tous les éléments de l’index de début à la fin du tableau seront récupérés. Cette méthode renvoie un nouveau tableau et ne modifie pas le tableau existant.
laissez monTableau = [2,4,5,7,9,12,14];
laissez slicedArray = myArray.slice(2);
Dans le code ci-dessus, tous les éléments du deuxième index au dernier index sont récupérés car le paramètre d’index de fin n’est pas passé. Connectez les deux baies à la console.
console.log(monTableau);
console.log(slicedArray);
[2, 4, 5, 7, 9, 12, 14]
[5, 7, 9, 12, 14]
Évidemment, la méthode slice() ne modifie pas le tableau initial, mais renvoie un nouveau tableau, qui est stocké dans tableau tranché En changeant.Voici un exemple où le paramètre d’index de fin est également passé à pièce() méthode.
laissez monTableau = [2,4,5,7,9,12,14];
laissez slicedArray = myArray.slice(1, 3);
console.log(slicedArray);
[4, 5]
10. Tableau.splice()
Ce qu’il peut faire : épissure() est une méthode de tableau utile pour supprimer ou remplacer des éléments dans un tableau. Il modifie le tableau en spécifiant l’index et le nombre d’éléments à supprimer.
laissez monTableau = [2,4,5,7,9,12,14];
monTableau.splice(2, 3);
console.log(monTableau);
Dans l’exemple ci-dessus, mon tableau Le tableau est concaténé à partir de l’index 2 et 3 éléments en sont supprimés. Le tableau comprend désormais :
[2, 4, 12, 14]
Pour remplacer des éléments plutôt que de simplement les supprimer, vous pouvez passer n’importe quel nombre d’arguments optionnels avec l’élément à remplacer, comme ceci :
laissez monTableau = [2,4,5,7,9,12,14];
monTableau.splice(2, 3, 1, 2, 3);
console.log(monTableau);
[2, 4, 1, 2, 3, 12, 14]
11. Tableau.filtre()
Ce qu’il fait: filtre() method est une méthode de tableau utile qui prend une fonction contenant un test et renvoie un nouveau tableau contenant tous les éléments qui ont réussi ce test. Comme son nom l’indique, cette méthode est utilisée pour filtrer les éléments dont vous avez besoin parmi d’autres éléments. Le filtrage est effectué à l’aide de fonctions qui renvoient des valeurs booléennes.
Voici un exemple filtre() Une méthode pour obtenir uniquement les éléments divisibles par 2 d’un tableau.
laissez monTableau = [2,4,5,7,9,12,14];
let divisibleByTwo = myArray.filter((number) => number % 2 === 0);
console.log(divisibleByTwo);
Dans l’exemple ci-dessus, la fonction flèche est passée en paramètre, elle prend chaque nombre du tableau d’origine et utilise le modulo (%) et égalité (===) opérateur. Voici à quoi ressemble la sortie :
[2, 4, 12, 14]
12. Tableau.reduce()
Ce qu’il peut faire : réduire() est une méthode tableau, il faut…
