Cara menggunakan let in es6

Dalam ES6, kata kunci let digunakan untuk mengisytiharkan pembolehubah, bagaimanapun, pembolehubah yang diisytiharkan hanya sah dalam blok kod di mana arahan let terletak. Biar tidak menyebabkan "promosi berubah", jadi pembolehubah mesti digunakan selepas ia diisytiharkan, jika tidak, ralat akan dilaporkan. Selagi perintah let wujud dalam skop peringkat blok, pembolehubah yang diisytiharkan adalah "mengikat" pada kawasan ini dan tidak lagi dipengaruhi oleh pengaruh luar.

Persekitaran pengendalian tutorial ini: sistem Windows 7, ECMAScript versi 6, komputer Dell G3.

es6 let keyword

ES6 menambah perintah let baharu untuk mengisytiharkan pembolehubah. Penggunaannya serupa dengan var, tetapi pembolehubah yang diisytiharkan hanya sah dalam blok kod tempat perintah let terletak.

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

Kod di atas mengisytiharkan dua pembolehubah menggunakan let dan var masing-masing dalam blok kod. Kemudian kedua-dua pembolehubah ini dipanggil di luar blok kod Akibatnya, pembolehubah yang diisytiharkan oleh let melaporkan ralat, dan pembolehubah yang diisytiharkan oleh var mengembalikan nilai yang betul. Ini menunjukkan bahawa pembolehubah yang diisytiharkan oleh let hanya sah dalam blok kod di mana ia berada.

for pembilang gelung, ia sesuai untuk menggunakan arahan let.

for (let i = 0; i < 10; i++) {}

console.log(i);
//ReferenceError: i is not defined

Dalam kod di atas, pembilang i hanya sah dalam badan gelung for dan ralat akan dilaporkan apabila dirujuk di luar gelung.

Jika kod berikut menggunakan var, output akhir ialah 10.

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

Dalam kod di atas, pembolehubah i diisytiharkan oleh var dan sah dalam skop global. Jadi setiap kali ia bergelung, nilai i baharu akan menimpa nilai lama, menyebabkan output akhir menjadi nilai pusingan terakhir i.

Jika anda menggunakan let, pembolehubah yang diisytiharkan hanya sah dalam skop peringkat blok dan output akhir ialah 6.

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

Dalam kod di atas, pembolehubah i diisytiharkan oleh let Semasa i hanya sah dalam kitaran ini, jadi i dalam setiap kitaran sebenarnya adalah baharu. satu pembolehubah, jadi keluaran akhir ialah 6.

Tiada promosi berubah-ubah

let tidak mempunyai fenomena "promosi berubah" seperti var. Oleh itu, pembolehubah mesti digunakan selepas ia diisytiharkan, jika tidak ralat akan dilaporkan.

console.log(foo); // 输出undefined
console.log(bar); // 报错ReferenceError

var foo = 2;
let bar = 2;

Dalam kod di atas, pembolehubah foo diisytiharkan dengan perintah var, dan promosi pembolehubah akan berlaku, iaitu apabila skrip mula berjalan, pembolehubah foo sudah wujud , tetapi tidak mempunyai nilai, jadi ia akan menjadi output undefined. Pembolehubah bar diisytiharkan dengan perintah let, dan tiada promosi pembolehubah akan berlaku. Ini bermakna pembolehubah bar tidak wujud sebelum mengisytiharkannya, dan jika ia digunakan, ralat akan dilemparkan.

Zon mati sementara

Selagi perintah let wujud dalam skop peringkat blok, pembolehubah yang diisytiharkan akan "mengikat" di kawasan ini. sekali lagi dipengaruhi oleh pengaruh luar.

var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}

Dalam kod di atas, terdapat pembolehubah global tmp, tetapi let mengisytiharkan pembolehubah tempatan tmp dalam skop peringkat blok, menyebabkan pembolehubah global mengikat peringkat blok ini skop, jadi Sebelum let mengisytiharkan pembolehubah, memberikan nilai kepada tmp akan melaporkan ralat.

ES6 dengan jelas menetapkan bahawa jika terdapat perintah let dan const dalam blok, pembolehubah yang diisytiharkan oleh arahan ini dalam blok ini akan membentuk skop tertutup dari awal. Sebarang penggunaan pembolehubah ini sebelum pengisytiharan akan mengakibatkan ralat.

Ringkasnya, dalam blok kod, pembolehubah tidak tersedia sehingga ia diisytiharkan menggunakan arahan let. Dari segi tatabahasa, ini dipanggil "zon mati sementara" (TDZ).

