ECMAScript ES 和 ECMAScript ES6 之间的比较)
文章标签
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) 更具可读性、可维护性和高效性。