PHP前端开发

ECMAScript ES 和 ECMAScript ES6 之间的比较)

百变鹏仔 4天前 #JavaScript
文章标签 ECMAScript

1. 变量声明

es5:

var nombre = 'maria';

es6:

let nombre = 'maria';  // variable que puede cambiarconst edad = 30;       // constante, no puede cambiar

2. 箭头函数

es5:

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

es6:

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

3. 模板字符串

es5:

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

es6:

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

4. 默认参数

es5:

function saludo(nombre) {  nombre = nombre || 'invitado';  return 'hola ' + nombre;}

es6:

function saludo(nombre = 'invitado') {  return `hola ${nombre}`;}

5. 课程

es5:

function persona(nombre, edad) {  this.nombre = nombre;  this.edad = edad;}persona.prototype.saludar = function() {  return 'hola, soy ' + this.nombre;};

es6:

class persona {  constructor(nombre, edad) {    this.nombre = nombre;    this.edad = edad;  }  saludar() {    return `hola, soy ${this.nombre}`;  }}

6. 模块(导入和导出)

es5:

// commonjsvar modulo = require('modulo');module.exports = modulo;

es6:

// exportarexport const suma = (a, b) => a + b;// importarimport { suma } from './modulo';

7. 承诺

es5:

function haceralgo(callback) {  settimeout(function() {    callback('hecho');  }, 1000);}haceralgo(function(resultado) {  console.log(resultado);});

es6:

const haceralgo = () => {  return new promise((resolve, reject) => {    settimeout(() => resolve('hecho'), 1000);  });};haceralgo().then(resultado => console.log(resultado));

8. 休息和伸展操作员

es5:

function sumar(a, b, c) {  return a + b + c;}var numeros = [1, 2, 3];sumar.apply(null, numeros);

es6:

// spreadconst numeros = [1, 2, 3];const resultado = sumar(...numeros);// restfunction sumar(...numeros) {  return numeros.reduce((a, b) => a + b, 0);}

9. 解构

es5:

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

es6:

const { nombre, edad } = persona;

结论

ecmascript 6 (es6) 带来了大量语法和功能改进,简化了 javascript 的开发,使其比 ecmascript 5 (es5) 更具可读性、可维护性和高效性。