JavaScript est un langage complexe. Si vous, à n'importe quel niveau, êtes engagé dans le développement JavaScript, cela signifie qu'il est vital pour vous de comprendre les concepts de base de ce langage. Le matériel, dont nous publions aujourd'hui la traduction, couvre 12 concepts JavaScript essentiels. Bien sûr, le développeur JavaScript doit en savoir beaucoup plus, mais sans ce dont nous allons parler aujourd'hui, il ne peut certainement pas le faire.
1. Variables stockant des valeurs et des références
Comprendre comment les valeurs des variables sont attribuées exactement en JavaScript est extrêmement important pour ceux qui veulent écrire du code fonctionnant correctement. Une mauvaise compréhension de ce mécanisme conduit à écrire des programmes dans lesquels les valeurs des variables peuvent changer par inadvertance.
JavaScript, si une entité possède l'un des types primitifs (en particulier, les types
Boolean ,
null ,
undefined ,
String et
Number ), fonctionne toujours avec la valeur de cette entité. Autrement dit, la valeur est écrite dans la variable correspondante. Si nous parlons d'un objet (par exemple, les types
Object ,
Array ,
Function ), alors lors de son affectation à une variable, une référence lui est écrite, l'adresse à laquelle il se trouve en mémoire.
Prenons un exemple. Dans l'extrait de code suivant, une chaîne est écrite dans
var1 . Après cela, la valeur de
var2 écrite dans la variable
var2 . Étant donné que la variable
var1 a un type primitif (
String ), une copie de la chaîne disponible dans
var1 var2 écrite dans
var1 . Cela nous permet de considérer
var2 comme une variable complètement indépendante de
var1 , bien qu'elle stocke la même valeur que
var1 . L'écriture d'une nouvelle valeur dans
var1 n'affecte pas
var1 .
let var1 = 'My string'; let var2 = var1; var2 = 'My new string'; console.log(var1);
Considérons maintenant un exemple de travail avec des objets.
let var1 = { name: 'Jim' } let var2 = var1; var2.name = 'John'; console.log(var1);
Comme vous pouvez le voir, nous travaillons ici avec la variable
var2 , et ce qui lui arrive est reflété dans la variable
var1 car ils stockent une référence au même objet. Il est facile d'imaginer ce que cela peut entraîner dans du code réel si quelqu'un décide que les variables qui stockent des objets se comportent de la même manière que les variables qui stockent des valeurs de types primitifs. Cela est particulièrement désagréable, par exemple, dans les cas où ils créent une fonction conçue pour fonctionner avec la valeur d'objet qui lui est transmise, et cette fonction modifie cette valeur par inadvertance.
2. Court-circuits
La fermeture est un modèle de conception important en JavaScript qui vous permet d'organiser le travail protégé avec des variables. Dans l'exemple suivant, la fonction
createGreeter() renvoie une fonction anonyme qui a accès à l'argument d'origine fourni avec l'argument d'
greeting contenant la chaîne
Hello . Une référence à cette fonction anonyme est écrite dans la variable
sayHello . Après cela, quel que soit le nombre de fois que nous appelons la fonction
sayHello() , elle aura toujours accès à la valeur d'
greeting . Dans ce cas, l'accès au
greeting d'
greeting ne sera qu'une fonction anonyme, dont un lien sera enregistré dans
sayHello .
function createGreeter(greeting) { return function(name) { console.log(greeting + ', ' + name); } } const sayHello = createGreeter('Hello'); sayHello('Joe');
C'était un exemple très simple. Si nous regardons quelque chose de plus proche du monde réel, nous pouvons imaginer, par exemple, une fonction de connexion à une certaine API (appelons-la
apiConnect() ), qui, lors de son premier appel, reçoit une clé d'accès à l'API. Cette fonction, à son tour, renvoie un objet contenant plusieurs méthodes qui utilisent la clé d'accès API passée à
apiConnect() . Dans ce cas, la clé est stockée dans la fermeture et lorsque vous appelez ces méthodes, il n'est plus nécessaire de la mentionner.
function apiConnect(apiKey) { function get(route) { return fetch(`${route}?key=${apiKey}`); } function post(route, params) { return fetch(route, { method: 'POST', body: JSON.stringify(params), headers: { 'Authorization': `Bearer ${apiKey}` } }) } return { get, post } } const api = apiConnect('my-secret-key');
3. Cession destructive
Si vous n'avez pas encore utilisé d'affectation destructrice dans JavaScript, il est temps de le corriger. L'affectation destructive est un moyen courant de récupérer des propriétés d'objet à l'aide d'une construction de langage syntaxique soignée.
const obj = { name: 'Joe', food: 'cake' } const { name, food } = obj; console.log(name, food);
Si vous devez attribuer des noms de propriétés extraits différents de ceux qu'ils ont dans l'objet, vous pouvez le faire:
const obj = { name: 'Joe', food: 'cake' } const { name: myName, food: myFood } = obj; console.log(myName, myFood);
Dans l'exemple suivant, la déstructuration est utilisée pour transmettre avec précision les valeurs stockées dans les propriétés de l'objet
person à la fonctiontrod
introduce() . Ceci est un exemple de la façon dont cette construction est utilisée lors de la déclaration d'une fonction pour récupérer des données d'un objet avec des paramètres qui lui sont passés. Soit dit en passant, si vous connaissez React, vous l'avez probablement déjà vu.
const person = { name: 'Eddie', age: 24 } function introduce({ name, age }) { console.log(`I'm ${name} and I'm ${age} years old!`); } console.log(introduce(person));
4. L'opérateur de spread
L'opérateur de propagation est une construction assez simple qui peut sembler incompréhensible à une personne non préparée. L'exemple suivant a un tableau numérique, la valeur maximale stockée dans laquelle nous devons trouver. Nous voulons utiliser la méthode
Math.max() pour cela, mais il ne sait pas comment travailler avec des tableaux. Il, en tant qu'arguments, suppose des valeurs numériques indépendantes. Afin d'extraire ses éléments du tableau, nous utilisons l'opérateur spread, qui ressemble à trois points.
const arr = [4, 6, -1, 3, 10, 4]; const max = Math.max(...arr); console.log(max);
5. La déclaration de repos
L'opérateur reste vous permet de convertir n'importe quel nombre d'arguments passés à une fonction en un tableau.
function myFunc(...args) { console.log(args[0] + args[1]); } myFunc(1, 2, 3, 4);
6. Méthodes de tableau
Les méthodes de tableau fournissent souvent au développeur des outils pratiques pour résoudre magnifiquement une variété de tâches de conversion de données. Je réponds parfois à des questions sur StackOverflow. Parmi eux, il y a souvent ceux qui sont dédiés à quelque chose comme ça ou à d'autres façons de travailler avec des tableaux d'objets. C'est dans de telles situations que les méthodes de tableau sont particulièrement utiles.
Nous considérerons ici plusieurs de ces méthodes, unies par le principe de leur similitude. Il convient de noter que je ne vous parlerai pas ici de toutes les méthodes de tableaux. Vous pouvez trouver leur liste complète sur
MDN (soit dit en passant, c'est ma référence JavaScript préférée).
Méthodes apMap (), filter () et Reduce ()
Les méthodes de tableau
map() ,
filter() et
reduce() vous permettent de transformer des tableaux ou de réduire des tableaux en une seule valeur (qui peut être un objet).
La méthode
map() renvoie un nouveau tableau contenant les valeurs transformées du tableau traité. La manière exacte dont ils seront transformés est spécifiée dans la fonction passée à cette méthode.
const arr = [1, 2, 3, 4, 5, 6]; const mapped = arr.map(el => el + 20); console.log(mapped);
La méthode
filter() renvoie un tableau d'éléments, vérifiant les valeurs dont la fonction passée à cette méthode a renvoyé
true .
const arr = [1, 2, 3, 4, 5, 6]; const filtered = arr.filter(el => el === 2 || el === 4); console.log(filtered);
La méthode
reduce() renvoie une certaine valeur, qui est le résultat du traitement de tous les éléments du tableau.
const arr = [1, 2, 3, 4, 5, 6]; const reduced = arr.reduce((total, current) => total + current); console.log(reduced);
▍ Méthodes find (), findIndex () et indexOf ()
Les méthodes de tableau
find() ,
findIndex() et
indexOf() faciles à confondre. Les explications suivantes vous aident à comprendre leurs fonctionnalités.
La méthode
find() renvoie le premier élément du tableau qui correspond aux critères spécifiés. Cette méthode, qui recherche le premier élément approprié, ne poursuit pas la recherche dans le tableau.
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const found = arr.find(el => el > 5); console.log(found);
Veuillez noter que dans notre exemple, les critères donnés correspondent à tous les éléments du tableau qui suivent celui qui contient le chiffre 5, mais seul le premier élément approprié est renvoyé. Cette méthode est très utile dans les situations où, en utilisant les boucles for pour énumérer et analyser les tableaux, ces boucles sont interrompues lorsque l'élément souhaité est trouvé dans le tableau à l'aide de l'instruction
break .
La méthode
findIndex() est très similaire à
find() , mais au lieu de renvoyer le premier élément approprié du tableau, elle renvoie l'index de cet élément. Afin de mieux comprendre cette méthode, jetez un œil à l'exemple suivant, qui utilise un tableau de valeurs de chaîne.
const arr = ['Nick', 'Frank', 'Joe', 'Frank']; const foundIndex = arr.findIndex(el => el === 'Frank'); console.log(foundIndex);
La méthode
indexOf() est très similaire à la méthode
findIndex() , mais elle prend comme argument non pas une fonction, mais une valeur normale. Il peut être utilisé si une logique complexe n'est pas nécessaire lors de la recherche de l'élément de tableau souhaité.
const arr = ['Nick', 'Frank', 'Joe', 'Frank']; const foundIndex = arr.indexOf('Frank'); console.log(foundIndex);
▍ Méthodes Push (), pop (), shift () et unshift ()
Les
unshift() push() ,
pop() ,
shift() et
unshift() sont utilisées pour ajouter de nouveaux éléments aux tableaux et en extraire les éléments déjà existants dans les tableaux. Dans ce cas, le travail est effectué avec des éléments situés au début ou à la fin du tableau.
La méthode
push() vous permet d'ajouter des éléments à la fin d'un tableau. Il modifie le tableau et, une fois terminé, renvoie l'élément ajouté au tableau.
let arr = [1, 2, 3, 4]; const pushed = arr.push(5); console.log(arr);
La méthode
pop() supprime le dernier élément du tableau. Il modifie le tableau et renvoie l'élément supprimé de celui-ci.
let arr = [1, 2, 3, 4]; const popped = arr.pop(); console.log(arr);
La méthode
shift() supprime le premier élément du tableau et le renvoie. Il modifie également le tableau pour lequel il est appelé.
let arr = [1, 2, 3, 4]; const shifted = arr.shift(); console.log(arr);
La méthode
unshift() ajoute un ou plusieurs éléments au début d'un tableau. Il modifie à nouveau le tableau. En même temps, contrairement aux trois autres méthodes décrites ici, elle renvoie la nouvelle longueur du tableau.
let arr = [1, 2, 3, 4]; const unshifted = arr.unshift(5, 6, 7); console.log(arr);
Méthodes lSlice () et splice ()
Ces méthodes sont utilisées pour modifier le tableau ou pour renvoyer une partie du tableau.
La méthode
splice() modifie le contenu d'un tableau en supprimant des éléments existants ou en les remplaçant par d'autres éléments. Il est capable d'ajouter de nouveaux éléments au tableau. Cette méthode modifie le tableau.
L'exemple suivant, si vous le décrivez en langage ordinaire, ressemble à ceci: vous devez, à la position de tableau
1 , supprimer
0 éléments et ajouter un élément contenant
b .
let arr = ['a', 'c', 'd', 'e']; arr.splice(1, 0, 'b')
La méthode
slice() renvoie une copie superficielle du tableau contenant ses éléments, à partir de la position de départ donnée et se terminant par la position précédant la position de fin donnée. Si, lors de son appel, seule la position initiale est spécifiée, il renverra tout le tableau, à partir de cette position. Cette méthode ne modifie pas le tableau. Il ne renvoie que la partie de ce tableau décrite lors de son appel.
let arr = ['a', 'b', 'c', 'd', 'e']; const sliced = arr.slice(2, 4); console.log(sliced);
▍ Méthode sort ()
La méthode
sort() trie le tableau conformément à la condition spécifiée par la fonction qui lui est transmise. Cette fonction prend deux éléments du tableau (par exemple, ils peuvent être représentés comme les paramètres
a et
b ) et, en les comparant, retourne, si les éléments n'ont pas besoin d'être échangés, 0 si
a doit être mis à un indice inférieur à
b est un nombre négatif, et si
b doit être mis à un indice inférieur à
a est un nombre positif.
let arr = [1, 7, 3, -1, 5, 7, 2]; const sorter = (firstEl, secondEl) => firstEl - secondEl; arr.sort(sorter); console.log(arr);
Si vous ne vous souvenez pas de ces méthodes pour la première fois, vous vous en souvenez. La chose la plus importante est que vous savez maintenant ce que les méthodes de tableau standard peuvent faire. Par conséquent, si vous ne pouvez pas rappeler immédiatement les fonctionnalités d'une méthode particulière, ce que vous en savez vous permettra de trouver rapidement ce dont vous avez besoin dans la documentation.
7. Générateurs
Les générateurs JavaScript sont déclarés à l'aide d'un caractère astérisque. Ils vous permettent de spécifier la valeur qui sera retournée la prochaine fois que la méthode
next() sera appelée. Les générateurs peuvent être conçus pour renvoyer un nombre limité de valeurs. Si un tel générateur a renvoyé toutes ces valeurs, le prochain appel à
next() renverra
undefined . Vous pouvez également créer des générateurs conçus pour renvoyer un nombre illimité de valeurs à l'aide de cycles.
Voici un générateur conçu pour renvoyer un nombre limité de valeurs:
function* greeter() { yield 'Hi'; yield 'How are you?'; yield 'Bye'; } const greet = greeter(); console.log(greet.next().value);
Et voici un générateur conçu pour renvoyer un nombre infini de valeurs à travers une boucle.
function* idCreator() { let i = 0; while (true) yield i++; } const ids = idCreator(); console.log(ids.next().value);
8. Opérateurs de vérification de l'égalité (==) et de l'égalité stricte (===) des valeurs
Il est extrêmement important pour tout développeur JS de comprendre la différence entre les opérateurs d'égalité (
== ) et d'égalité stricte (
=== ). Le fait est que l'opérateur
== , avant de comparer les valeurs, effectue la conversion de leurs types (ce qui peut entraîner des conséquences étranges à première vue), et l'opérateur
=== n'effectue pas de conversion de type.
console.log(0 == '0');
9. Comparaison d'objets
Je dois parfois voir comment les nouveaux venus dans la programmation JS font la même erreur. Ils essaient de comparer directement les objets. Les variables dans lesquelles les objets sont "stockés" contiennent des références à eux, et non ces objets eux-mêmes.
Ainsi, par exemple, dans l'exemple suivant, les objets se ressemblent, mais lorsqu'ils sont comparés directement, nous sommes informés que les objets sont différents, car chacune des variables contient un lien vers son propre objet et ces liens ne sont pas égaux les uns aux autres.
const joe1 = { name: 'Joe' }; const joe2 = { name: 'Joe' }; console.log(joe1 === joe2);
De plus, dans l'exemple suivant, il s'avère que
joe1 est égal à
joe2 puisque les deux variables stockent une référence au même objet.
const joe1 = { name: 'Joe' }; const joe2 = joe1; console.log(joe1 === joe2);
L'une des méthodes de comparaison d'objets réels est leur conversion préliminaire au format de chaîne JSON. Certes, cette approche a un problème, qui est que dans la représentation en chaîne obtenue de l'objet, un certain ordre de ses propriétés n'est pas garanti. Un moyen plus fiable de comparer des objets consiste à utiliser une bibliothèque spéciale contenant des outils pour une comparaison approfondie des objets (par exemple, il s'agit de la méthode
isEqual () de la bibliothèque
lodash ).
Afin de mieux comprendre les subtilités de la comparaison d'objets et de comprendre les conséquences possibles de l'écriture de liens vers les mêmes objets dans différentes variables, jetez un œil au premier concept JS discuté dans cet article.
10. Fonctions de rappel
Les fonctions de rappel sont un concept JavaScript assez simple avec lequel les débutants ont parfois des difficultés. Prenons l'exemple suivant. Ici, la fonction
console.log (juste comme ça - sans parenthèses) est passée à
myFunc() tant que fonction de rappel. Cette fonction définit un temporisateur, après quoi
console.log() est appelée et la chaîne passée à
myFunc() s'affiche dans la console.
function myFunc(text, callback) { setTimeout(function() { callback(text); }, 2000); } myFunc('Hello world!', console.log);
11. Promesses
Après avoir maîtrisé les fonctions de rappel et commencé à les utiliser partout, vous vous retrouverez bientôt dans le soi-disant «enfer du rappel». Si vous êtes vraiment là, jetez un œil aux promesses. Le code asynchrone peut être enveloppé dans une promesse et, après son exécution réussie, informer le système de la résolution réussie de la promesse en appelant la méthode appropriée, et si quelque chose ne va pas - appelez la méthode pour l'indiquer et rejetez la promesse. Pour traiter les résultats renvoyés par la promesse, utilisez la méthode
then() et pour la gestion des erreurs, utilisez la méthode
catch() .
const myPromise = new Promise(function(res, rej) { setTimeout(function(){ if (Math.random() < 0.9) { return res('Hooray!'); } return rej('Oh no!'); }, 1000); }); myPromise .then(function(data) { console.log('Success: ' + data); }) .catch(function(err) { console.log('Error: ' + err); });
12. async / attente de construction
Après avoir travaillé avec les promesses, alors, très probablement, vous voudrez quelque chose de plus. Par exemple, maîtrisez la construction async / wait. C'est du sucre syntaxique pour les promesses. Dans l'exemple suivant, nous créons, à l'aide du
async -
async , une fonction asynchrone, et dans celui-ci, à l'aide du mot-clé wait, nous organisons l'attente de la fin de la
greeter réception.
const greeter = new Promise((res, rej) => { setTimeout(() => res('Hello world!'), 2000); }) async function myFunc() { const greeting = await greeter; console.log(greeting); } myFunc();
Résumé
Si ce dont nous avons parlé ici ne vous était pas familier auparavant, vous avez probablement, au moins un peu, dépassé votre niveau en lisant cet article. Si vous n'avez rien trouvé de nouveau ici, j'espère que ce matériel vous a donné l'occasion de pratiquer et de renforcer votre connaissance de JavaScript.
Chers lecteurs! Quels autres concepts JavaScript ajouteriez-vous à cet article?
