Les 11 fonctions JavaScript les plus connues (et plus encore !)

Codez intelligemment ! Devenez un développeur JavaScript plus rapide, plus productif et plus heureux en maîtrisant les fonctions les plus importantes et les plus récurrentes du langage.

Qu'il s'agisse d'un backend ou d'un frontend (ou même d'un vaisseaux spatiaux), JavaScript est partout. Il s'agit également d'un langage assez flexible (il possède des modèles de programmation fonctionnelle purs et durs ainsi que de bonnes vieilles classes), et sa similitude avec d'autres langages de type "C" facilite la transition pour les développeurs issus d'autres langages.

Si vous voulez Améliorez votre jeu JSJe vous suggère d'apprendre, de pratiquer et finalement de maîtriser les fonctions de base suivantes disponibles dans le langage. Toutes ces fonctions ne sont pas strictement "nécessaires" pour résoudre les problèmes, mais elles peuvent faire beaucoup de travail pour vous dans certains cas, tandis que dans d'autres, elles peuvent réduire la quantité de code que vous devez é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 trinité sacrée. Il s'agit de fonctions que vous utiliserez à maintes reprises au cours de votre carrière, et qui valent donc la peine d'être examinées. Abordons-les l'une après l'autre, en commençant par map().

map() fait partie des fonctions qui donnent le plus de fil à retordre aux personnes qui apprennent JavaScript. Pourquoi ? Non pas parce qu'elle est intrinsèquement complexe, mais parce que la façon dont cette fonction fonctionne est une idée tirée de ce que l'on appelle la programmation fonctionnelle. Et comme nous ne sommes pas exposés à la programmation fonctionnelle - nos écoles et l'industrie étant remplies de langages orientés objet - le fonctionnement de cette fonction semble étrange, voire erroné, à nos cerveaux biaisés.

JavaScript est bien plus fonctionnel qu'orienté objet, bien que ses versions modernes fassent de leur mieux pour cacher ce fait. Mais c'est là toute une boîte de Pandore que j'ouvrirai peut-être un autre jour. 🤣 D'accord, donc, map() . . .

map() est une fonction très simple ; elle s'attache à un tableau et nous aide à convertir chacun en quelque chose d'autre, ce qui donne un nouveau tableau. La manière exacte de convertir un élément est fournie par une autre fonction qui, par convention, est anonyme.

C'est tout ce qu'il y a à faire ! Il faut peut-être s'habituer à la syntaxe, mais c'est essentiellement ce que nous faisons dans une map() fonction. Pourquoi voudrions-nous utiliser map()? Cela dépend de ce que nous essayons de faire. Par exemple, supposons que nous ayons enregistré la température pour chaque jour de la semaine écoulée et que nous l'ayons stockée dans un simple tableau. Cependant, on nous dit maintenant que les instruments n'étaient pas très précis et qu'ils ont enregistré une température inférieure de 1,5 degré à ce qu'ils auraient dû.

Nous pouvons effectuer cette correction à l'aide de la fonction map() comme suit :

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 ; ainsi, quelque chose comme ceci est courant :

export default ({ produits }) => {
    return products.map(product => {
        return (
            <div classname="product" key="{product.id}">
                <div classname="p-name">{nom.produit}</div>
                <div classname="p-desc">{product.description}</div>
            </div>
        );
    });
};

Ici, nous avons une fonction Réagir qui reçoit une liste de produits comme accessoire. À partir de cette liste (tableau), il construit une liste de "divs" HTML, convertissant essentiellement chaque objet produit en HTML. Le composant products reste inchangé.

On peut dire que map() n'est rien d'autre qu'un for et vous auriez tout à fait raison. Mais remarquez que dès que vous avancez cet argument, c'est votre esprit orienté objet qui parle, alors que ces fonctions et leur raison d'être viennent de la programmation fonctionnelle, où l'uniformité, la compacité et l'élégance sont hautement vénérées 🙂 .

filter()

filter() est une fonction très utile que vous utiliserez à maintes reprises dans de nombreuses situations. Comme son nom l'indique, cette fonction filtre un tableau sur la base des règles/logiques que vous lui fournissez et renvoie un nouveau tableau contenant les éléments qui satisfont à ces règles.

Reprenons notre exemple de la météo. Supposons que nous disposions d'un tableau contenant les températures maximales pour chaque jour de la semaine dernière ; nous voulons maintenant savoir combien de ces jours ont été plus froids. Oui, "plus froid" est un terme subjectif, alors disons que nous recherchons les jours où la température était inférieure à 20. Pour ce faire, nous pouvons utiliser la fonction filter() comme suit :

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); // 1

