Home-theater-designers
Les développeurs Web de tous niveaux, des programmeurs débutants aux experts en codage, découvrent l'importance de JavaScript dans le développement de sites Web modernes. JavaScript est si dominant qu'il est essentiel de savoir si vous allez créer des applications Web.
Les tableaux sont l'un des blocs de construction les plus puissants intégrés au langage JavaScript. Les tableaux sont couramment trouvés dans de nombreux langages de programmation et sont utiles pour stocker des données.
JavaScript inclut également des fonctionnalités utiles connues sous le nom de méthodes de tableau. En voici quinze que vous devriez examiner de près pour développer vos compétences en tant que développeur.
Que 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 sur votre tableau, vous évitant d'avoir à coder des fonctions communes à partir de zéro.
Les méthodes de tableau en JavaScript sont exécutées à l'aide d'une notation par points attachée à votre variable de tableau. Comme ce ne sont que des fonctions JavaScript, elles se terminent toujours par des parenthèses qui peuvent contenir des arguments facultatifs. Voici une méthode attachée à un simple tableau appelé montableau .
let myArray = [1,2,3]; myArray.pop();Ce code appliquerait une méthode appelée pop au tableau.
Exemple de tableau
Pour chaque exemple, utilisez un exemple de tableau que nous appellerons montableau , pour exécuter les méthodes sur. N'hésitez pas à sortir votre console et votre code.
let myArray = [2,4,5,7,9,12,14];Ces exemples supposent que vous connaissez les fondements de qu'est-ce que JavaScript et comment il fonctionne . Si vous ne le faites pas, ce n'est pas grave, nous sommes tous là pour apprendre et grandir.
Plongez dans ces quinze puissantes méthodes de tableau !
1. Tableau.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.
Ajoutez le nombre 20 au tableau en exécutant pousser() , en utilisant 20 comme argument.
let myArray = [2,4,5,7,9,12,14];
myArray.push(20);Vérifiez si cela a fonctionné :
console.log(myArray); [2,4,5,7,9,12,14,20]Exécuter le pousser() 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. Tableau.concat()
Ce qu'il fait: concaté() peut fusionner deux ou plusieurs tableaux dans un nouveau tableau. Il ne modifie pas les tableaux existants mais en crée un nouveau.
Prendre montableau et fusionner un tableau appelé nouveauTableau dans ça.
let myArray = [2,4,5,7,9,12,14];
let newArray = [1,2,3];
let result = myArray.concat(newArray); console.log(result); [2,4,5,7,9,12,14,1,2,3]Cette méthode fonctionne à merveille lorsque vous traitez plusieurs tableaux ou valeurs que vous devez combiner, le tout en une seule étape assez simple lors de l'utilisation de variables.
3. Array.join()
Ce qu'il fait: rejoindre() 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.
Jetez un œil à la façon dont cela fonctionne en utilisant myArray. D'abord en utilisant la méthode par défaut sans argument séparateur, qui utilisera une virgule.
let myArray = [2,4,5,7,9,12,14];
myArray.join(); '2,4,5,7,9,12,14'JavaScript affichera une chaîne, chaque valeur du tableau étant séparée par une virgule. Vous pouvez utiliser un argument dans la fonction pour modifier le séparateur. Observez-le avec deux arguments : un seul espace et une chaîne.
myArray.join(' ');
'2 4 5 7 9 12 14' myArray.join(' and ');
'2 and 4 and 5 and 7 and 9 and 12 and 14'Le premier exemple est un espace, faisant une chaîne que vous pouvez facilement lire.
Le deuxième exemple utilise (' et ') , et il y a deux choses à savoir ici.
Tout d'abord, 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 lors de l'utilisation rejoindre() . JavaScript lit les arguments littéralement ; donc si cet espace est laissé de côté, tout sera regroupé (c'est-à-dire '2and4and5...' etc.) 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 n'importe quelle fonction que vous créez, similaire à l'utilisation d'une boucle 'for' pour appliquer une fonction à un tableau mais avec beaucoup moins de travail à coder.
Il y a un peu plus à pour chaque() ; regardez la syntaxe, puis exécutez une fonction simple à démontrer.
myArray.forEach(function(item){
//code
});
Nous utilisons montableau , 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 est fonction (élément) dans l'exemple.
Jeter un coup d'œil à fonction (élément) . C'est la fonction exécutée à l'intérieur de forEach(), et elle a son propre argument. Nous appelons l'argument Objet . Il y a deux choses à savoir sur cet argument :
- Lorsque forEach() boucle sur votre tableau, il applique le code à cet argument. Considérez-le comme une variable temporaire qui contient l'élément actuel.
- Vous choisissez le nom de l'argument, il peut être nommé comme vous le souhaitez. Typiquement, cela serait nommé quelque chose qui le rend plus facile à comprendre, comme « élément » ou « élément ».
Avec ces deux choses à l'esprit, consultez cet exemple simple. Ajoutez 15 à chaque valeur et demandez à la console d'afficher le résultat.
myArray.forEach(function(item){
console.log(item + 15);
});
Nous utilisons Objet dans cet exemple en tant que variable, la fonction est donc écrite pour ajouter 15 à chaque valeur via Objet . La console imprime ensuite les résultats. Voici à quoi cela ressemble dans une console Google Chrome.
Le résultat est tous les nombres du tableau, mais avec 15 ajoutés !
5. Array.map ()
Ce qu'il fait: carte() exécute une fonction sur chaque élément de votre 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 lors de l'exécution. forEach() ne crée pas automatiquement un nouveau tableau, vous devrez coder 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. tu verras pareil fonction (élément) syntaxe pour un peu plus de pratique.
let myArray = [2,4,5,7,9,12,14]; let doubleArray = myArray.map(function(item){
return item * 2;
});Vérifiez les résultats dans la console.
console.log(doubleArray); [4,8,10,14,18,24,28]montableau est inchangé :
console.log(myArray); [2,4,5,7,9,12,14]6. Array.unshift()
Ce qu'il fait : Similaire au fonctionnement de la méthode push(), le unshift() 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.
let myArray = [2,4,5,7,9,12,14];
myArray.unshift(0);Lors de la connexion de la baie à la console, vous devriez voir le numéro 0 au début de la baie.
console.log(myArray); [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 un tableau et est très utile. JavaScript sorte() La méthode array peut être utilisée pour trier un tableau de nombres ou même de chaînes avec une seule ligne de code. Cette opération est en place et retourne le tableau trié en modifiant le tableau initial. Prenez un autre ensemble de nombres pour montableau cette fois.
let myArray = [12, 55, 34, 65, 10];
myArray.sort((a,b) => a - b);Étant donné que le tri est effectué sur place, vous n'avez pas à déclarer une variable distincte pour le tableau trié.
console.log(myArray); [10, 12, 34, 55, 65]Par défaut, le tableau est trié par ordre croissant, mais vous pouvez éventuellement passer une fonction personnalisée au sorte() méthode pour trier le tableau de la manière souhaitée. Dans ce cas, j'ai passé une coutume fonction flèche pour trier le tableau numériquement dans l'ordre croissant.
8. Array.reverse()
Ce qu'il fait : Comme son nom l'indique, le inverser() La méthode est utilisée pour inverser l'ordre des éléments dans le tableau. Notez que cela n'inverse pas le contenu du tableau mais juste l'ordre lui-même. Voici un exemple pour mieux comprendre cette méthode :
let myArray = [2,4,5,7,9,12,14];
myArray.reverse()Connectez la sortie à la console pour vérifier l'opération.
console.log(myArray); [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 index (élément 14 à l'index 6) est maintenant l'élément au zéroième index et ainsi de suite.
9. Array.slice()
Ce qu'il fait: tranche() est utilisé pour récupérer une copie superficielle d'une partie d'un tableau. En termes plus simples, cette méthode vous permet de sélectionner des éléments spécifiques d'un tableau par leur index. Vous pouvez passer l'index de départ de l'élément à partir duquel vous souhaitez récupérer les éléments et et éventuellement l'index de fin également.
Si vous ne fournissez pas l'index de fin, 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 l'existant.
let myArray = [2,4,5,7,9,12,14];
let 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 puisque le paramètre end index n'est pas passé. Connectez les deux baies à la console.
console.log(myArray);
console.log(slicedArray); [2, 4, 5, 7, 9, 12, 14]
[5, 7, 9, 12, 14]
Évidemment, le tableau initial n'est pas modifié par la méthode slice() et renvoie à la place un nouveau tableau qui est stocké dans le tableautranché variable. Voici un exemple dans lequel le paramètre d'index de fin est également passé au tranche() méthode.
let myArray = [2,4,5,7,9,12,14];
let slicedArray = myArray.slice(1, 3);
console.log(slicedArray); [4, 5]10. Tableau.splice()
Ce qu'il fait: épissure() est une méthode de tableau utile utilisée pour supprimer ou remplacer des éléments dans le tableau en place. En spécifiant l'index et le nombre d'éléments à supprimer, il modifie le tableau.
let myArray = [2,4,5,7,9,12,14];
myArray.splice(2, 3);
console.log(myArray);Dans l'exemple ci-dessus, le montableau le tableau est épissé à partir de l'index 2 et 3 éléments en sont supprimés. Le tableau se compose désormais de :
[2, 4, 12, 14]Pour remplacer les éléments plutôt que de simplement les supprimer, vous pouvez passer n'importe quel nombre de paramètres facultatifs avec les éléments que vous souhaitez remplacer, comme ceci :
comment enregistrer un appel sur iphone sans application
let myArray = [2,4,5,7,9,12,14];
myArray.splice(2, 3, 1, 2, 3);
console.log(myArray); [2, 4, 1, 2, 3, 12, 14]11. Array.filter()
Ce qu'il fait : Le filtre() method est une méthode de tableau utile qui prend une fonction contenant un test et renvoie un nouveau tableau avec tous les éléments qui réussissent ce test. Fidèle à son nom, cette méthode est utilisée pour filtrer les éléments dont vous avez besoin des autres éléments. Le filtrage se fait à l'aide d'une fonction qui renvoie une valeur booléenne.
Voici un exemple de filtre() méthode utilisée pour obtenir uniquement les éléments du tableau qui sont divisibles par 2.
let myArray = [2,4,5,7,9,12,14];
let divisibleByTwo = myArray.filter((number) => number % 2 === 0);
console.log(divisibleByTwo);Dans l'exemple ci-dessus, une fonction flèche est transmise en tant que paramètre qui prend chaque nombre du tableau d'origine et vérifie s'il est divisible par 2 à l'aide du modulo ( % ) et égalité ( === ) opérateur. Voici à quoi ressemble la sortie :
[2, 4, 12, 14]12. Tableau.reduce()
Ce qu'il fait: réduire() est une méthode de tableau qui prend une fonction de réduction et l'exécute sur chaque élément du tableau pour générer une valeur unique lors du retour. Il prend une fonction de réduction avec une variable d'accumulateur et une variable d'élément courant comme paramètres requis. La valeur de l'accumulateur est mémorisée dans toutes les itérations et est finalement renvoyée après l'itération finale.
Un cas d'utilisation courant de cette méthode consiste à calculer la somme de tous les éléments du tableau. La mise en œuvre de cette fonctionnalité est la suivante :
let myArray = [2,4,5,7,9,12,14];
let sumOfNums = myArray.reduce((sum, currentNum) => sum + currentNum, 0);0 est passé comme deuxième paramètre dans l'exemple ci-dessus, qui est utilisé comme valeur initiale de la variable d'accumulateur. Les sommeDeNums La variable contiendra la valeur de retour de la réduire() méthode qui devrait être la somme de tous les éléments du tableau.
console.log(sumOfNums); 5313. Tableau.includes()
Ce qu'il fait : rechercher un élément dans un tableau pour vérifier s'il est présent est une opération qui est utilisée assez fréquemment et, par conséquent, JavaScript a une méthode intégrée pour cela sous la forme de comprend () méthode de tableau. Voici comment vous pouvez l'utiliser :
let myArray = [2,4,5,7,9,12,14];
console.log(myArray.includes(4));
console.log(myArray.includes(2, 1));
console.log(myArray.includes(12, 2));
console.log(myArray.includes(18));Cette méthode prend un paramètre obligatoire, l'élément à rechercher et un paramètre facultatif, l'index du tableau à partir duquel commencer la recherche. Selon que cet élément est présent ou non, il renverra vrai ou faux respectivement. Par conséquent, la sortie sera :
true
false
true
false14. Tableau.indexOf()
Ce qu'il fait: Indice de() La méthode est utilisée pour trouver l'indice auquel la première occurrence d'un élément spécifié peut être trouvée dans le tableau. Bien qu'elle soit similaire à la méthode include(), cette méthode renvoie l'index numérique ou -1 si l'élément n'est pas présent dans le tableau.
let myArray = [2,4,5,7,9,12,14];
console.log(myArray.indexOf(4));
console.log(myArray.indexOf('4'));
console.log(myArray.indexOf(9, 2));Indice de() La méthode utilise l'égalité stricte pour vérifier si un élément est présent, ce qui signifie que la valeur, ainsi que le type de données, doivent être les mêmes. Le deuxième paramètre facultatif prend l'index à partir duquel commencer la recherche. Sur la base de ces critères, la sortie ressemblera à ceci :
1
-1
415. Tableau.fill()
Ce qu'il fait : souvent, vous devrez peut-être définir toutes les valeurs du tableau sur une valeur statique telle que 0. Au lieu d'utiliser une boucle, vous pouvez essayer le remplir() méthode dans le même but. Vous pouvez appeler cette méthode sur un tableau avec 1 paramètre obligatoire : la valeur avec laquelle remplir le tableau et 2 paramètres facultatifs : l'index de début et de fin à remplir entre. Cette méthode modifie le tableau existant.
let myArray = [2,4,5,7,9,12,14];
let array1 = myArray.fill(0);
myArray = [2,4,5,7,9,12,14];
let array2 = myArray.fill(0, 2);
myArray = [2,4,5,7,9,12,14];
let array3 = myArray.fill(0, 1, 3);Lors de la connexion de la sortie à la console, vous verrez :
console.log(array1);
console.log(array2);
console.log(array3); [0, 0, 0, 0, 0, 0, 0]
[2, 4, 0, 0, 0, 0, 0]
[2, 0, 0, 7, 9, 12, 14]Prochaines étapes de votre parcours JavaScript
Les tableaux sont une partie puissante du langage JavaScript, c'est pourquoi il existe tant de méthodes intégrées pour vous faciliter la vie en tant que développeur. La meilleure façon de maîtriser ces quinze méthodes est de pratiquer.
Au fur et à mesure que vous continuez à apprendre JavaScript, MDN est une excellente ressource pour une documentation détaillée. Installez-vous confortablement dans la console, puis améliorez vos compétences avec les meilleurs éditeurs JavaScript pour les programmeurs. Prêt à créer votre site Web avec JavaScript ? Pourquoi ne pas jeter un œil à certains cadres que vous pouvez envisager.
Partager Partager Tweeter E-mail 6 frameworks JavaScript à apprendreIl existe de nombreux frameworks JavaScript pour aider au développement. Voici quelques-uns que vous devriez savoir.
Lire la suite Rubriques connexes- La programmation
- JavaScript
- Conseils de codage
Nitin est un développeur de logiciels passionné et un étudiant en génie informatique qui développe des applications Web à l'aide des technologies JavaScript. Il travaille en tant que développeur Web indépendant et aime écrire pour Linux et la programmation pendant son temps libre.
Plus de Nitin RanganathAbonnez-vous à notre newsletter
Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !
Cliquez ici pour vous abonner