Maison > interface Web > js tutoriel > Mon parcours React : jour 10

Mon parcours React : jour 10

Patricia Arquette
Libérer: 2024-12-15 05:02:21
original
212 Les gens l'ont consulté

My React Journey: Day 10

Fonctionnalités ES6

Ce que j'ai appris aujourd'hui

JavaScript moderne (ES6 et au-delà) a introduit des fonctionnalités qui ont rendu le langage plus puissant, plus lisible et plus convivial pour les développeurs. Voici un résumé :

  1. Modèles littéraux
  • Ce qu'il fait : permet l'interpolation de chaînes et les chaînes multilignes.

  • Exemple :

let year = 2024;
console.log(`This is year ${year}`);
Copier après la connexion
  • Avantages : Plus facile à lire et à gérer les chaînes par rapport à la concaténation traditionnelle.
  1. Fonctions fléchées
  • Ce qu'il fait : fournit une syntaxe plus courte pour l'écriture de fonctions.

  • Exemple :

let add = (a, b) => console.log(`${a} + ${b} = ${a + b}`);
add(4, 5); // Output: 4 + 5 = 9
Copier après la connexion
  • Avantages : simplifie le code, en particulier pour les fonctions en ligne.
  1. Paramètres par défaut
  • Ce qu'il fait : attribue des valeurs par défaut aux paramètres de fonction si aucun argument n'est passé.

  • Exemple :

function callMe(name = "Damilare") {
    console.log(`My name is ${name}`);
}
callMe(); // Output: My name is Damilare
callMe("Ayoola"); // Output: My name is Ayoola
Copier après la connexion
  • Avantages : empêche les erreurs dues aux paramètres manquants.
  1. Déstructuration
  • Ce qu'il fait : extrait les valeurs de tableaux ou d'objets et les affecte à des variables. Exemples :
//Array Destructuring:
const [a, b] = [2, 3];
console.log(a, b); // Output: 2 3

//Object Destructuring:
const { age, year } = { age: 32, year: "Year 5" };
console.log(age, year); // Output: 32 Year 5
Copier après la connexion
  • Avantages : rend le code plus propre et réduit l'accès répétitif aux propriétés des objets ou aux éléments du tableau.
  1. Opérateurs de propagation et de repos (...)
  • Spread : développe les éléments d’un tableau ou d’un objet en éléments individuels.
const arr1 = [0, 1, 2];
const arr2 = [...arr1, 3, 4, 5];
console.log(arr2); // Output: [0, 1, 2, 3, 4, 5]
Copier après la connexion
  • Reste : collecte les éléments restants dans un seul tableau ou objet.
const collectRest = (first, ...rest) => {
    console.log(`First number is ${first}`);
    console.log(`The rest of the numbers: ${rest}`);
};
collectRest(1, 2, 3, 4); 
// Output:
// First number is 1
// The rest of the numbers: [2, 3, 4]
Copier après la connexion
  1. pour...de Boucle
  • Ce qu'il fait : simplifie le bouclage sur des objets itérables (comme des tableaux).

  • Exemple :

let arr = [1, 2, 3, 4, 5];
for (let num of arr) {
    console.log(num);
}
// Output:
// 1
// 2
// 3
// 4
// 5
Copier après la connexion
  • Avantages : évite d'avoir à accéder manuellement aux index des tableaux et améliore la lisibilité.

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!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal