ES6中的let和var的區別
阿新 • • 發佈:2019-01-23
ES6中新增了let命令用來宣告變數,let和var 宣告的變數有什麼區別呢?現在來講解總結下。
1、基本用法:和var 命令類似,直接使用 let 變數 = 值。
{
let a = '1';
var b = 'a';
}
a // error: a is not defined.
b // 1
2、有效作用域:let宣告的變數只在其命令所在的程式碼塊內有效。
var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 6
使用let宣告的變數僅在在塊級作用域內有效有效,所以輸出的是6,。來看,如果使用var 命令宣告的情況:
var a = [];
for (var i = 0; i < 9; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 9
為什麼輸入的是9而不是6呢,其中的原因是for迴圈中的i使用var 宣告之後就是一個全域性的變數,即變成window物件下的變數。迴圈中a[i]是一個匿名方法,此匿名方法中的console.log(i)的是window下的i變數,每次遍歷時變數i都會增加。陣列a中的成員裡面的i,指向的都是同一個i,導致執行時輸出的是最後一輪的i的值3、let宣告的變數不存在變數提升
我們都知道使用var 宣告的變數存在變數提升,即變數可以在宣告之前使用,值為undefined,新增的let命令不存在此功能。
// var 的情況
console.log(a); // 輸出undefined
var a = 2;
// let 的情況
console.log(b); // 報錯ReferenceError
let b = 2;
4、let存在暫時性死區:
暫時性死區就是使用let命令宣告的變數會繫結到變數所在的塊級作用域中,不收外界影響。使用let命令宣告變數之前,該變數都是不可用的。
再看:var tmp = 123; if (true) { tmp = 'abc'; // ReferenceError let tmp; }
if (true) {
// TDZ開始
tmp = 'abc'; // ReferenceError
console.log(tmp); // ReferenceError
let tmp; // TDZ結束
console.log(tmp); // undefined
tmp = 123;
console.log(tmp); // 123
}
在相同的函式或塊作用域內重新宣告同一個變數會引發SyntaxError:if (x) {
let foo;
let foo; // TypeError thrown.
}
比本人總結的更好的地址,參考如下資料:
阮一峰: http://es6.ruanyifeng.com/#docs/let
MDN: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/let
如有紕漏,還請多包涵並指出。