Code intelligent! Soyez un développeur JavaScript plus rapide, plus productif et plus heureux en maîtrisant ces fonctions les plus importantes et les plus récurrentes du langage.
Que ce soit le backend ou le frontend (ou même vaisseaux spatiaux), JavaScript est partout. C'est aussi un langage assez flexible (ce qui signifie qu'il a des modèles de programmation fonctionnels hardcore ainsi que de bonnes classes), et sa similitude avec d'autres langages «C-like» facilite la transition pour les développeurs d'autres langages.
Si tu veux améliorez votre jeu JS, Je vous suggère d'apprendre, de pratiquer et éventuellement de maîtriser les fonctions de base suivantes disponibles dans la langue. Tous ces éléments ne sont pas strictement «nécessaires» pour résoudre les problèmes, mais ils peuvent faire beaucoup de travail pour vous dans certains cas, tandis que dans d'autres, ils peuvent réduire la quantité de code à écrire.
map()
Ce serait une hérésie d'écrire un article sur les fonctions JavaScript importantes et de ne pas mentionner map()! 😆😆 Avec filter() et reduce(), map() forme une sorte de sainte trinité. Ce sont des fonctions que vous utiliserez à maintes reprises dans votre carrière, elles valent donc plus que la peine d'être vues. Abordons-les un par un, en commençant par map().
map() fait partie de ces fonctions qui posent le plus de problèmes aux personnes qui apprennent JavaScript. Pourquoi? Non pas parce qu'il y a quelque chose de complexe en soi, mais parce que le fonctionnement de cette fonction est une idée tirée de ce qu'on appelle la programmation fonctionnelle. Et comme nous ne sommes pas exposés à la programmation fonctionnelle - nos écoles et l'industrie étant pleines de langages orientés objet - le fonctionnement semble étrange ou même faux à nos cerveaux biaisés.
JavaScript est beaucoup plus fonctionnel que orienté objet, bien que ses versions modernes fassent de leur mieux pour masquer ce fait. Mais c'est toute une boîte de vers que je pourrais peut-être ouvrir un autre jour. 🤣 D'accord, alors, map() . . .
map() est une fonction très simple; il s'attache à un tableau et nous aide à convertir unité item en quelque chose d'autre, résultant en un nouveau tableau. La façon exacte de convertir un élément est fournie comme une autre fonction, qui, par convention, est anonyme.
C'est tout ce qu'on peut en dire! La syntaxe peut prendre un certain temps pour s'y habituer, mais c'est essentiellement ce que nous faisons dans un map() fonction. Pourquoi voudrions-nous utiliser map()? Cela dépend de ce que nous essayons de réaliser. Par exemple, disons que nous avons enregistré la température pour chaque jour de la semaine dernière et l'avons stockée sous forme de tableau simple. Cependant, on nous dit maintenant que les instruments n'étaient pas très précis et ont rapporté une température inférieure de 1.5 degré à ce qu'ils auraient dû.
Nous pouvons faire cette correction en utilisant le map() fonctionne comme ceci:
const weeklyReadings = [20, 22, 20.5, 19, 21, 21.5, 23];
const correctedWeeklyReadings = weeklyReadings.map(reading => reading + 1.5);
console.log(correctedWeeklyReadings); // gives [ 21.5, 23.5, 22, 20.5, 22.5, 23, 24.5 ]Un autre exemple, très pratique, vient du monde de React, où la création de listes d'éléments DOM à partir de tableaux est un modèle courant; donc, quelque chose comme ça est courant:
export default ({ products }) => {
return products.map(product => {
return (
<div className="product" key={product.id}>
<div className="p-name">{product.name}</div>
<div className="p-desc">{product.description}</div>
</div>
);
});
};Ici, nous avons un fonctionnel Réagir composant qui reçoit une liste de produits comme accessoires. À partir de cette liste (tableau), il construit ensuite une liste de "divs" HTML, convertissant essentiellement chaque objet produit en HTML. L'original products l'objet reste intact.
Vous pouvez dire que map() n'est rien d'autre qu'un glorifié for boucle et vous auriez tout à fait raison. Mais notez que dès que vous faites cet argument, c'est votre esprit formé orienté objet qui parle, alors que ces fonctions et leur raison d'être proviennent de la programmation fonctionnelle, où l'uniformité, la compacité et l'élégance sont très vénérées. 🙂
filter()
filter() est une fonction très utile que vous vous retrouverez à appliquer encore et encore dans de nombreuses situations. Comme son nom l'indique, cette fonction filtre un tableau en fonction des règles / de la logique que vous fournissez et renvoie un nouveau tableau contenant des éléments qui satisfont à ces règles.
Réutilisons notre exemple météo. Supposons que nous ayons un tableau contenant les températures maximales pour chaque jour de la semaine dernière; maintenant, nous voulons savoir combien de ces jours ont été plus froids. Oui, «plus froid» est un terme subjectif, alors disons que nous recherchons des jours où la température était inférieure à 20. Nous pouvons le faire en utilisant le filter() fonctionne comme ceci:
const weeklyReadings = [20, 22, 20.5, 19, 21, 21.5, 23];
const colderDays = weeklyReadings.filter(dayTemperature => {
return dayTemperature < 20;
});
console.log("Total colder days in week were: " + colderDays.length); // 1Notez que la fonction anonyme à laquelle nous passons filter() doit renvoyer une valeur booléenne: true or false. C'est ainsi filter() saura s'il faut ou non inclure cet élément dans le tableau filtré. Vous êtes libre d'écrire n'importe quelle quantité de logique complexe dans cette fonction anonyme; vous pouvez effectuer des appels API et lire les entrées utilisateur, et ainsi de suite, tant que vous vous assurez qu'à la fin, vous renvoyez une valeur booléenne.
Il faut se méfier: Ceci est une note d'accompagnement que je me sens obligé de fournir sur la base de mon expérience en tant que développeur JavaScript. Que ce soit à cause de négligence ou de mauvais fondamentaux, de nombreux programmeurs créent des bogues subtils dans leurs programmes lors de l'utilisation filter(). Réécrivons le code précédent pour contenir le bogue:
const weeklyReadings = [20, 22, 20.5, 19, 21, 21.5, 23];
const colderDays = weeklyReadings.filter(dayTemperature => {
return dayTemperature < 20;
});
if(colderDays) {
console.log("Yes, there were colder days last week");
} else {
console.log("No, there were no colder days");
}Remarquez quelque chose? Excellent travail si vous l'avez fait! le if condition vers la fin des contrôles colderDays, qui est en fait un tableau! Vous serez surpris du nombre de fois où les gens font cette erreur alors qu'ils se précipitent pour respecter les délais ou codent avec humilité (pour une raison quelconque). Le problème avec cette condition est que JavaScript est un langage étrange et incohérent à bien des égards, et la «véracité» des choses en est une. Tandis que [] == true renvoie false, vous faisant penser que le code ci-dessus n'est pas cassé, la réalité est qu'à l'intérieur d'un if état, [] évalue à vrai! En d'autres termes, le code que nous avons écrit ne dira jamais qu'il n'y a pas eu de jours plus froids la semaine dernière.
Le correctif est très simple, comme indiqué dans le code avant le code ci-dessus. Nous vérifions colderDays.length, qui est garanti pour nous donner un entier (zéro ou plus) et donc travailler de manière cohérente dans les comparaisons logiques. Notez que filter() sera toujours, toujours, toujours renvoie un tableau, vide ou non vide, afin que nous puissions nous en remettre et écrire nos comparaisons logiques en toute confiance.
Cela a été un détour plus long que prévu, mais des bugs comme celui-ci méritent d'être soulignés en dix mille mots, en majuscules si nécessaire. J'espère que cela ne vous mordra pas et que vous vous épargnerez des centaines d'heures d'efforts de débogage! 🙂
reduce()
De toutes les fonctions de cet article, ainsi que de la bibliothèque JavaScript standard, reduce() est parmi les pionniers pour les couronnes de «confus et bizarre». Bien que cette fonction soit très importante et aboutisse à un code élégant dans de nombreuses situations, elle est évitée par la plupart des développeurs JavaScript et préfèrent écrire du code plus détaillé à la place.
La raison en est que - et je serai honnête ici! - reduce() est difficile à comprendre, au sens à la fois du concept et de l'exécution. Quand vous lisez sa description, vous l'avez relue plusieurs fois et encore, vous doutez de vous-même si vous l'avez mal lue; et quand vous le voyez en action et essayez de visualiser comment il fonctionne, votre cerveau se tord en mille nœuds! 🤭
Maintenant, n'ayez pas peur. le reduce() la fonction n'est nulle part proche de la complexité et de l'intimidation de, disons, Arbres B + et leurs algorithmes. C'est juste que ce type de logique est rarement rencontré pendant le travail quotidien d'un programmeur moyen.
Donc, après avoir effrayé la lumière du jour et vous avoir immédiatement dit de ne pas vous inquiéter, j'aimerais enfin vous montrer ce qu'est cette fonction et pourquoi exactement nous pourrions en avoir besoin.
Comme son nom l'indique, reduce() est habitué à réduire quelque chose. La chose qu'elle réduit est un tableau et la chose à laquelle elle réduit le tableau donné est une valeur unique (nombre, chaîne, fonction, objet, peu importe). Voici une façon plus simple de le dire - reduce() transforme un tableau en une valeur unique. Notez que la valeur de retour de reduce() n'est pas un tableau, ce qui est le cas avec map() et filter(). Avoir compris cela représente déjà la moitié de la bataille. 🙂
Maintenant, il est assez évident que si nous allons transformer (réduire) un tableau, nous devons fournir la logique nécessaire; et sur la base de votre expérience en tant que développeur JS, vous avez presque déjà deviné que nous le faisons en utilisant une fonction. Cette fonction est ce que nous appelons la fonction réductrice, qui forme le premier argument de reduce(). Le deuxième argument est une valeur de départ, comme un nombre, une chaîne, etc. (je vais vous expliquer dans un instant ce qu'est cette «valeur de départ»).
Sur la base de notre compréhension jusqu'à présent, nous pouvons dire qu'un appel à reduce() ressemble à ça: array.reduce(reducerFunction, startingValue). Abordons maintenant le cœur de tout cela: la fonction réducteur. Comme déjà établi, la fonction réductrice est ce qui dit reduce() comment convertir le tableau en une valeur unique. Il prend deux arguments: une variable pour agir comme un accumulateur (ne vous inquiétez pas, je vais vous expliquer ce bit aussi), et une variable pour stocker la valeur actuelle.
Je sais je sais . . . c'était beaucoup de terminologie pour une seule fonction qui n'est même pas obligatoire en JavaScript. 😝😝 Et c'est pourquoi les gens fuient reduce(). Mais si vous l'apprenez étape par étape, non seulement vous le comprendrez, mais vous l'apprécierez également à mesure que vous deviendrez un meilleur développeur.
Bon, donc, revenons au sujet à l'étude. La «valeur de départ» transmise à reduce() est . . . enfin, la valeur de départ du calcul que vous souhaitez utiliser. Par exemple, si vous allez effectuer une multiplication dans la fonction de réduction, une valeur de départ de 1 logique; pour plus, vous pourriez commencer par 0, Et ainsi de suite.
Regardons maintenant la signature de la fonction de réduction. Une fonction de réduction transmise à reduce() a la forme suivante: reducerFunction(accumulator, currentValue). «Accumulateur» est juste un nom sophistiqué pour la variable qui collecte et contient le résultat du calcul; c'est exactement comme utiliser une variable appelée total pour additionner tous les éléments d'un tableau en utilisant quelque chose comme total += arr[i]. C'est exactement comment le réducteur fonctionne reduce() est appliqué: l'accumulateur est initialement défini sur la valeur de départ que vous fournissez, puis un par un les éléments du tableau sont visités, le calcul est effectué et le résultat est stocké dans l'accumulateur, et ainsi de suite. . .
Alors, quelle est cette «valeur actuelle» dans une fonction réductrice? C'est la même idée que vous imagineriez mentalement si je vous demandais de parcourir un tableau: vous prendriez une variable pour commencer à l'index zéro et la faire avancer d'un pas à la fois. Pendant que vous faites cela, si je vous demande de vous arrêter soudainement, vous vous retrouverez sur l'un des éléments du tableau, non? C'est ce que nous entendons par valeur courante: c'est la valeur de la variable utilisée pour représenter l'élément du tableau qui est actuellement à l'étude (pensez à boucler sur un tableau si cela vous aide).
Cela dit, il est temps de voir un exemple simple et de voir comment tout ce jargon se réunit dans un reduce() appel. Disons que nous avons un tableau contenant le premier n nombres naturels (1, 2, 3 . . . n) et nous souhaitons trouver la factorielle de n. Nous savons que trouver n! il suffit de tout multiplier, ce qui nous conduit à cette implémentation:
const numbers = [1, 2, 3, 4, 5];
const factorial = numbers.reduce((acc, item) => acc * item, 1);
console.log(factorial); // 120Il se passe beaucoup de choses dans ces trois lignes de code, alors décompressons-les une par une dans le contexte de la (très longue) discussion que nous avons eue jusqu'à présent. Comme il est évident, numbers est le tableau qui contient tous les nombres que nous voulons multiplier. Ensuite, jetez un œil à la numbers.reduce() call, qui indique que la valeur de départ de acc devrait être 1 (parce qu'il n'influence ni ne détruit aucune multiplication). Ensuite, vérifiez le corps de la fonction de réduction, `(acc, item) => acc * item, qui dit simplement que la valeur de retour pour chaque itération sur le tableau doit être cet élément multiplié par ce qui est déjà dans l'accumulateur. L'itération et le stockage explicite de la multiplication dans l'accumulateur sont ce qui se passe dans les coulisses et est l'une des principales raisons reduce() est une telle pierre d'achoppement pour les développeurs JavaScript.
Pourquoi utiliser reduce()?
C'est une très bonne question et pour être honnête, je n'ai pas de réponse sûre. Peu importe reduce() peut être fait par des boucles, forEach(), etc. Cependant, ces techniques génèrent beaucoup plus de code, ce qui le rend difficile à lire, surtout si vous êtes pressé. Ensuite, il y a le souci de l'immuabilité: avec reduce() et des fonctions similaires, vous pouvez être sûr que vos données d'origine n'ont pas été mutées; cela élimine en soi des classes entières de bogues, en particulier dans les applications distribuées.
Enfin, reduce() est beaucoup plus flexible, en ce sens que l'accumulateur peut être un objet, un tableau ou même une fonction si nécessaire; il en va de même pour la valeur de départ et d'autres parties de l'appel de fonction - presque tout peut entrer, et presque tout peut sortir, il y a donc une flexibilité extrême dans la conception de code réutilisable.
Si vous n'êtes toujours pas convaincu, c'est parfaitement normal aussi; la communauté JavaScript elle-même est fortement divisée sur la «compacité», «l'élégance» et la «puissance» de reduce(), donc ce n'est pas grave si vous ne l'utilisez pas. 🙂 Mais assurez-vous de regarder certains exemples soignés avant de décider de mettre reduce().
some()
Disons que vous avez un tableau d'objets, chaque objet représentant une personne. Vous voulez savoir s'il y a des personnes dans le tableau qui ont plus de 35 ans. Notez qu'il n'est pas nécessaire de compter le nombre de ces personnes, encore moins d'en récupérer une liste. Ce que nous disons ici est l'équivalent de «un ou plusieurs» ou «au moins un».
Comment est-ce que tu fais ça?
Oui, vous pouvez créer une variable d'indicateur et faire une boucle sur le tableau pour résoudre ce problème comme ceci:
const persons = [
{
name: 'Person 1',
age: 32
},
{
name: 'Person 2',
age: 40
},
];
let foundOver35 = false;
for (let i = 0; i < persons.length; i ++) {
if(persons[i].age > 35) {
foundOver35 = true;
break;
}
}
if(foundOver35) {
console.log("Yup, there are a few people here!")
}Le problème? Le code est trop semblable à C ou à Java, à mon avis. «Verbose» est un autre mot qui me vient à l'esprit. JS expérimenté pourrait penser à «laid», «horrible», etc. 😝 Et à juste titre, je dirais. Une façon d'améliorer ce morceau de code consiste à utiliser quelque chose comme map(), mais même dans ce cas, la solution est un peu maladroite.
Il s'avère que nous avons une fonction plutôt soignée appelée some() déjà disponible dans la langue principale. Cette fonction utilise des tableaux et accepte une fonction de «filtrage» personnalisée, renvoyant une valeur booléenne de true or false. Essentiellement, il fait ce que nous essayons de faire depuis quelques minutes, de manière très succincte et élégante. Voici comment nous pouvons l'utiliser:
const persons = [
{
name: 'Person 1',
age: 32
},
{
name: 'Person 2',
age: 40
},
];
if(persons.some(person => {
return person.age > 35
})) {
console.log("Found some people!")
}Même entrée, même résultat qu'avant; mais remarquez la réduction massive du code! Remarquez aussi à quel point le fardeau cognitif est considérablement réduit car nous n'avons plus besoin d'analyser le code ligne par ligne comme si nous étions nous-mêmes l'interprète! Le code se lit maintenant presque comme un langage naturel.
every()
Tout comme some(), nous avons une autre fonction utile appelée every(). Comme vous pouvez le deviner maintenant, cela renvoie également une valeur booléenne selon que tous les éléments du tableau passent le test donné. Bien entendu, le test à réussir est fourni la plupart du temps sous forme de fonction anonyme. Je vous épargnerai la douleur de ce à quoi pourrait ressembler une version naïve du code, alors voici comment every() est utilisé:
const entries = [
{
id: 1
},
{
id: 2
},
{
id: 3
},
];
if(entries.every(entry => {
return Number.isInteger(entry.id) && entry.id > 0;
})) {
console.log("All the entries have a valid id")
}Comme il est évident, le code vérifie tous les objets du tableau pour un id propriété. La définition de «valide» dépend du contexte du problème, mais comme vous pouvez le voir, pour ce code, j'ai considéré des entiers non négatifs. Une fois de plus, nous voyons à quel point le code est simple et élégant à lire, ce qui est le seul objectif de cette (ces) fonction (s) (et similaire).
includes()
Comment vérifiez-vous l'existence de sous-chaînes et d'éléments de tableau? Eh bien, si vous êtes comme moi, vous atteignez rapidement indexOf() puis recherchez les documents pour vous faire connaître ses valeurs de retour possibles. C'est un inconvénient considérable, et les valeurs de retour sont difficiles à retenir (rapide - qu'est-ce qu'un processus retournant 2 au système d'exploitation?).
Mais il y a une belle alternative que nous pouvons utiliser: includes(). L'utilisation est aussi simple que le nom et le code qui en résulte est extrêmement réconfortant. Gardez à l'esprit que la correspondance est effectuée par includes() est sensible à la casse, mais je suppose que c'est ce à quoi nous nous attendons tous intuitifs de toute façon. Et maintenant, le temps du code!
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.includes(4));
const name = "Ankush";
console.log(name.includes('ank')); // false, because first letter is in small caps
console.log(name.includes('Ank')); // true, as expectedCependant, n'attendez pas trop de cette modeste méthode:
const user = {a: 10, b: 20};
console.log(user.includes('a')); // blows up, as objects don't have a "includes" methodIl ne peut pas regarder à l'intérieur des objets car il n'est tout simplement pas défini pour les objets. Mais bon, nous savons que cela fonctionne sur des tableaux, alors peut-être que nous pouvons faire une supercherie ici. . . 🤔.
const persons = [{name: 'Phil'}, {name: 'Jane'}];
persons.includes({name: 'Phil'});Alors, que se passe-t-il lorsque vous exécutez ce code? Cela n'explose pas, mais le résultat est également décevant: false. 😫😫 En fait, cela a à voir avec les objets, les pointeurs et la façon dont JavaScript voit et gère la mémoire, qui est un monde à part. Si vous souhaitez plonger plus profondément, n'hésitez pas à franchir le pas (peut-être commencer ici), mais je vais m'arrêter ici.
We vous faire en sorte que le code ci-dessus se comporte si nous le réécrivons comme suit, mais à ce stade, cela devient plus ou moins une blague, à mon avis:
const phil = {name: 'Phil'};
const persons = [phil, {name: 'Jane'}];
persons.includes(phil); // truePourtant, cela montre que nous pouvons faire includes() fonctionne sur des objets, donc je suppose que ce n'est pas un désastre total. 😄
slice()
Supposons que nous ayons une chaîne, et je vous demande de renvoyer une partie de celle-ci qui commence par «r» et se termine par «z» (les caractères réels ne sont pas importants). Comment l'aborderiez-vous? Vous pourriez peut-être créer une nouvelle chaîne et l'utiliser pour stocker tous les caractères nécessaires et les renvoyer. Ou si vous êtes comme la plupart des programmeurs, vous me donneriez deux indices de tableau en retour: l'un indiquant le début de la sous-chaîne, l'autre marquant la fin.
Ces deux approches sont bonnes, mais il existe un concept appelé découpage qui offre une solution soignée dans de telles situations. Heureusement, il n'y a pas de théorie abstruse à suivre; trancher signifie exactement ce que cela ressemble - créer une chaîne / un tableau plus petit à partir de celui donné, un peu comme nous créons des tranches de fruits. Voyons ce que je veux dire, à l'aide d'un exemple simple:
const headline = "And in tonight's special, the guest we've all been waiting for!";
const startIndex = headline.indexOf('guest');
const endIndex = headline.indexOf('waiting');
const newHeadline = headline.slice(startIndex, endIndex);
console.log(newHeadline); // guest we've all beenLorsque nous slice(), nous fournissons deux indices à JavaScript - l'un où nous voulons commencer le découpage et l'autre où nous voulons qu'il s'arrête. La prise avec slice() est que l'index de fin est non inclus dans le résultat final, c'est pourquoi nous voyons que le mot «attente» est absent du nouveau titre du code ci-dessus.
Des concepts comme le tranchage sont plus importants dans d'autres langues, notamment Python. Si vous demandez à ces développeurs, ils vous diront qu'ils ne peuvent pas imaginer la vie sans cette fonctionnalité, et à juste titre lorsque le langage fournit une syntaxe très soignée pour le découpage.
Le tranchage est soigné et extrêmement pratique, et il n'y a aucune raison de ne pas l'utiliser. Ce n'est pas non plus du sucre de syntaxe criblé de pénalités de performances, car il crée des copies superficielles du tableau / de la chaîne d'origine. Pour les développeurs JavaScript, j'ai fortement recommandé de se familiariser avec slice() et l'ajouter à votre arsenal!
splice()
Procédé splice() sonne comme un cousin de slice(), et à certains égards, nous pouvons affirmer que c'est le cas. Les deux créent de nouveaux tableaux / chaînes à partir de ceux d'origine, avec une petite mais importante différence - splice() supprime, modifie ou ajoute des éléments mais modifie le tableau d'origine. Cette «destruction» du tableau d'origine peut créer d'énormes problèmes si vous ne faites pas attention ou si vous ne comprenez pas les copies et références profondes. Je me demande ce qui empêchait les développeurs d'utiliser la même approche que pour slice() et laissez le tableau d'origine intact, mais je suppose que nous pouvons être plus indulgents envers une langue créé en seulement dix jours.
Nonobstant mes plaintes, voyons comment splice() travaux. Je vais montrer un exemple où nous supprimons quelques éléments d'un tableau, car c'est l'utilisation la plus courante que vous trouverez pour cette méthode. Je m'abstiendrai également de fournir des exemples d'ajout et d'insertion car ceux-ci peuvent être facilement recherchés et sont également simples.
const items = ['eggs', 'milk', 'cheese', 'bread', 'butter'];
items.splice(2, 1);
console.log(items); // [ 'eggs', 'milk', 'bread', 'butter' ]L'appel à splice() ci-dessus dit: commencer à l'index 2 (la troisième place, c'est-à-dire) du tableau et supprimez un élément. Dans le tableau donné, «cheese» est le troisième élément, il est donc supprimé du tableau et le tableau d'éléments est raccourci, comme prévu. Au fait, les articles supprimés sont retournés par splice() sous la forme ou dans un tableau, donc si nous le voulions, nous aurions pu capturer «cheese» dans une variable.
Dans mon expérience, indexOf() et splice() ont une grande synergie - nous trouvons l'index d'un élément, puis le supprimons du tableau donné. Cependant, notez que ce n'est pas toujours la méthode la plus efficace et que souvent l'utilisation de clés d'objet (l'équivalent d'une carte de hachage) est beaucoup plus rapide.
shift()
shift() est une méthode pratique de sortes et est utilisée pour supprimer le premier élément d'un tableau. Notez que la même chose peut être faite avec splice(), mais shift() est un peu plus facile à retenir et intuitif lorsque tout ce que vous avez à faire est de couper le premier élément.
const items = ['eggs', 'milk', 'cheese', 'bread', 'butter'];
items.shift()
console.log(items); // [ 'milk', 'cheese', 'bread', 'butter' ]unshift()
De même que shift() supprime le premier élément d'un tableau, unshift() ajoute un nouvel élément au début du tableau. Son utilisation est tout aussi simple et compacte:
const items = ['eggs', 'milk'];
items.unshift('bread')
console.log(items); // [ 'bread', 'eggs', 'milk' ]Cela dit, je ne peux pas m'en empêcher et avertir ceux qui découvrent le jeu: contrairement au populaire push() et pop() Méthodes, shift() et unshift() sont extrêmement inefficaces (à cause du fonctionnement des algorithmes sous-jacents). Ainsi, si vous utilisez de grands tableaux (par exemple, plus de 2000 éléments), un trop grand nombre de ces appels de fonction peuvent interrompre votre application.
fill()
Parfois, vous devez changer plusieurs éléments en une seule valeur ou même «réinitialiser» l'ensemble du tableau, pour ainsi dire. Dans ces situations, fill() vous évite les boucles et les erreurs ponctuelles. Il peut être utilisé pour remplacer tout ou partie du tableau par la valeur donnée. Voyons quelques exemples:
const heights = [1, 2, 4, 5, 6, 7, 1, 1];
heights.fill(0);
console.log(heights); // [0, 0, 0, 0, 0, 0, 0, 0]
const heights2 = [1, 2, 4, 5, 6, 7, 1, 1];
heights2.fill(0, 4);
console.log(heights2); // [1, 2, 4, 5, 0, 0, 0, 0]Autres fonctions à mentionner
Bien que la liste ci-dessus soit ce que la plupart des développeurs JavaScript finissent par rencontrer et utiliser dans leur carrière, elle n'est en aucun cas complète. Il y a tellement plus de fonctions (méthodes) mineures mais utiles dans JavaScript qu'il ne sera pas possible de les couvrir toutes dans un seul article. Cela dit, quelques-uns qui me viennent à l'esprit sont les suivants:
reverse()sort()entries()fill()find()flat()
Je vous encourage à au moins les consulter afin que vous ayez une idée de l'existence de telles commodités.
Conclusion
JavaScript est une grande langue, malgré le petit nombre de concepts de base à apprendre. Les nombreuses fonctions (méthodes) dont nous disposons constituent l'essentiel de cette grande taille. Cependant, comme JavaScript est un langage secondaire pour la plupart mobiles, nous ne plongons pas assez profondément, manquant de nombreuses fonctions belles et utiles qu'il offre. En fait, il en va de même pour les concepts de programmation fonctionnelle, mais c'est un sujet pour un autre jour! 😅
Chaque fois que vous le pouvez, passez du temps à explorer le langage de base (et si possible, les célèbres bibliothèques utilitaires telles que Lodash). Même quelques minutes passées à faire cet effort se traduiront par des gains de productivité massifs et un code beaucoup plus propre et plus compact.
