let塊級作用域

1 {
2   let a = 10;
3   var b = 1;
4 }
5 
6 a // ReferenceError: a is not defined.
7 b // 1

for循環的計數器，就很合適使用let命令（防止i泄露為全局變量）

1 for (let i = 0; i < 10; i++) {
2   // ...
3 }
4 
5 console.log(i);
6 // ReferenceError: i is not defined

下面的代碼如果使用var，最後輸出的是10。

1 var a = [];
2 for (var i = 0; i < 10; i++) {
 
3   a[i] = function () {
4     console.log(i);
5   };
6 }
7 a[6](); // 10

如果使用let，聲明的變量僅在塊級作用域內有效，最後輸出的是6。

1 var a = [];
2 for (let i = 0; i < 10; i++) {
3   a[i] = function () {
4     console.log(i);
5   };
6 }
7 a[6](); // 6

如果是es5也想輸出6的話,必須使用閉包

1 var a = [];
2 for (var i = 0; i < 10; i++) {
3   (function
 
(i){
4     a[i]=function(){
5       console.log(i)
6     }
7   })(i)
8 }
9 a[6](); // 10

for循環還有一個特別之處，就是設置循環變量的那部分是一個父作用域，而循環體內部是一個單獨的子作用域

1 for (let i = 0; i < 3; i++) {
2   let i = ‘abc‘;
3   console.log(i);
4 }
5 // abc
6 // abc
7 // abc

1 // var 的情況
2 console.log(foo); // 輸出undefined
3 var foo = 2;
4 
5
 
 // let 的情況
6 console.log(bar); // 報錯ReferenceError
7 let bar = 2;

不存在變量提升,如上圖

1 var tmp = 123;
2 
3 if (true) {
4   tmp = ‘abc‘; // ReferenceError
5   let tmp;
6 }

存在全局變量tmp，但是塊級作用域內let又聲明了一個局部變量tmp，導致後者綁定這個塊級作用域，所以在let聲明變量前，對tmp賦值會報錯

 1 if (true) {
 2   // TDZ開始
 3   tmp = ‘abc‘; // ReferenceError
 4   console.log(tmp); // ReferenceError
 5 
 6   let tmp; // TDZ結束
 7   console.log(tmp); // undefined
 8 
 9   tmp = 123;
10   console.log(tmp); // 123
11 }

1 typeof x; // ReferenceError
2 let x;

如果一個變量沒有聲明，使用typeof不會報錯

1 typeof undeclared_variable // "undefined"

1 function bar(x = y, y = 2) {
2   return [x, y];
3 }
4 
5 bar(); // 報錯

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

// 不報錯
var x = x;

// 報錯
let x = x;
// ReferenceError: x is not defined

LET不允許相同作用域重復聲明

 1 // 報錯
 2 function () {
 3   let a = 10;
 4   var a = 1;
 5 }
 6 
 7 // 報錯
 8 function () {
 9   let a = 10;
10   let a = 1;
11 }

1 function func(arg) {
2   let arg; // 報錯
3 }
4 
5 function func(arg) {
6   {
7     let arg; // 不報錯
8   }
9 }

內層變量可能覆蓋外層變量

 1 var tmp = new Date();
 2 
 3 function f() {
 4   console.log(tmp);
 5   if (false) {
 6     var tmp = ‘hello world‘;
 7   }
 8 }
 9 
10 f(); // undefined

 1 // 瀏覽器的 ES6 環境
 2 function f() { console.log(‘I am outside!‘); }
 3 
 4 (function () {
 5   if (false) {
 6     // 重復聲明一次函數f
 7     function f() { console.log(‘I am inside!‘); }
 8   }
 9 
10   f();
11 }());
12 // Uncaught TypeError: f is not a function

等價於

 1 // 瀏覽器的 ES6 環境
 2 function f() { console.log(‘I am outside!‘); }
 3 (function () {
 4   var f = undefined;
 5   if (false) {
 6     function f() { console.log(‘I am inside!‘); }
 7   }
 8 
 9   f();
10 }());
11 // Uncaught TypeError: f is not a function

CONST

1 const foo = {};
2 
3 // 為 foo 添加一個屬性，可以成功
4 foo.prop = 123;
5 foo.prop // 123
6 
7 // 將 foo 指向另一個對象，就會報錯
8 foo = {}; // TypeError: "foo" is read-only

1 const a = [];
2 a.push(‘Hello‘); // 可執行
3 a.length = 0;    // 可執行
4 a = [‘Dave‘];    // 報錯

es6語法入門let 和 const 命令