ES6 dalam Tindakan: Biarkan dan Const

Titik utama dan let dalam const dalam ES6

let ES6 memperkenalkan dua kata kunci baru const dan

, yang menyediakan cara untuk menentukan pembolehubah dan pemalar blok, meningkatkan keupayaan JavaScript dan mengurangkan kesilapan yang berpotensi.

let let Kata kunci membolehkan pembolehubah diisytiharkan dalam skop blok tertentu, yang merupakan perubahan ketara dari batasan sebelumnya JavaScript yang terhad kepada fungsi dan skop global. Pembolehubah yang diisytiharkan dengan

tidak dinaikkan, bermakna mereka tidak boleh dirujuk sebelum diisytiharkan dalam satu blok.

const const Kata kunci digunakan untuk menentukan pemalar yang tidak boleh di redeclared. Walaupun Object.freeze() mencipta pengikatan yang tidak berubah, ia tidak menjadikan nilai itu sendiri tidak berubah. Untuk mencapai nilai tidak berubah, let harus digunakan. const dan

disokong dalam nod dan dalam semua pelayar moden.

let Tutorial ini akan memperkenalkan const dan

, dua kata kunci yang merupakan kata kunci baru ditambah kepada JavaScript dalam ES6. Mereka meningkatkan JavaScript dengan menyediakan cara untuk menentukan pembolehubah dan pemalar blok.

Map Artikel ini adalah salah satu daripada banyak artikel mengenai JavaScript baru yang diperkenalkan dalam ES6, termasuk WeakMap dan Set, WeakSet dan String, tersedia untuk Number, Array dan

kaedah baru dan sintaks baru yang boleh digunakan untuk fungsi.

let

Sebelum ES5, JavaScript hanya mempunyai dua skop: skop fungsi dan skop global. Ini membawa banyak kekecewaan dan tingkah laku yang tidak dijangka kepada pemaju dari bahasa lain seperti C, C, atau Jawa. JavaScript tidak mempunyai skop blok, yang bermaksud bahawa pembolehubah hanya boleh diakses dalam blok yang ditakrifkan. Blok adalah segalanya dalam sepasang pendakap keriting. Mari kita lihat contoh berikut:

<code class="language-javascript">function foo() {
  var par = 1;
  if (par >= 0) {
    var bar = 2;
    console.log(par); // 输出 1
    console.log(bar); // 输出 2
  }
  console.log(par); // 输出 1
  console.log(bar); // 输出 2
}
foo();</code>

Setelah menjalankan kod ini, anda akan melihat output berikut dalam konsol:

<code>1
2
1
2</code>

if Kebanyakan pemaju dari bahasa di atas mengharapkan pembolehubah bar tidak dapat diakses di luar blok bar. Sebagai contoh, menjalankan kod bersamaan dalam C menghasilkan ralat " tidak diisytiharkan", yang merujuk kepada menggunakan if di luar blok bar.

Keadaan ini berubah dalam ES6 dengan ketersediaan skop blok. Ahli organisasi ECMA tahu bahawa mereka tidak dapat mengubah tingkah laku kata kunci var kerana ini memecah keserasian ke belakang. Jadi mereka memutuskan untuk memperkenalkan kata kunci baru yang dipanggil let. Yang terakhir ini boleh digunakan untuk menentukan pembolehubah, mengehadkan skop mereka ke blok yang mengisytiharkan mereka. Selain itu, tidak seperti var, pembolehubah yang diisytiharkan menggunakan let tidak akan dipromosikan. Jika anda merujuk pembolehubah di blok sebelum menghadapi pengisytiharan let pembolehubah, ia akan menghasilkan ReferenceError. Tetapi apa maksudnya dalam amalan? Adakah hanya baik untuk pemula? sama sekali tidak!

untuk menjelaskan mengapa anda suka let, sila pertimbangkan kod berikut, yang dikutip dari artikel saya "5 JavaScript Wawancara Latihan":

<code class="language-javascript">function foo() {
  var par = 1;
  if (par >= 0) {
    var bar = 2;
    console.log(par); // 输出 1
    console.log(bar); // 输出 2
  }
  console.log(par); // 输出 1
  console.log(bar); // 输出 2
}
foo();</code>

di sini, anda boleh mengenal pasti masalah yang terkenal yang berkaitan dengan pengisytiharan, skop, dan pengendali acara yang berubah-ubah. Jika anda tidak tahu apa yang saya bicarakan, lihat artikel yang saya nyatakan sebelum kembali.