Notez que la fonction anonyme que nous passons à filter() doit renvoyer une valeur booléenne : true ou false. C'est ainsi que filter() saura s'il faut ou non inclure cet élément dans le tableau filtré. Vous êtes libre d'écrire n'importe quelle logique complexe à l'intérieur de cette fonction anonyme ; vous pouvez faire des appels à l'API et lire les entrées de l'utilisateur, et ainsi de suite, tant que vous vous assurez qu'au final, vous renvoyez une valeur booléenne.

Attention : Il s'agit d'une note secondaire que je me sens obligé de fournir sur la base de mon expérience en tant que développeur JavaScript. Que ce soit par négligence ou à cause de mauvaises bases, de nombreux programmeurs créent des bogues subtils dans leurs programmes lorsqu'ils utilisent la fonction 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");
}

Vous avez remarqué quelque chose ? Si c'est le cas, bravo ! Les if l'état vers les contrôles de fin d'année colderDaysqui est en fait un tableau ! Vous serez surpris de constater le nombre de fois où les gens commettent cette erreur alors qu'ils s'efforcent de respecter les délais ou qu'ils codent avec un moral en berne (pour une raison ou une autre). Le problème est que JavaScript est un langage étrange et incohérent à bien des égards, et la "véracité" des choses en fait partie. Alors que [] == true renvoie false, ce qui vous fait penser que le code ci-dessus n'est pas cassé, mais la réalité est qu'à l'intérieur d'un if l'état, [] est évaluée à true ! 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.

La solution est très simple, comme indiqué dans le code précédant le code ci-dessus. Nous vérifions la présence de colderDays.lengthqui est garantie de donner un entier (zéro ou plus) et donc de fonctionner de manière cohérente dans les comparaisons logiques. Notez que filter() sera toujours, toujours, toujours renvoient un tableau, vide ou non, ce qui nous permet de nous y fier et d'écrire nos comparaisons logiques en toute confiance.

Le détour a été plus long que prévu, mais des bugs comme celui-ci valent la peine d'être soulignés en dix mille mots, en majuscules si nécessaire. J'espère que vous n'en serez pas victime et que vous vous épargnerez des centaines d'heures de débogage 🙂 .

reduce()

De toutes les fonctions de cet article, ainsi que de la bibliothèque JavaScript standard, reduce() est l'une des premières à pouvoir prétendre aux couronnes de "déroutant et bizarre". Bien que cette fonction soit très importante et permette d'obtenir un code élégant dans de nombreuses situations, elle est évitée par la plupart des développeurs JavaScript, qui préfèrent écrire un code plus verbeux.

La raison en est que - et je vais être honnête ! - reduce() est difficile à comprendre, tant au niveau du concept que de l'exécution. Lorsque vous lisez sa description, vous la relisez plusieurs fois et vous doutez toujours d'avoir mal lu ; et lorsque vous la voyez en action et que vous essayez de visualiser comment elle fonctionne, votre cerveau se tord en mille nœuds ! 🤭

N'ayez pas peur. Les reduce() est loin d'être aussi complexe et intimidante que, par exemple, la fonction B+ Arbres et leurs algorithmes. C'est simplement que ce type de logique est rarement rencontré dans le travail quotidien du programmeur moyen.

Après vous avoir fait peur et vous avoir immédiatement dit de ne pas vous inquiéter, j'aimerais enfin vous montrer ce qu'est cette fonction et pourquoi nous en avons besoin.

Comme son nom l'indique, reduce() est utilisé pour, eh bien, réduire quelque chose. La chose qu'il réduit est un tableau et la chose à laquelle il réduit le tableau donné est une valeur unique (nombre, chaîne de caractères, fonction, objet, etc.). Voici une façon plus simple de l'exprimer - reduce() transforme un tableau en une seule valeur. Notez que la valeur de retour de reduce() n'est pas un tableau, ce qui est le cas de map() et filter(). Avoir compris cela, c'est déjà la moitié de la bataille 🙂 .

Il est évident que si nous voulons transformer (réduire) un tableau, nous devons fournir la logique nécessaire ; et d'après votre expérience en tant que développeur JS, vous avez probablement déjà deviné que nous le faisons en utilisant une fonction. Cette fonction est ce que nous appelons la fonction reducer, qui constitue le premier argument de reduce(). Le second argument est une valeur de départ, comme un nombre, une chaîne de caractères, etc. (je vous expliquerai plus tard ce qu'est cette "valeur de départ").

