ECMAScript ES 與 ECMAScript ES6 之間的比較）

1. 變數聲明

ES5：

• 使用var來宣告變數。它具有函數作為範圍，並且可以引起提升。

var nombre = 'Maria';

ES6：

• 引入了以 block 作為作用域的 let 和 const，改進了變數處理中的安全性。

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

---

2. 箭頭函數

ES5：

• 傳統函數需要更多程式碼，而您對此的處理可能會令人困惑。

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

ES6：

• 箭頭函數更簡潔，並且不會改變 this 的上下文。

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：

• 沒有模組的本機支援。使用了諸如 RequireJS 或 CommonJS 之類的函式庫。

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

ES6：

• 引入了對導入和導出模組的本機支援。

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

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

---

7. 承諾

ES5：

• 沒有原生的 Promise 處理。依靠回調來處理非同步，導致了“回調地獄”等問題。

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

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

ES6：

• promise 的引入是為了更乾淨地處理非同步操作。

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

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

---

8. 休息和伸展操作員

ES5：

• 不支援輕鬆組合或分離陣列或物件。使用了諸如 apply 之類的技術。

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

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

ES6：

• 引入 rest 和 spread 運算子是為了更輕鬆地處理參數清單和陣列。

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

// Rest
function 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) 更具可讀性、可維護性和高效性。

以上是ECMAScript ES 與 ECMAScript ES6 之間的比較）的詳細內容。更多資訊請關注PHP中文網其他相關文章！