Terima kasih kepada ES6, kita dapat menyelesaikan masalah ini dengan mudah dengan menggunakan for mengisytiharkan pembolehubah let dalam gelung i:

<code>1
2
1
2</code>

Pernyataan

let disokong dalam nod dan dalam semua pelayar moden. Walau bagaimanapun, terdapat beberapa perkara yang perlu diperhatikan di Internet Explorer 11 yang boleh anda baca dalam jadual keserasian ES6.

Demonstrasi masa nyata perbezaan antara var dan let ditunjukkan di bawah, yang juga terletak di JSBIN.

const

const menangani tuntutan umum bagi pemaju untuk mengaitkan mnemonik dengan nilai yang diberikan supaya nilai tidak dapat diubah (atau, lebih mudah, menentukan pemalar). Sebagai contoh, jika anda menggunakan formula matematik, anda mungkin mahu membuat objek Math. Dalam objek ini, anda ingin mengaitkan nilai π dan E dengan mnemonik. const membolehkan anda mencapai matlamat ini. Menggunakannya, anda boleh membuat pemalar yang boleh menjadi global atau pembolehubah tempatan fungsi yang mengisytiharkannya.

pemalar yang ditakrifkan dengan const ikut peraturan skop yang sama sebagai pembolehubah, tetapi mereka tidak boleh dilancarkan semula. Pemalar juga berkongsi harta dengan pembolehubah yang diisytiharkan menggunakan let, iaitu, mereka adalah blok-scoped dan bukannya fungsi-scoped (jadi mereka tidak dipromosikan). Jika anda cuba mengakses pemalar sebelum mengisytiharkannya, anda akan menerima ReferenceError. Jika anda cuba memberikan nilai yang berbeza kepada pembolehubah yang diisytiharkan dengan const, anda akan menerima TypeError.

Walau bagaimanapun, sila ambil perhatian bahawa

tidak ada kaitan dengan kebolehubahan. Seperti yang dikatakan oleh Mathias Bynens dalam postingan blognya ES2015 Const tidak ada kaitan dengan kebolehubahan, const mencipta pengikatan yang tidak berubah, tetapi ini tidak bermakna bahawa nilai itu tidak berubah, seperti yang ditunjukkan dalam kod berikut: const

<code class="language-javascript">var nodes = document.getElementsByTagName('button');
for (var i = 0; i < nodes.length; i++) {
  nodes[i].addEventListener('click', function() {
    console.log('您点击了元素 #' + i);
  });
}</code>

Jika anda ingin membuat nilai objek yang benar -benar tidak berubah, gunakan

. Object.freeze()Sokongan penyemak imbas

const adalah sebaik let. const Penyataan disokong dalam nod dan dalam semua pelayar moden. Walau bagaimanapun, di sini, Internet Explorer 11 juga mempunyai beberapa perkara yang perlu diperhatikan, dan anda boleh membaca maklumat yang relevan dalam jadual keserasian ES6.

Penggunaan sampel const ditunjukkan di bawah:

<code class="language-javascript">function foo() {
  var par = 1;
  if (par >= 0) {
    var bar = 2;
    console.log(par); // 输出 1
    console.log(bar); // 输出 2
  }
  console.log(par); // 输出 1
  console.log(bar); // 输出 2
}
foo();</code>

Berikut menunjukkan demonstrasi langsung kod terdahulu, yang juga terletak di JSBIN.

Kesimpulan

Dalam tutorial ini, saya memperkenalkan anda kepada let dan const, dua cara baru untuk mengisytiharkan pembolehubah yang diperkenalkan dalam ES6. Walaupun var tidak akan hilang dalam masa terdekat, saya menggalakkan anda menggunakan const dan let di mana mungkin untuk mengurangkan kemungkinan kesilapan kod. Sebagai bacaan selanjutnya, anda mungkin juga menyukai tip cepat kami bagaimana untuk mengisytiharkan pembolehubah dalam JavaScript, yang meneroka mekanisme pengisytiharan berubah -ubah dengan lebih mendalam.

FAQs (FAQs) mengenai ES6 let const Apakah perbezaan antara

,

dan var dalam JavaScript ES6? let const dalam JavaScript ES6,

,