if (true) {
  // TDZ开始
  tmp = 'abc'; // ReferenceError
  console.log(tmp); // ReferenceError

  let tmp; // TDZ结束
  console.log(tmp); // undefined

  tmp = 123;
  console.log(tmp); // 123
}

Dalam kod di atas, sebelum perintah let mengisytiharkan pembolehubah tmp, ia tergolong dalam "zon mati" pembolehubah tmp.

"Zon mati sementara" juga bermakna typeof bukan lagi operasi yang selamat 100%.

typeof x; // ReferenceError
let x;

Dalam kod di atas, pembolehubah x diisytiharkan menggunakan perintah let, jadi sebelum ia diisytiharkan, ia tergolong dalam "zon mati" x selagi pembolehubah digunakan, ralat akan dilaporkan. Oleh itu, satu typeof akan dilemparkan apabila ReferenceError dijalankan.

Sebagai perbandingan, jika pembolehubah tidak diisytiharkan sama sekali, menggunakan typeof tidak akan melaporkan ralat.

typeof undeclared_variable // "undefined"

Dalam kod di atas, undeclared_variable ialah nama pembolehubah yang tidak wujud dan hasilnya "tidak ditentukan". Oleh itu, sebelum tiada let, pengendali typeof adalah 100% selamat dan tidak akan pernah melaporkan ralat. Ini tidak lagi benar. Reka bentuk ini adalah untuk membantu semua orang membangunkan tabiat pengaturcaraan yang baik Pembolehubah mesti digunakan selepas ia diisytiharkan, jika tidak, ralat akan dilaporkan.

Sesetengah "zon mati" tersembunyi dan tidak mudah ditemui.

function bar(x = y, y = 2) {
  return [x, y];
}

bar(); // 报错

上面代码中，调用bar函数之所以报错（某些实现可能不报错），是因为参数x默认值等于另一个参数y，而此时y还没有声明，属于”死区“。如果y的默认值是x，就不会报错，因为此时x已经声明了。

function bar(x = 2, y = x) {
  return [x, y];
}
bar(); // [2, 2]

ES6规定暂时性死区和let、const语句不出现变量提升，主要是为了减少运行时错误，防止在变量声明前就使用这个变量，从而导致意料之外的行为。这样的错误在ES5是很常见的，现在有了这种规定，避免此类错误就很容易了。

总之，暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。

不允许重复声明

let不允许在相同作用域内，重复声明同一个变量。

// 报错
function () {
  let a = 10;
  var a = 1;
}

// 报错
function () {
  let a = 10;
  let a = 1;
}

因此，不能在函数内部重新声明参数。

function func(arg) {
  let arg; // 报错
}

function func(arg) {
  {
    let arg; // 不报错
  }
}

块级作用域

为什么需要块级作用域？

ES5只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。

第一种场景，内层变量可能会覆盖外层变量。

var tmp = new Date();

function f() {
  console.log(tmp);
  if (false) {
    var tmp = "hello world";
  }
}

f(); // undefined

上面代码中，函数f执行后，输出结果为undefined，原因在于变量提升，导致内层的tmp变量覆盖了外层的tmp变量。

第二种场景，用来计数的循环变量泄露为全局变量。

var s = 'hello';

for (var i = 0; i < s.length; i++) {
  console.log(s[i]);
}

console.log(i); // 5

上面代码中，变量i只用来控制循环，但是循环结束后，它并没有消失，泄露成了全局变量。

ES6的块级作用域

let实际上为JavaScript新增了块级作用域。

function f1() {
  let n = 5;
  if (true) {
    let n = 10;
  }
  console.log(n); // 5
}

上面的函数有两个代码块，都声明了变量n，运行后输出5。这表示外层代码块不受内层代码块的影响。如果使用var定义变量n，最后输出的值就是10。

ES6允许块级作用域的任意嵌套。

{{{{{let insane = 'Hello World'}}}}};

上面代码使用了一个五层的块级作用域。外层作用域无法读取内层作用域的变量。

{{{{
  {let insane = 'Hello World'}
  console.log(insane); // 报错
}}}};

内层作用域可以定义外层作用域的同名变量。

{{{{
  let insane = 'Hello World';
  {let insane = 'Hello World'}
}}}};

块级作用域的出现，实际上使得获得广泛应用的立即执行函数表达式（IIFE）不再必要了。

// IIFE 写法
(function () {
  var tmp = ...;
  ...
}());

// 块级作用域写法
{
  let tmp = ...;
  ...
}

【相关推荐：javascript视频教程、编程视频】

Atas ialah kandungan terperinci Cara menggunakan let in es6. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!