Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >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 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.
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.
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只用来控制循环,但是循环结束后,它并没有消失,泄露成了全局变量。
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!