JavaScript中const,var,let區別與用法

今天下班后，在封裝前端一個工具的時候，突然想到const、var、let。這些東西很常用，也大致知道在什么場景使用，但一直沒有特意去區分過。

1、const

首先，我們僅聲明變量：

    const a ;
    console.log(a);

運行一下：

 然后，我們對其進行初始化：

    const a = 2;
    console.log(`a is ${a}`);

運行一下：

 那么，我們對變量a進行修改一下：

    const a = 2;
    console.log(`a is ${a}`);
    a = 5;
    console.log(`a is ${a}`);

 錯誤：Assignment to constant variable.==》對常量變量賦值。

總結：const 用於聲明一個或多個常量，聲明時必須進行初始化，且初始化后值不可再修改

2、var

我們首先聲明一個變量b，僅僅是聲明：

    var b;
    console.log(`b is ${b}`);

運行結果：

 結果是underfind。如果害怕是因為前面的字符串影響到了，那么我們可以直接打印出b的類型：

    var b;
    console.log(`b is ${b}`);
    console.log(typeof b);

 現在，我們聲明變量b，並對其進行賦值，在一個函數中去改變b的值：

    var b = 1;
    console.log(`before change b is ${b}`);
    function change() {
        b = 4;
        console.log(`b is ${b} in change`);
    }
    change();
    console.log(`after change b is ${b}`);

 總結：var定義的變量可以修改，如果不初始化會輸出undefined，不會報錯。

其實，var是可以省略的。var關鍵字會影響變量的作用域。函數外部：變量不管是否用了var申明，都是全局變量。函數內部：變量如果沒有使用var關鍵字申明，那它就是全局變量，只有用var關鍵字申明了，才是局部變量。

所以，為了避免潛在的風險，務必使用var關鍵字來申明變量。盡量不要省略關鍵字。

3、let

我們來定義一個變量c：

    let c ;
    console.log(`c is ${c}`);

 let變量，也是可以僅聲明的。

我們來聲明一個變量d：

    let d = 1;
    console.log(`d is ${d} outer change`);
    var change = function () {
        let d = 2;
        console.log(`d is ${d} in change`);
    }
    change();
    console.log(`after chaneg d is ${d}`);

 其實，在上面，將let關鍵字，改成var，得到的結果也是一樣的。那好像let和var作用一樣，為什么還要多此一舉出現let呢？

3.1、let和var的區別：

全局作用域

var 和 let 聲明的變量在全局作用域中被定義時，兩者非常相似

var blv="blv";
let bll="bll";

但是，被let聲明的變量不會作為全局對象window的屬性，而被var聲明的變量卻可以

var blv="blv";
let bll="bll";
console.log("blv is :"+window.blv);
console.log("bll is :"+window.bll);

 函數作用域：

var 和 let 在函數作用域中聲明一個變量，兩個變量的意義是相同的。

function func1(){
    let bll = 'bll'; // 函數作用域中的變量
    var blv = 'blv'; // 函數作用域中的變量
}

塊作用域：

在塊作用域中兩者的區別較為明顯， let只在for()循環中可用，而 var是對於包圍for循環的整個函數可用

    function func1() {
        // i 對於for循環外的范圍是不可見的(i is not defined)
        for (let i = 1; i < 5; i++) {
            //  i只有在這里是可見的
            console.log(i+" in func1 in for");
        }
        // i 對於for循環外的范圍是不可見的(i is not defined)
        console.log(i+" in func1");
    }
    function func2() {
        // i 對於for循環外的范圍是可見的
        for (var i = 1; i < 5; i++) {
            // i 在for 在整個函數體內都是可見的
            console.log(i+" in func2 in for");
        }
        // i 對於for循環外的范圍是可見的
        console.log(i+" in func2");
    }

執行func1：

 執行func2：

let和var重新聲明：

var允許在同一作用域中聲明同名的變量，而let不可以

let me  = 'foo';
let me  = 'bar'; //SyntaxError: Identifier 'me' has already been declared

var me = 'foo';
var me = 'bar'; //這里me被替代了，是可以重復聲明的

 那么，在什么情況下要用到let呢？

let 在塊作用域中有效，有的時候，我們為了降低變量污染的風險，在塊作用域中使用let來代替var，這樣不會污染塊作用域的外部作用域，降低 bug率，使代碼更安全。