Conseils JavaScript incontournables pour les développeurs

1. Parcourir un objet

Utilisez Object.entries() pour parcourir les paires clé-valeur.

const person = {
  name: 'Tony Stark',
  age: 53,
  city: 'NewYork'
};

/*
name: Tony Stark
age: 53
city: NewYork
*/
for (const [key, value] of Object.entries(person)) {
  console.log(`${key}: ${value}`);
}

Explication :

• Object.entries() convertit les propriétés d'un objet en un tableau de paires clé-valeur, ce qui facilite leur itération.

2. Suppression des valeurs fausses d'un tableau

Utilisez filter(Boolean) pour filtrer les valeurs fausses.
(Les valeurs fausses incluent false, 0, '', null, undefined et NaN)

const arr = [1, 2, 0, '', undefined, null, 3, NaN, false];

const filteredArr = arr.filter(Boolean);

console.log(filteredArr); // [1, 2, 3]

Explication :

• Dans ce code, Boolean est transmis comme fonction de rappel à filter().
• La fonction Boolean() est une fonction intégrée à JavaScript qui renvoie true pour les valeurs véridiques et false pour les valeurs fausses.
• En passant Boolean comme fonction de rappel, filter() supprimera toutes les valeurs fausses du tableau arr et renverra un nouveau tableau filteredArr avec uniquement des valeurs véridiques.

3. Aplatir un tableau multidimensionnel

Utilisez la méthode flat() pour aplatir les tableaux.

const multiDimensionalArray = [[1, 2], [3, 4, [5, 6]]];
const flattenedArray = multiDimensionalArray.flat(2);

// Output: [1, 2, 3, 4, 5, 6]
console.log(flattenedArray); 

Explication :

• Dans ce code, multiDimensionalArray est un tableau bidimensionnel avec deux tableaux imbriqués.
• En appelant la méthode flat() avec une profondeur de 2, tous les éléments du sous-tableau sont concaténés en un seul tableau plat.
• Le flattenedArray résultant contient tous les éléments du tableau multidimensionnel d'origine dans une seule dimension.

4. Créer un tableau à partir d'Itérables

Utilisez Array.from() pour créer un tableau à partir d'itérables.

// Converting String to an array
const str = "TonyStark";
const arr = Array.from(str);

// ['T', 'o', 'n', 'y', 'S', 't', 'a', 'r', 'k']
console.log(arr);

// Converting Set to an array
const set = new Set([1, 2, 3, 3, 4, 5]);
const arr = Array.from(set);
console.log(arr); // Output: [1, 2, 3, 4, 5]

Explication :

• Array.from() convertit les objets itérables ou de type tableau comme les chaînes, les ensembles, les cartes en tableaux.

5. Extraction de valeurs à partir de tableaux

Utilisez la déstructuration pour extraire les valeurs d'un tableau.

const numbers = [1, 2, 3, 4, 5];
const [first, second, , fourth] = numbers;

console.log(first); // 1
console.log(second); // 2
console.log(fourth); // 4

Explication :

• La déstructuration vous permet d'attribuer directement des éléments de tableau aux variables et d'ignorer les valeurs indésirables.

6. Extraire des valeurs d'objets

Utilisez la déstructuration d'objets pour extraire les propriétés.

const person = {
  name: 'Tony Stark',
  age: 53,
  email: 'tonystark@starkindustries.com'
};

const {name, age, email} = person;

console.log(name); // Tony Stark
console.log(age); // 53
console.log(email); // tonystark@starkindustries.com

Explication :

• La déstructuration extrait les propriétés des objets en les faisant correspondre avec des variables.

7. Exécuter plusieurs promesses en parallèle

Promise.all() permet d'exécuter plusieurs promesses en parallèle.

const promise1 = fetch('https://api.example.com/data1');
const promise2 = fetch('https://api.example.com/data2');

Promise.all([promise1, promise2])
  .then(responses => {
    // handle responses from both requests here
    const [response1, response2] = responses;
    // do something with the responses
  })
  .catch(error => {
    // handle errors from either request here
    console.error(error);
  });

Explication :

• Dans ce code, nous créons deux promesses à l'aide de la méthode fetch() pour récupérer des données à partir de deux points de terminaison différents.
• Nous transmettons ensuite un tableau de promesses à Promise.all() qui renvoie une nouvelle promesse qui se résout lorsque toutes les promesses du tableau sont résolues.
• Nous pouvons ensuite utiliser le tableau responses dans le bloc then() pour gérer les réponses des deux requêtes. Si l'une ou l'autre des promesses est rejetée, le bloc catch() gérera l'erreur.

8. Recherche du plus grand et du plus petit nombre dans un tableau

Utilisez Math.max() et Math.min() avec une syntaxe étalée.

const nums = [10, 12, 29, 60, 22];
console.log(Math.max(...nums)); // 60
console.log(Math.min(...nums)); // 10

Explication :

• La syntaxe Spread (...) développe les éléments du tableau, permettant à Math.max() et Math.min() de les évaluer.

9. Conversion de n'importe quelle valeur en booléen

Utilisez la double négation !! pour convertir des valeurs.

!!2; // true
!!''; // false
!!NaN; // false
!!'word'; // true
!!undefined; // false

Explication :

• La double négation (!!) en JavaScript est une astuce pour convertir n'importe quelle valeur en son équivalent booléen.
• Le premier ! transforme les valeurs véridiques en faux et les valeurs fausses en vrai, et le second ! retourne ce booléen, ce qui donne en true pour les valeurs véridiques et false pour les valeurs fausses.

10. Échanger les valeurs des variables

Utilisez la déstructuration de tableaux pour échanger les valeurs.

let a = 5;
let b = 10;

// Swap values using array destructuring
[a, b] = [b, a];

console.log(a); // 10
console.log(b); // 5

Explication :

• Dans cet exemple, les valeurs de a et b sont échangées sans utiliser de variable temporaire.
• Le [b, a] sur le côté droit crée un nouveau tableau avec les valeurs de b et a, puis l'affectation de déstructuration [a, b] sur le côté gauche attribue ces valeurs à a et b, en échangeant efficacement leurs valeurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!