javascript 聲明變量var、let、const詳解及示例

1. var、let、const概述

ES6發佈前，Javascript只能經過var聲明變量的方式，常量、塊級變量、函數變量這些概念的差異都不能很好的體現出來，於此同時，加入你要使用或者提供一個api，var聲明的變量可隨時被修改和從新分配的問題，會讓你時刻擔憂代碼是否能正常運行。

ES6爲咱們帶來了let、const，咱們先來了解一下三個標識符的特徵：

var: var定義一個變量，這個變量能夠被從新分配、可能會被用於整個函數（Function Scope）
let: let定義一個變量，這個變量能夠被從新分配，但let能夠被用於塊級做用域（Block Scope），不存在變量提高
const: const定義一個常量，不能夠被從新分配

下面，咱們將從做用域、變量提高、變量從新分配幾個方面講解var、let、const的差異以及用法實踐。

2. 做用域

var的做用域

當var定義的變量在函數內部時，經過函數外部調用變量，會致使 Uncaught ReferenceError: i is not defined 錯誤：

function doSomeThing () {
    var i = 1;
}

console.log(i); // Uncaught ReferenceError: i is not defined

可是，在if、for、while這樣的塊級語句內經過var聲明變量，仍然能夠在塊語句外部訪問：

if (true) {
    var i = 1;
}
console.log(i); // 1

let的做用域

let定義了一個擁有塊級做用域屬性的變量，一樣的代碼咱們用let聲明變量能夠看看結果：

if (true) {
    let j = 1;
}
console.log(j); // Uncaught ReferenceError: j is not defined

const的做用域

const的做用域規則和let相似，一樣的代碼咱們用const聲明變量能夠看看結果：

if (true) {
    const k = 1;
}
console.log(k); // Uncaught ReferenceError: k is not defined

3. 變量提高

先說結論：var聲明的變量存在變量提高，let和const則不會

來一個例子體會一下：

console.log(m); // undefined
var m = 1;

console.log(n); // Uncaught ReferenceError: n is not defined
let n = 1;

console.log(v);
const v = 1; // Uncaught ReferenceError: v is not defined

推薦使用let和const理由之一，就是能夠避免在使用後面聲明的變量時出現未知錯誤。

4. let、const用法示例

明白var、let、const的區別，有助於咱們用更簡潔易懂的方式表達咱們的代碼。

先看看什麼狀況下你才用var?

經過上面的介紹，咱們大概瞭解到var區別於let、const的地方在是：函數做用域、可被修改、變量提高，因此在函數聲明優先於變量聲明，可是函數調用在變量聲明以後的邏輯裏能夠用到var。

var f = {
    doThings: function () {
        console.log(i);
    }
}
var i = 1; // 聲明變量

// 函數調用
f.doThings(); // 1

使用let的場景？

let通常用於for（while）循環和數學表達式計算中

for (let i = 0, len = 100; i < len; i++) {
    console.log(i);
}

那麼有個問題，上面的for循環用var聲明i變量也是能夠的啊？

再來看一段代碼：

for (var i = 0; i < 100; i++) {
    setTimeout(function() {
        console.log(i);
    }, i * 1000);
}

// 控制檯會一直輸出100
// 改爲 let

for (let i = 0; i < 100; i++) {
    setTimeout(function() {
        console.log(i);
    }, i * 1000);
}

解釋一下爲何會這樣：let的做用局的塊級做用局，即每次循環的i的做用域就是本次循環，下一次循環從新定義變量i。

const的使用場景？

const聲明瞭一個常量，推薦將const常量用於別名，下降常量的記憶難度。

const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";

結束

建議在"use strict"模式下，使用let和const替代var，以保證代碼的整潔和可讀。