ES6學習筆記一：let、const、塊級做用域

1、ES6新增了let命令

let 和 var 同樣都是用來聲明標量，但let所聲明的變量只在【聲明的代碼塊內】及【聲明以後】有效

{
    console.log(a);  // undefined
    console.log(b);  // Uncaught ReferenceError: b is not defined(…)
    var a = 5;
    let b = 10;
}
console.log(a);  // 5
console.log(b);  // Uncaught ReferenceError: b is not defined(…)

let命令適合在for循環中使用

// i在for循環內有效
for(let i = 0;i < 5;i++){
    console.log(i); // 0 1 2 3 4
}
console.log(i);    // Uncaught ReferenceError: i is not defined(…)

//i在全局內有效
for(var i = 0;i < 5;i++){
    console.log(i); // 0 1 2 3 4
}
console.log(i);    // 5

let 命令暫時性死區

// 大括號中的a使用了let聲明，因此 a在大括號中暫時只能在聲明以後有效
var a = 5;
{
    console.log(a); // Uncaught ReferenceError: a is not defined(…)
    typeof a;       // Uncaught ReferenceError: a is not defined(…)
    let a =10;      
    console.log(a); // 10
}
console.log(a);     // 5

let不容許在同一做用域內重複聲明變量，所以不能在函數內從新聲明變量

{
    let a = 10;
    var a = 15;  //Uncaught SyntaxError: Identifier 'a' has already been declared
}

{
    var a = 10;
    var a = 15;        // 不會報錯
    console.log(a);    // 15
}

show(10);  
function show(arg){
    let arg = 5;    //Uncaught SyntaxError: Identifier 'arg' has already been declared(…)
    console.log(arg);
}

hide(10);
function hide(arg){
    {
        let arg = 5;
        console.log(arg);  // 5
    }
    console.log(arg);      // 10
}

2、ES6新增了塊級做用域

ES5只有全局做用域和函數做用域，會出現如下的問題

//一、內層變量覆蓋了外層變量
var number = 5;
show();
function show(){
    console.log(number);      // undefined
    var number = 10 ;
}

//二、i泄露成全局變量
var string = 'hello';
for(var i = 0 ;i<string.length ;i++){
    console.log(string[i]);  // h e l l o
}
console.log(i);              // 5

ES6塊級做用域寫法（塊級做用域能夠無限嵌套，能夠代替ES5的匿名函數IIFE）

{
    let number = 5;
    console.log(number);       // 5
    {
        let number = "hello";
        console.log(number);  // hello
    }
}

ES5嚴格模式下，函數不能在塊級中聲明，ES6明確規定能夠在塊級做用域中聲明函數，但聲明的函數有點相似let，在塊級做用域以外不可引用，因爲瀏覽器能夠忽略以上規則，因此儘可能避免在塊級做用域中聲明函數。

//ES5非嚴格模式
if(true){
    function show(){    //不報錯
    };
}
//ES5嚴格模式
'use strict';
if(true){
    function show(){    //直接報錯
    };
}

//ES6嚴格模式
'use strict';
if(true){
    function show(){    //不報錯
    };
}

3、ES6新增了const命令

const 聲明的是一個只讀的變量，一旦聲明，不可更改，這就意味着一旦聲明就必須初始化，否則會報錯，const做用域和let做用域同樣.

const PI;             //Uncaught SyntaxError: Missing initializer in const declaration
const PI = 3.1415926;
console.log(PI);      // 3.1415926;
PI = 4 ;              // Uncaught TypeError: Assignment to constant variable.

//const聲明的變量也和let同樣，不能重複聲明
var a = 1;
let b = 2;
const a = 5;    //Uncaught SyntaxError: Identifier 'a' has already been declared
const b = 6 ;   //Uncaught SyntaxError: Identifier 'b' has already been declared

//對於複合對象，變量名指向的是數據的地址，const聲明的指向的是數據的地址不變，但數據能夠變；若要凍結數據，可使用freeze.
const A = {};
A.props = 123;
console.log(A.props);  // 123
A = {};                // Uncaught TypeError: Assignment to constant variable.

const B = Object.freeze({});
B.props = 456;         // 常規模式，該行代碼無效，嚴格模式下會報錯
console.log(B.props);  // undefined

全局變量的屬性

window.a = 1;
var a = 2 ;
console.log(a);         // 2
console.log(window.a);  // 2

window.b = 1;
let b = 2 ;
console.log(b);         // 2
console.log(window.b);  // 1

總結：

ES5 有兩種聲明變量的方法：var 和 function命令
ES6 有六種聲明變量的方法：var 、 function 、let 、const 、import、class命令。