Sur la base de ce que nous avons compris jusqu'à présent, nous pouvons dire qu'un appel à reduce() ressemble à ceci : array.reduce(reducerFunction, startingValue). Abordons maintenant le cœur de l'affaire : la fonction de réduction. Comme nous l'avons déjà établi, la fonction de réduction est ce qui dit à reduce() comment convertir le tableau en une seule valeur. Elle prend deux arguments : une variable qui sert d'accumulateur (ne vous inquiétez pas, je vous expliquerai également cette partie), et une variable qui stocke 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 s'éloignent de reduce(). Mais si vous l'apprenez pas à pas, non seulement vous le comprendrez, mais vous l'apprécierez en devenant un meilleur développeur.

Bon, revenons-en au sujet qui nous occupe. La "valeur de départ" transmise à reduce() est ... eh bien, la valeur de départ pour le calcul que vous voulez utiliser. Par exemple, si vous allez effectuer une multiplication dans la fonction de réduction, une valeur de départ de 1 a du sens ; par exemple, vous pourriez commencer par 0et ainsi de suite.

Examinons maintenant la signature de la fonction de réduction. Une fonction réductrice passée à reduce() a la forme suivante : reducerFunction(accumulator, currentValue). "Accumulateur" est juste un nom fantaisiste pour la variable qui recueille et conserve le résultat du calcul ; c'est exactement comme si on utilisait 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 la façon dont la fonction de réduction de reduce() est appliquée : l'accumulateur est d'abord fixé à la valeur de départ que vous avez fournie, 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 ....

Qu'est-ce que cette "valeur courante" dans une fonction de réduction ? C'est la même idée que vous imaginez mentalement si je vous demande de parcourir un tableau : vous prenez une variable qui commence à l'index zéro et vous la faites 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, n'est-ce pas ? C'est ce que nous entendons par valeur courante : il s'agit de la valeur de la variable utilisée pour représenter l'élément du tableau qui est actuellement considéré (imaginez une boucle sur un tableau si cela vous aide).

Ceci étant dit, il est temps de voir un exemple simple et de voir comment tout ce jargon s'articule dans une situation réelle. reduce() appel. Supposons que nous ayons un tableau contenant le premier n les nombres naturels (1, 2, 3 . . . n) et nous souhaitons trouver la factorielle de n. Nous savons que pour trouver n! il suffit de tout multiplier, ce qui nous amène à cette mise en œuvre :

const numbers = [1, 2, 3, 4, 5];
const factorial = numbers.reduce((acc, item) => acc * item, 1);
console.log(factorial); // 120