, dan var digunakan untuk mengisytiharkan pembolehubah. Perbezaan utama di antara mereka adalah skop dan penugasan semula mereka. let adalah fungsi-scoped, yang bermaksud ia hanya tersedia dalam fungsi yang diisytiharkan. Sebaliknya, const dan var adalah blok-scoped, bermakna mereka hanya boleh didapati di dalam blok yang mereka nyatakan. Bagi penugasan semula, pembolehubah yang diisytiharkan dengan let dan const boleh ditugaskan semula, manakala pembolehubah yang diisytiharkan dengan var tidak boleh. Ini menjadikan let sangat sesuai untuk nilai -nilai yang harus tidak berubah sepanjang program. const const Bilakah saya harus menggunakan

dan

dalam kod saya? let const Apabila anda perlu mengisytiharkan pembolehubah yang berubah dari masa ke masa, seperti kaunter dalam gelung atau swap nilai dalam algoritma, anda harus menggunakan

. Apabila anda mempunyai nilai yang diketahui tidak berubah, seperti tetapan konfigurasi atau rujukan kepada elemen DOM, anda harus menggunakan

. Menggunakan let boleh membuat kod anda lebih mudah dibaca dan difahami kerana ia menunjukkan pemaju lain bahawa nilai tidak boleh diubah. const const Bolehkah saya menetapkan semula pembolehubah

dalam JavaScript ES6?

const Tidak, anda tidak boleh menetapkan semula

pembolehubah dalam JavaScript ES6. Sebaik sahaja pembolehubah

diberikan, cuba menetapkan semula akan menghasilkan const. Walau bagaimanapun, jika pembolehubah const adalah objek, anda boleh mengubah sifat objek, tetapi bukan objek itu sendiri. TypeError const Apakah skop pembolehubah

dalam JavaScript ES6?

let Dalam JavaScript ES6, pembolehubah

mempunyai skop blok. Ini bermakna ia hanya boleh diakses dalam blok kod yang ditakrifkan. Jika anda cuba mengaksesnya di luar bloknya, anda akan menerima

. let

Apa yang berlaku jika saya mengisytiharkan pembolehubah menggunakan let atau const tanpa permulaan?

Jika anda mengisytiharkan pembolehubah menggunakan let atau const tanpa permulaan, ia akan menjadi undefined. Walau bagaimanapun, tidak seperti var, anda tidak boleh menggunakan pembolehubah let atau const sebelum mengisytiharkannya. Melakukannya akan menghasilkan ReferenceError.

Bolehkah saya mengisytiharkan pembolehubah dengan nama yang sama menggunakan let atau const dalam skop yang sama?

Tidak, anda tidak boleh mengisytiharkan pembolehubah dengan nama yang sama menggunakan let atau const dalam skop yang sama. Melakukannya akan menghasilkan SyntaxError. Ini dipanggil peraturan "zon mati temporal".

Dalam konteks let dan const, apakah promosi?

ketinggian adalah mekanisme dalam JavaScript di mana pembolehubah dan pengisytiharan fungsi dipindahkan ke bahagian atas skop mereka yang disertakan semasa fasa kompilasi. Walau bagaimanapun, tidak seperti var, pengisytiharan let dan const tidak dimulakan. Mereka dipromosikan, tetapi anda tidak boleh mengaksesnya sebelum perisytiharan itu, kerana mereka berada di "zon mati sementara" dari awal blok sehingga pengisytiharan diproses.

Bolehkah saya menggunakan let dan const dalam semua pelayar?

let dan const adalah sebahagian daripada spesifikasi ES6 (ES2015) dan disokong dalam semua pelayar moden. Walau bagaimanapun, untuk pelayar yang lebih tua yang tidak menyokong ES6, anda perlu menukar kod ES6 ke kod ES5 menggunakan penterjemah seperti Babel.

Apakah kesan prestasi menggunakan let dan const?

Kesan prestasi menggunakan let dan const boleh diabaikan. Enjin JavaScript mengoptimumkan kata kunci ini, jadi tidak ada perbezaan prestasi yang signifikan di antara mereka dan var. Pilihan antara let, const dan var harus berdasarkan peraturan skop mereka dan tingkah laku penugasan semula, bukan prestasi.

Apakah beberapa amalan terbaik untuk menggunakan let dan const dalam JavaScript ES6?

Beberapa amalan terbaik untuk menggunakan let dan const dalam JavaScript ES6 termasuk menggunakan const secara lalai, dan hanya jika anda tahu anda perlu menukar jumlahnya. Ini boleh menjadikan kod anda lebih mudah diramalkan dan lebih mudah difahami. Juga, selalu mengisytiharkan pembolehubah di bahagian atas skop mereka untuk menjelaskan di mana ia tersedia. let

Atas ialah kandungan terperinci ES6 dalam Tindakan: Biarkan dan Const. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!