Rumah >hujung hadapan web >tutorial js >Perbandingan antara ECMAScript ES dan ECMAScript ES6)

Perbandingan antara ECMAScript ES dan ECMAScript ES6)

Patricia Arquette
Patricia Arquetteasal
2024-10-05 12:17:30896semak imbas

Comparación entre ECMAScript ESy ECMAScript ES6)

1. Pengisytiharan Pembolehubah

ES5:

  • Penggunaan var untuk mengisytiharkan pembolehubah. Ia mempunyai fungsi sebagai skop dan boleh menimbulkan pengangkatan.

var nombre = 'Maria';


ES6:

  • Memperkenalkan let dan const yang mempunyai blok sebagai skop, meningkatkan keselamatan dalam pengendalian pembolehubah.

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



2. Fungsi Anak Panah

ES5:

  • Fungsi tradisional memerlukan lebih banyak kod dan pengendalian anda terhadap perkara ini boleh mengelirukan.

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


ES6:

  • Fungsi anak panah lebih ringkas dan tidak mengubah konteks ini.

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



3. Rentetan Templat

ES5:

  • Penggabungan rentetan dilakukan menggunakan pengendali .

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


ES6:

  • backtick (`) digunakan untuk mencipta templat rentetan, membenarkan interpolasi.

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



4. Parameter Lalai

ES5:

  • Tiada sokongan untuk parameter lalai, jadi ia dilaksanakan secara manual.

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


ES6:

  • Parameter lalai diisytiharkan terus dalam tandatangan fungsi.

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



5. Kelas

ES5:

  • Konsep kelas tidak wujud. Fungsi dan prototaip pembina telah digunakan.

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

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


ES6:

  • Kelas diperkenalkan, sintaks yang lebih bersih lebih dekat dengan bahasa pengaturcaraan lain.

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

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



6. Modul (Import dan Eksport)

ES5:

  • Tiada sokongan asli untuk modul. Perpustakaan seperti RequireJS atau CommonJS telah digunakan.

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


ES6:

  • Memperkenalkan sokongan asli untuk modul dengan import dan eksport.

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

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



7. Janji

ES5:

  • Tiada pengendalian janji asli. Panggilan balik dipercayai untuk mengendalikan tak segerak, yang membawa kepada masalah seperti "Neraka Panggilan Balik".

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

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


ES6:

  • janji diperkenalkan untuk mengendalikan operasi tak segerak dengan lebih bersih.

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

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



8. Operator Rehat dan Hampar

ES5:

  • Tiada sokongan untuk menggabungkan atau mengasingkan tatasusunan atau objek dengan mudah. Teknik seperti penggunaan apply telah digunakan.

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

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


ES6:

  • Pengendali rehat dan spread diperkenalkan untuk pengendalian senarai dan tatasusunan hujah yang lebih mudah.

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

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



9. Memusnahkan

ES5:

  • Mengekstrak nilai daripada objek atau tatasusunan adalah manual dan mudah ralat.

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


ES6:

  • memusnahkan diperkenalkan untuk mengekstrak nilai daripada objek dan tatasusunan dengan cara yang lebih bersih.

const { nombre, edad } = persona;



Kesimpulan

ECMAScript 6 (ES6) membawa sejumlah besar penambahbaikan sintaksis dan fungsi yang memudahkan pembangunan dalam JavaScript, menjadikannya lebih mudah dibaca, diselenggara dan cekap berbanding ECMAScript 5 (ES5).

Atas ialah kandungan terperinci Perbandingan antara ECMAScript ES dan ECMAScript ES6). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn