Vergleich zwischen ECMAScript ES und ECMAScript ES6)

1. Deklaration von Variablen

ES5:

• Verwendung von var zum Deklarieren von Variablen. Es hat eine Funktion als Zielfernrohr und kann zu einem Heben führen.

var nombre = 'Maria';

ES6:

• Führt let und const ein, die block als Gültigkeitsbereich haben, und verbessert so die Sicherheit bei der Handhabung von Variablen.

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

2. Pfeilfunktionen

ES5:

• Herkömmliche Funktionen erfordern mehr Code und die Handhabung kann verwirrend sein.

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

ES6:

• Pfeilfunktionen sind prägnanter und verändern den Kontext nicht.

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

3. Vorlagenzeichenfolgen

ES5:

• Die Zeichenfolgenverkettung erfolgt mit dem Operator .

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

ES6:

• Backticks (`) werden zum Erstellen von String-Vorlagen verwendet, die eine Interpolation ermöglichen.

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

4. Standardparameter

ES5:

• Es gab keine Unterstützung für Standardparameter, daher wurde es manuell implementiert.

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

ES6:

• Die Standardparameter werden direkt in der Funktionssignatur deklariert.

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

5. Klassen

ES5:

• Das Konzept der Klassen existierte nicht. Es wurden Builder-Funktionen und Prototypen verwendet.

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

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

ES6:

• Die Klassen werden eingeführt, eine sauberere Syntax, die anderen Programmiersprachen näher kommt.

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

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

6. Module (Import und Export)

ES5:

• Es gab keine native Unterstützung für Module. Es wurden Bibliotheken wie RequireJS oder CommonJS verwendet.

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

ES6:

• Führt native Unterstützung für Module mit Import und Export ein.

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

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

7. Versprechen

ES5:

• Es gab keine native Versprechensverarbeitung. Man vertraute auf Rückrufe, um Asynchronität zu bewältigen, was zu Problemen wie der „Callback-Hölle“ führte.

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

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

ES6:

• Versprechen werden eingeführt, um asynchrone Vorgänge sauberer abzuwickeln.

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

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

8. Ruhe- und Ausbreitungsoperator

ES5:

• Es gab keine Unterstützung für das einfache Kombinieren oder Trennen von Arrays oder Objekten. Dabei kamen Techniken wie der Einsatz von Apply zum Einsatz.

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

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

ES6:

• Die Operatoren Rest und Spread werden zur einfacheren Handhabung von Argumentlisten und Arrays eingeführt.

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

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

9. Destrukturierung

ES5:

• Das Extrahieren von Werten aus Objekten oder Arrays war manuell und fehleranfällig.

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

ES6:

• Destrukturierung wird eingeführt, um Werte auf sauberere Weise aus Objekten und Arrays zu extrahieren.

const { nombre, edad } = persona;

Abschluss

ECMAScript 6 (ES6) bringt eine Vielzahl syntaktischer und funktionaler Verbesserungen mit sich, die die Entwicklung in JavaScript vereinfachen und es im Vergleich zu ECMAScript 5 (ES5) lesbarer, wartbarer und effizienter machen.

Das obige ist der detaillierte Inhalt vonVergleich zwischen ECMAScript ES und ECMAScript ES6). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!