Qu'y a-t-il dans un Roundup ES6 JS complet pour les développeurs modernes?

ES6 a introduit des fonctionnalités clés que les développeurs modernes devraient maîtriser. 1. Selt & const Fournit-socage et empêchez la réaffectation, améliorant la gestion des variables. 2. 3. Les littéraux du modèle simplifient la concaténation des cordes et les chaînes multi-lignes. 4. L'attribution destructuration permet une extraction facile des valeurs des tableaux et des objets. 5. Paramètres par défaut, les opérateurs de repos et de propagation rationalisent les arguments de fonction et la manipulation du tableau / objet. 6. Les modules prennent en charge l'organisation du code via la fonctionnalité d'importation / exportation native, essentielle pour les applications évolutives.

Si vous êtes un développeur moderne, un Roundup JavaScript ES6 devrait couvrir les caractéristiques de base et les modifications de syntaxe qui sont devenues standard dans le développement JS moderne. Ces mises à jour ne sont pas seulement du sucre syntaxique - ils améliorent la lisibilité, la maintenabilité et les performances de votre code.

LET & const: meilleure portée variable

Avant ES6, var était le seul moyen de déclarer les variables, mais il avait des comportements déroutants comme le levage et la portée au niveau de la fonction. Entrez let et const .

• let permettre des variables encope à bloc, ce qui signifie qu'elles ne sont accessibles que dans le bloc (comme à l'intérieur d'une boucle ou de l'instruction IF) où ils sont déclarés.
• const fonctionne comme let , mais empêche la réaffectation - grave pour les valeurs que vous n'avez pas l'intention de changer.

 if (true) {
  Soit x = 10;
  const y = 20;
}
console.log (x); // indéfini

Utilisez const par défaut, sauf si vous savez que la variable changera. Cela rend votre intention plus claire et réduit les bogues de la réaffectation accidentelle.

Fonctions de flèche: syntaxe plus propre et «ceci lexicale»

Les fonctions de flèche sont plus qu'une syntaxe plus courte - elles this lient également à la lexie, ce qui est super utile lorsque vous travaillez avec des rappels ou des gestionnaires d'événements.

 // Avant
obj.method = function () {
  setTimeout (function () {
    console.log (ceci); // "ce" pourrait ne pas être ce à quoi vous vous attendez
  }, 100);
};

// Après
obj.method = function () {
  setTimeout (() => {
    console.log (ceci); // 'this' est hérité de la portée extérieure
  }, 100);
};

Ils permettent également un retour concis lorsqu'ils sont utilisés sans bloc:

 const square = x => x * x;

Mais soyez prudent: les fonctions de flèche ne doivent pas être utilisées comme méthodes d'objet si vous comptez sur Dynamic this .

Modèle littéraux: concaténation de cordes plus facile

Il est révolu le temps de la concaténation de cordes en désordre en utilisant . Les modèles littéraux rendent les choses beaucoup plus propres, en particulier lors de l'insertion de variables ou d'expressions en cordes.

 const name = "Alice";
console.log (`Bonjour, $ {nom}!`); // Bonjour, Alice!

Vous pouvez même faire des expressions de base:

 console.log (`La somme est $ {2 3}`); // la somme est 5

De plus, les chaînes multiples fonctionnent nativement maintenant:

 const poème = `Les roses sont rouges,
Les violettes sont bleues. »;

Ceci est particulièrement utile lors de la génération de HTML ou de l'écriture de blocs de texte plus longs.

Affectation destructuration: extraire facilement les valeurs

Lastructuration vous permet d'extraire des données des tableaux ou des objets en variables distinctes, ce qui rend votre code plus lisible.

Pour les objets:

 const user = {name: "bob", âge: 30};
const {name, age} = utilisateur;

Pour les tableaux:

 const [premier, deuxième] = ["pomme", "banane"];

Vous pouvez également utiliser les valeurs par défaut et renommer les variables:

 const {name: fullname = "anonymous"} = {};

Ceci est extrêmement courant dans React et d'autres cadres lors de la tir des accessoires ou de l'état.

Paramètres par défaut et opérateurs de repos / écart

ES6 a introduit plusieurs améliorations de la qualité de vie qui simplifient les définitions de fonction et la manipulation du tableau / objet.

Les paramètres par défaut facilitent les arguments facultatifs:

 Function Grel (name = "invité") {
  console.log (`hi, $ {name}`);
}

L'opérateur de repos ( ...args ) collecte les arguments restants dans un tableau:

 fonction logargs (a, ... rest) {
  console.log (rest); // [2, 3, 4]
}
LOGARGS (1, 2, 3, 4);

L'opérateur de propagation ( ...array ) étend les itérables en éléments individuels:

 const arr = [1, 2, 3];
const newarr = [... arr, 4]; // [1, 2, 3, 4]

Ceux-ci sont largement utilisés dans les réducteurs Redux, les composants de la réaction et les modèles de programmation fonctionnelle générale.

Modules: Organisation du code avec import / exportation

Les modules ES6 vous permettent de diviser votre code en pièces réutilisables. Vous n'avez plus besoin de bibliothèques externes comme DibleJS ou CommonJS (bien que Node prenne toujours en charge les deux).

Utilisation de base:

 // math.js
exportation const pi = 3,14;

fonction d'exportation add (a, b) {
  retour AB;
}

// main.js
import {pi, add} from './math.js';

Vous pouvez également exporter par défaut:

 // utils.js
Exporter la fonction default () {...}

// main.js
Importer utils de './utils.js';

Cette approche modulaire est essentielle pour les applications à grande échelle et est soutenue nativement dans la plupart des navigateurs et bundlers modernes.

C'est essentiellement le cœur d'ES6 des fonctionnalités que chaque développeur moderne devrait être familiarisé. Ce n'est pas trop complexe, mais ces détails sont faciles à manquer si vous sautez directement dans les cadres sans comprendre la langue elle-même.

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!