JavaScript let 與 const.png

ECMAScript 變量是松散類型的，意思是變量可以用于保存任何類型的數(shù)據(jù)。每個變量只不過是一個用于保存任意值的命令占位符。在 ECMAScript 6 之前，聲明變量使用 var 關(guān)鍵字，ECMAScript 6 新增了 const 和 let 關(guān)鍵字用以聲明變量。

var

使用 var 關(guān)鍵字聲明變量：

var msg;    // 不初始化時，變量保存一個特殊值 undefined
var msg = "Hello";    // 初始化
msg = 3.14;    // 可以改變保存的值和值的類型，但不推薦

作用域

var 聲明的變量的作用域是函數(shù)作用域，在函數(shù)退出時銷毀變量：

function test() {
    var msg = "Hello";
}
test();
console.log(msg); // ReferenceError: msg is not defined

但是省略 var 會創(chuàng)建全局變量：

function test() {
    msg = "Hello";
}
test();
console.log(msg); // Hello

但這樣操作會使得全局變量很難維護(hù)，不推薦這樣做。

var 聲明提升

在 var 聲明變量之前調(diào)用變量不會報錯，因?yàn)?var 聲明的變量會自動提升到函數(shù)作用域頂部：

function test() {
    console.log(name);
    var name = "小明";
}
test(); // undefined

let

let 跟 var 的作用差不多，但也有著非常重要的區(qū)別。最主要的區(qū)別是：let 聲明變量的作用域是塊作用域，var 聲明變量的作用域是函數(shù)作用域。

function varScope() {
    if (true) {
        var name = "var name";
        console.log(name);    // var name
    }
    console.log(name);    // var name
}
function letScope() {
    if (true) {
        let name = "let name";
        console.log(name);    // let name 
    }
    console.log(name);    // ReferenceError: name is not defined
}

從上面的例子中知道，let 關(guān)鍵字聲明變量的作用域僅限于塊內(nèi)部。塊作用域是函數(shù)作用域的子集，適用于 var 的作用域限制同樣也適用于 let。

重復(fù)聲明

let 不允許同一個塊作用域中出現(xiàn) 重復(fù)聲明。出現(xiàn)時會導(dǎo)致報錯：

function varScope() {
    var name = "var name";
    var name = "var name";
}
function letScope() {
    let name = "let name";
    let name = "let name";    // SyntaxError: Identifier 'name' has already been declared
}

然而，嵌套使用相同標(biāo)識符相當(dāng)于創(chuàng)建一個新的塊作用域，因此，相同的標(biāo)識符不會報錯，這是因?yàn)橥粋€塊中沒有重復(fù)聲明：

function letScope() {
    let name = "let name 1";
    if (true) {
        let name = "let name 2";
        console.log(name);    // let name 2
    }
    console.log(name);    // let name 1
}

暫時性死區(qū)

var 聲明的變量的初始值是 undefined。然而 let 與 var 不同，通過 let 聲明的變量不會在作用域中被提升。直到聲明被執(zhí)行時才初始化，初始化前訪問變量會導(dǎo)致 ReferenceError，let 聲明變量之前的執(zhí)行瞬間被稱為 “暫時性死區(qū)”

let 與var 的另一個重要的區(qū)別，就是let 聲明的變量不會在作用域中被提升。

function deadZone() {
    console.log(varname);    // undefined
    console.log(letname);    // ReferenceError
    let letname = "let name";
    var varname = "var name";
}

全局聲明

var 在 全局作用域 中聲明的變量會成為 window 對象的屬性；而 let 聲明的變量不會稱為 window 對象的屬性。

var varname = 'var name';
console.log(window.name); // 'var name'
let letname = "let name";
console.log(window.letname); // undefined

但 let 聲明仍然是在全局作用域中發(fā)生的，相應(yīng)變量會在頁面的聲明周期內(nèi)存續(xù)。因此，為了避免 SyntaxError，必須確保頁面不會重復(fù)聲明同一個變量。

const

const 聲明的變量也是塊作用域，與 let 基本相同，只是 const 聲明變量時必須同時初始化變量。聲明的變量的值是只讀的，修改 const 聲明的變量會導(dǎo)致運(yùn)行時錯誤。

// 聲明常量要有一個初始值
const name;    // SyntaxError: Missing initializer in const declaration

// 塊作用域
const name = "const name 1";
if (true) {
    const name = "const name 2";
    console.log(name);    // const name 2
}
console.log(name);    // const name 1

name = "const name 2";    // TypeError: Assignment to constant variable.

// 嘗試重新聲明
const name = "const name 3";    // SyntaxError: Identifier 'name' has already been declared

const 也可以聲明對象和數(shù)組。當(dāng)聲明的變量是一個對象時，不修改對象引用，而是修改對象內(nèi)部的屬性不違反 const 的限制。

const student = {};
student.name = "小明";

const 實(shí)質(zhì)上保存的并不是變量的值不得改動，而是變量指向的內(nèi)存地址不得改動。

在 for 循環(huán)中不能使用 const 聲明變量，因?yàn)榈鷷r變量會自增就會拋出 TypeError 錯誤：

for (const i = 0; i < 10; i++) {}
// TypeError: Assignment to constant variable.

然而，在 for-in 或 for-of 循環(huán)中使用不會報錯。

for (const key in {name: "小明", age: 24}) {
    console.log(key);    // name, age
}
for (const value of ["name", "age", "id", "sex"]) {
    console.log(value);    // name, age, id, sex
}

總結(jié)

var 聲明變量帶來了許多問題，ECMAScript 6 增加的 let 和 const 對語言更精確地聲明作用域和語義提供了更好的支持，提升了代碼質(zhì)量。新增了兩個關(guān)鍵字后，以不再需要 var 來聲明變量，這樣使得變量有明確的作用域、聲明位置，以及不變的值。但聲明變量時最好使用 const，這樣使得變量在瀏覽器運(yùn)行時強(qiáng)制保持不變。只在提前知道未來會有修改時，再使用 let。

更多內(nèi)容請關(guān)注公眾號「海人為記」