Comparaison entre ECMAScript ES et ECMAScript ES6)

1. Déclaration des variables

ES5 :

• Utilisation de var pour déclarer des variables. Il a une fonction de portée et peut donner lieu à un levage.

var nombre = 'Maria';

ES6 :

• Introduit let et const qui ont block comme portée, améliorant la sécurité dans la gestion des variables.

let nombre = 'Maria';  // Variable que puede cambiar
const edad = 30;       // Constante, no puede cambiar

2. Fonctions des flèches

ES5 :

• Les fonctions traditionnelles nécessitent plus de code et votre gestion de cela peut prêter à confusion.

var suma = function(a, b) {
  return a + b;
};

ES6 :

• Les fonctions fléchées sont plus concises et ne changent pas le contexte.

const suma = (a, b) => a + b;

3. Chaînes de modèles

ES5 :

• La concaténation des chaînes se fait à l'aide de l'opérateur .

var saludo = 'Hola ' + nombre + ', tienes ' + edad + ' años.';

ES6 :

Les
• backticks (`) sont utilisés pour créer des modèles de chaînes, permettant l'interpolation.

const saludo = `Hola ${nombre}, tienes ${edad} años.`;

4. Paramètres par défaut

ES5 :

• Il n'y avait pas de prise en charge des paramètres par défaut, ils ont donc été implémentés manuellement.

function saludo(nombre) {
  nombre = nombre || 'Invitado';
  return 'Hola ' + nombre;
}

ES6 :

• Les paramètres par défaut sont déclarés directement dans la signature de la fonction.

function saludo(nombre = 'Invitado') {
  return `Hola ${nombre}`;
}

5. Cours

ES5 :

• La notion de cours n'existait pas. Des fonctions et des prototypes de constructeur ont été utilisés.

function Persona(nombre, edad) {
  this.nombre = nombre;
  this.edad = edad;
}

Persona.prototype.saludar = function() {
  return 'Hola, soy ' + this.nombre;
};

ES6 :

• Les classes sont introduites, une syntaxe plus propre et plus proche des autres langages de programmation.

class Persona {
  constructor(nombre, edad) {
    this.nombre = nombre;
    this.edad = edad;
  }

  saludar() {
    return `Hola, soy ${this.nombre}`;
  }
}

6. Modules (Importation et Exportation)

ES5 :

• Il n'y avait pas de support natif pour les modules. Des bibliothèques telles que RequireJS ou CommonJS ont été utilisées.

// CommonJS
var modulo = require('modulo');
module.exports = modulo;

ES6 :

• Introduit la prise en charge native des modules avec importation et exportation.

// Exportar
export const suma = (a, b) => a + b;

// Importar
import { suma } from './modulo';

7. Promesses

ES5 :

• Il n’y avait pas de gestion native des promesses. On comptait sur les rappels pour gérer l'asynchronie, ce qui entraînait des problèmes tels que "Callback Hell".

function hacerAlgo(callback) {
  setTimeout(function() {
    callback('Hecho');
  }, 1000);
}

hacerAlgo(function(resultado) {
  console.log(resultado);
});

ES6 :

Des
• promesses sont introduites pour gérer plus proprement les opérations asynchrones.

const hacerAlgo = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve('Hecho'), 1000);
  });
};

hacerAlgo().then(resultado => console.log(resultado));

8. Opérateur de repos et de propagation

ES5 :

• Il n'existait aucun support permettant de combiner ou de séparer facilement des tableaux ou des objets. Des techniques telles que l'utilisation d'appliqués ont été utilisées.

function sumar(a, b, c) {
  return a + b + c;
}

var numeros = [1, 2, 3];
sumar.apply(null, numeros);

ES6 :

• Les opérateurs rest et spread sont introduits pour faciliter la gestion des listes d'arguments et des tableaux.

// Spread
const numeros = [1, 2, 3];
const resultado = sumar(...numeros);

// Rest
function sumar(...numeros) {
  return numeros.reduce((a, b) => a + b, 0);
}

9. Déstructuration

ES5 :

• L'extraction de valeurs à partir d'objets ou de tableaux était manuelle et sujette aux erreurs.

var persona = { nombre: 'Maria', edad: 30 };
var nombre = persona.nombre;
var edad = persona.edad;

ES6 :

La
• la déstructuration est introduite pour extraire les valeurs des objets et des tableaux de manière plus propre.

const { nombre, edad } = persona;

Conclusion

ECMAScript 6 (ES6) apporte un grand nombre d'améliorations syntaxiques et fonctionnelles qui simplifient le développement en JavaScript, le rendant plus lisible, maintenable et efficace par rapport à ECMAScript 5 (ES5).

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!