Il se passe beaucoup de choses dans ces trois lignes de code, aussi allons-nous les décortiquer une à une dans le contexte de la (très longue) discussion que nous avons eue jusqu'à présent. C'est évident, numbers est le tableau qui contient tous les nombres que nous voulons multiplier. Ensuite, nous jetons un coup d'œil au tableau numbers.reduce() qui indique que la valeur de départ de l'appel acc devrait être 1 (parce qu'il n'influence ni ne détruit aucune multiplication). Ensuite, vérifiez le corps de la fonction du réducteur, `(acc, item) => acc * itemqui dit simplement que la valeur de retour pour chaque itération sur le tableau doit être cet élément multiplié par ce qui se trouve déjà dans l'accumulateur. L'itération et le stockage explicite de la multiplication dans l'accumulateur sont ce qui se passe en coulisses, et c'est l'une des principales raisons pour lesquelles le système reduce() est une véritable pierre d'achoppement pour les développeurs JavaScript.

Pourquoi utiliser reduce()?

C'est une excellente question et, pour être honnête, je n'ai pas de réponse toute faite. Quoi qu'il en soit reduce() peut se faire par le biais de boucles, forEach()etc. Cependant, ces techniques produisent beaucoup plus de code, ce qui le rend difficile à lire, surtout si l'on est pressé. Il y a aussi le problème de l'immutabilité : avec reduce() et d'autres fonctions similaires, vous pouvez être sûr que vos données d'origine n'ont pas été modifiées, ce qui permet d'éliminer des catégories entières de bogues, en particulier dans les applications distribuées.

Enfin, reduce() est beaucoup plus flexible, dans le sens où 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 y entrer, et presque tout peut en sortir, ce qui offre une flexibilité extrême dans la conception d'un code réutilisable.

Si vous n'êtes toujours pas convaincu, ce n'est pas grave non plus ; la communauté JavaScript elle-même est fortement divisée sur la "compacité", l'"élégance" et la "puissance" de reduce()Il n'y a donc pas de problème si vous ne l'utilisez pas 🙂 Mais n'oubliez pas de jeter un coup d'œil à certains documents de la Commission européenne. des exemples clairs avant de décider de mettre en bac reduce().

some()

Supposons que vous disposiez d'un tableau d'objets, chaque objet représentant une personne. Vous voulez savoir si le tableau contient des personnes âgées de plus de 35 ans. Notez qu'il n'est pas nécessaire de compter le nombre de ces personnes, et encore moins d'en extraire une liste. Ce que nous disons ici est l'équivalent de "un ou plusieurs" ou "au moins un".

Comment procéder ?

Oui, vous pouvez créer une variable "drapeau" et parcourir le tableau en boucle pour résoudre ce problème de la manière suivante :

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 proche du C ou du Java, à mon avis. "Verbose" est un autre mot qui me vient à l'esprit. Les JS expérimentés pourraient penser à "laid", "horrible", etc. 😝 Et à juste titre, je dirais. Une façon d'améliorer ce morceau de code est d'utiliser quelque chose comme map()mais même dans ce cas, la solution est un peu maladroite.

Il s'avère que nous disposons d'une fonction plutôt soignée appelée some() déjà disponible dans le langage de base. Cette fonction travaille sur des tableaux et accepte une fonction de "filtrage" personnalisée, renvoyant une valeur booléenne de true ou false. Essentiellement, il fait ce que nous essayons de faire depuis quelques minutes, mais 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 que précédemment ; mais remarquez la réduction massive du code ! Remarquez également à quel point la charge cognitive est réduite, 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 désormais presque comme un langage naturel.

every()

Tout comme some()Nous disposons d'une autre fonction utile appelée every(). Comme vous pouvez le deviner, cette fonction renvoie également une valeur booléenne selon que tous les éléments du tableau passent le test donné. Bien entendu, le test à passer est fourni sous la forme d'une fonction anonyme la plupart du temps. Je vous épargnerai la douleur de ce à quoi une version naïve du code pourrait ressembler, voici donc comment procéder 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 on peut s'en douter, le code vérifie tous les objets du tableau à la recherche d'une valeur de 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 but de cette (et d'autres) fonction(s) similaire(s).

includes()

Comment vérifier l'existence de sous-chaînes et d'éléments de tableaux ? Si vous êtes comme moi, vous avez vite fait d'utiliser la fonction indexOf() et ensuite consulter la documentation pour connaître les valeurs de retour possibles. C'est un inconvénient de taille, et les valeurs de retour sont difficiles à mémoriser (rapide - qu'est-ce qu'un processus qui retourne 2 au système d'exploitation ?).

Mais il existe une alternative intéressante que nous pouvons utiliser : includes(). L'utilisation est aussi simple que le nom, et le code résultant 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 que nous attendons tous intuitivement de toute façon. Et maintenant, place au 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 expected

Cependant, n'attendez pas trop de cette humble méthode :

const user = {a: 10, b: 20};
console.log(user.includes('a')); // blows up, as objects don't have a "includes" method

Il ne peut pas regarder à l'intérieur des objets car il n'est tout simplement pas défini pour les objets. Mais nous savons qu'il fonctionne sur les tableaux, alors peut-être pouvons-nous faire quelques tours de passe-passe... . . 🤔.

const persons = [{name: 'Phil'}, {name: 'Jane'}];
persons.includes({name: 'Phil'});

Que se passe-t-il lorsque vous exécutez ce code ? Il n'explose pas, mais le résultat est également décevant : false. 😫😫 En fait, cela concerne les objets, les pointeurs, et la façon dont JavaScript voit et gère la mémoire, ce qui est un monde à part entière. Si vous souhaitez plonger plus profondément, n'hésitez pas à vous lancer (peut-être commencer ici), mais je m'arrêterai ici.

Nous peut Le code ci-dessus peut se comporter si nous le réécrivons comme suit, mais à ce stade, il devient plus ou moins une plaisanterie, à mon avis :

const phil = {name: 'Phil'};
const persons = [phil, {name: 'Jane'}];
persons.includes(phil); // true

Néanmoins, cela montre que nous pouvons faire includes() fonctionne sur les objets, donc je suppose que ce n'est pas un désastre total. 😄

slice()

Supposons que nous ayons une chaîne de caractères et que je vous demande d'en renvoyer une partie qui commence par "r" et se termine par "z" (les caractères réels ne sont pas importants). Quelle serait votre approche ? Vous pourriez créer une nouvelle chaîne de caractères et l'utiliser pour stocker tous les caractères nécessaires et les renvoyer. Ou bien, 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 la fin.

Ces deux approches sont valables, mais il existe un concept appelé "slicing" (découpage en tranches) qui offre une solution efficace dans de telles situations. Heureusement, il n'y a pas de théorie absconse à suivre ; le découpage signifie exactement ce qu'il veut dire : créer une chaîne/un tableau plus petit à partir d'une chaîne/un tableau 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 been

Lorsque nous slice()Dans ce cas, nous fournissons deux indices à JavaScript - celui où nous voulons commencer le découpage, et celui où nous voulons l'arrêter. Le problème avec slice() est que l'indice de fin est non inclus dans le résultat final, ce qui explique que le mot "attente" soit absent du nouveau titre dans le code ci-dessus.

Les concepts tels que le découpage en tranches sont plus importants dans d'autres langages, notamment le Python. Si vous interrogez ces développeurs, ils vous diront qu'ils ne peuvent pas imaginer leur vie sans cette fonctionnalité, et ce à juste titre puisque le langage fournit une syntaxe très soignée pour le découpage.

Le découpage est propre et extrêmement pratique, et il n'y a aucune raison de ne pas l'utiliser. Il ne s'agit pas non plus d'un sucre syntaxique pénalisant pour les performances, puisqu'il crée des copies peu profondes du tableau ou de la chaîne de caractères d'origine. Pour les développeurs JavaScript, je recommande vivement de se familiariser avec slice() et de l'ajouter à votre arsenal !

splice()

La méthode splice() ressemble à un cousin de slice()et, d'une certaine manière, on peut dire que c'est le cas. Les deux créent de nouveaux tableaux/chaînes à partir des tableaux/chaînes 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 original peut créer d'énormes problèmes si vous n'êtes pas prudent ou si vous ne comprenez pas les copies profondes et les références. Je me demande ce qui a empêché les développeurs d'utiliser la même approche que pour slice() et laisser le tableau original intact, mais je pense que nous pouvons être plus indulgents envers un langage créé en seulement dix jours.

Nonobstant mes réclamations, voyons comment splice() fonctionne. Je montrerai un exemple dans lequel nous supprimons quelques éléments d'un tableau, car c'est l'utilisation la plus courante de cette méthode. Je m'abstiendrai également de donner des exemples d'addition et d'insertion, car ils peuvent être facilement consulté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, donc) 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. D'ailleurs, les éléments supprimés sont retournés par splice() sous la forme d'un tableau, de sorte que si nous l'avions voulu, nous aurions pu saisir "cheese" dans une variable.

D'après mon expérience, indexOf() et splice() ont une grande synergie - nous trouvons l'index d'un élément et nous le supprimons du tableau donné. Cependant, notez que ce n'est pas toujours la méthode la plus efficace, et que l'utilisation d'un objet (l'équivalent d'une carte de hachage) est souvent beaucoup plus rapide.

shift()

shift() est une sorte de méthode de commodité qui permet de 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()

Tout comme 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'empêcher de mettre en garde les néophytes : contrairement aux populaires push() et pop() des méthodes, shift() et unshift() sont extrêmement inefficaces (en raison de la manière dont les algorithmes sous-jacents fonctionnent). Ainsi, si vous travaillez sur de grands tableaux (disons plus de 2000 éléments), un trop grand nombre d'appels à ces fonctions peut entraîner l'arrêt de votre application.

fill()

Il est parfois nécessaire de remplacer plusieurs éléments par une seule valeur, voire de "réinitialiser" l'ensemble du tableau, pour ainsi dire. Dans ces situations, fill() vous évite les boucles et les erreurs de type "off-by-one". Il peut être utilisé pour remplacer une partie ou la totalité 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 corresponde à ce que la plupart des développeurs JavaScript rencontrent et utilisent au cours de leur carrière, elle est loin d'être exhaustive. Il existe tellement de fonctions (méthodes) mineures mais utiles en JavaScript qu'il n'est pas possible de les couvrir toutes dans un seul article. Cela dit, en voici quelques-unes qui me viennent à l'esprit :

• reverse()
• sort()
• entries()
• fill()
• find()
• flat()

Je vous encourage à les consulter au moins pour avoir une idée de l'existence de telles commodités.

Conclusion

JavaScript est un grand langage, malgré le petit nombre de concepts de base à apprendre. Les nombreuses fonctions (méthodes) dont nous disposons constituent l'essentiel de cette taille. Cependant, étant donné que JavaScript est un langage secondaire pour la plupart des développeursNous n'allons pas assez loin, et nous passons à côté de nombreuses fonctions magnifiques 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 fameuses bibliothèques utilitaires telles que Lodash). Même quelques minutes consacrées à cet effort se traduiront par des gains de productivité considérables et par un code beaucoup plus propre et compact.