Apa yang ada dalam pusingan ES6 JS yang lengkap untuk pemaju moden?

ES6 memperkenalkan ciri -ciri utama yang pemaju moden harus menguasai. 1. Let & const menyediakan blok-menembak dan mencegah penugasan semula, meningkatkan pengurusan berubah-ubah. 2. Fungsi anak panah menawarkan sintaks bersih dan leksikal yang mengikat ini, meningkatkan kejelasan panggilan balik. 3. Literal templat memudahkan penyambungan rentetan dan rentetan berbilang baris. 4. Tugasan pemusnahan membolehkan pengekstrakan nilai mudah dari tatasusunan dan objek. 5. Parameter lalai, rehat, dan penyebaran pengendali menyelaraskan argumen fungsi dan manipulasi array/objek. 6. Modul menyokong organisasi kod melalui fungsi import/eksport asli, penting untuk aplikasi berskala.

Jika anda seorang pemaju moden, pusingan ES6 JavaScript harus meliputi ciri -ciri teras dan perubahan sintaks yang telah menjadi standard dalam pembangunan JS moden. Kemas kini ini bukan sekadar gula sintaktik -mereka meningkatkan kebolehbacaan, kebolehkerjaan, dan prestasi kod anda.

Biarkan & const: Penangkapan pembolehubah yang lebih baik

Sebelum ES6, var adalah satu-satunya cara untuk mengisytiharkan pembolehubah, tetapi ia mempunyai beberapa tingkah laku yang mengelirukan seperti angkat dan scoping peringkat fungsi. Masukkan let dan const .

• let membolehkan pembolehubah scoped blok, bermakna mereka hanya boleh diakses di dalam blok (seperti di dalam gelung atau jika pernyataan) di mana mereka diisytiharkan.
• const berfungsi seperti let , tetapi menghalang penugasan semula -hebat untuk nilai yang anda tidak berniat untuk berubah.

 jika (benar) {
  biarkan x = 10;
  const y = 20;
}
console.log (x); // Undefined

Gunakan const secara lalai melainkan anda tahu pembolehubah akan berubah. Ini menjadikan niat anda lebih jelas dan mengurangkan pepijat daripada penugasan semula secara tidak sengaja.

Fungsi anak panah: sintaks bersih dan leksikal 'ini'

Fungsi Arrow lebih daripada sekadar sintaks yang lebih pendek -mereka juga mengikat this secara leksikal, yang sangat membantu apabila bekerja dengan panggilan balik atau pengendali acara.

 // sebelum ini
obj.method = function () {
  setTimeout (fungsi () {
    console.log (ini); // 'ini' mungkin bukan apa yang anda harapkan
  }, 100);
};

// selepas
obj.method = function () {
  setTimeout (() => {
    console.log (ini); // 'ini' diwarisi dari skop luar
  }, 100);
};

Mereka juga membenarkan pulangan ringkas apabila digunakan tanpa blok:

 const square = x => x * x;

Tetapi berhati -hati: Fungsi anak panah tidak boleh digunakan sebagai kaedah objek jika anda bergantung pada dinamik this .

Literals Templat: Konvensyen rentetan yang lebih mudah

Sudahlah hari -hari bersekutu rentetan berantakan menggunakan . Templat literal membuat perkara yang lebih bersih, terutamanya apabila memasukkan pembolehubah atau ungkapan ke dalam rentetan.

 const name = "Alice";
console.log (`Hello, $ {name}!`); // Hello, Alice!

Anda juga boleh membuat ungkapan asas:

 console.log (`jumlahnya ialah $ {2 3}`); // Jumlahnya ialah 5

Juga, rentetan berbilang baris berfungsi secara asli sekarang:

 Const Poem = `Roses berwarna merah,
Violet berwarna biru. `;

Ini amat berguna apabila menghasilkan HTML atau menulis blok teks yang lebih lama.

Tugasan pemusnahan: Nilai ekstrak dengan mudah

Pemusnahan membolehkan anda mengekstrak data dari tatasusunan atau objek ke dalam pembolehubah yang berbeza, menjadikan kod anda lebih mudah dibaca.

Untuk objek:

 const user = {name: "bob", umur: 30};
const {name, usia} = user;

Untuk tatasusunan:

 const [pertama, kedua] = ["epal", "pisang"];

Anda juga boleh menggunakan lalai dan menamakan semula pembolehubah:

 const {name: fullName = "Anonymous"} = {};

Ini sangat biasa dalam React dan rangka kerja lain ketika menarik prop atau negeri.

Parameter lalai dan pengendali rehat/penyebaran

ES6 memperkenalkan beberapa penambahbaikan kualiti hidup yang memudahkan definisi fungsi dan manipulasi pelbagai/objek.

Parameter lalai membuat argumen pilihan lebih mudah:

 fungsi salam (nama = "tetamu") {
  console.log (`Hi, $ {name}`);
}

Pengendali rehat ( ...args ) mengumpul argumen yang tersisa ke dalam array:

 fungsi logargs (a, ... rehat) {
  console.log (rehat); // [2, 3, 4]
}
logargs (1, 2, 3, 4);

Penyebaran pengendali ( ...array ) memperluaskan ayat ke dalam elemen individu:

 const arr = [1, 2, 3];
const newarr = [... arr, 4]; // [1, 2, 3, 4]

Ini digunakan secara meluas dalam pengurangan redux, komponen bertindak balas, dan corak pengaturcaraan fungsional umum.

Modul: Mengatur kod dengan import/eksport

Modul ES6 membolehkan anda memecah kod anda ke bahagian yang boleh diguna semula. Anda tidak lagi memerlukan perpustakaan luaran seperti memerlukanJS atau CommonJS (walaupun nod masih menyokong kedua -duanya).

Penggunaan Asas:

 // math.js
Eksport Const PI = 3.14;

Fungsi Eksport Tambah (a, b) {
  kembali AB;
}

// main.js
import {pi, tambah} dari './math.js';

Anda juga boleh mengeksport sebagai lalai:

 // utils.js
fungsi lalai eksport () {...}

// main.js
import utils dari './utils.js';

Pendekatan modular ini penting untuk aplikasi berskala besar dan disokong secara asli dalam penyemak imbas dan bundlers yang paling moden.

Pada dasarnya inti ES6 mempunyai ciri -ciri setiap pemaju moden yang sepatutnya biasa. Ia tidak terlalu kompleks, tetapi butiran ini mudah dilepaskan jika anda melompat terus ke dalam kerangka tanpa memahami bahasa itu sendiri.

Atas ialah kandungan terperinci Apa yang ada dalam pusingan ES6 JS yang lengkap untuk pemaju moden?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!