javascript變量聲明var,let,const的區別是什么

本文小編為大家詳細介紹“javascript變量聲明var,let,const的區別是什么”，內容詳細，步驟清晰，細節處理妥當，希望這篇“javascript變量聲明var,let,const的區別是什么”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

作用域（Scope）是什么

作用域是程序的執行環境，它包含在當前位置可訪問的變量和函數。在 ES5 語法中，有全局作用域和局部作用域，ES6 則新增了塊級作用域。

全局作用域是最外層的作用域，在函數外面定義的變量屬于全局作用域，可以被任何其他子作用域訪問。在瀏覽器中，window 對象就是全局作用域。在編寫前端代碼過程中，其中有一條優化規則就是少使用全局變量，因為全局變量容易導致程序BUG，并且不容易查找。

局部作用域的基本單元是 function，只在函數體內有效。局部作用域是在函數內部的作用域。在局部作用域定義的變量只能在該作用域以及其子作用域被訪問。

javascript中，變量聲明使用 var、const、let來聲明變量，var為ES5的語法，const和let為ES6之后的語法。ES6 的let和const為新引入的關鍵字，它們不會被提升，而且是塊作用域。也就是說被大括號包圍起來的區域聲明的變量外部將不可訪問。

下面我們就來說說各自的區別。

var 聲明

var聲明，為ES5的語法，var聲明的變量總是歸屬于包含函數（即全局，如果在最頂層的話）。在 javaScript 函數內部聲明的變量（使用 var）是局部變量，所以只能在函數內部訪問它（該變量的作用域是局部的）。可以在不同的函數中使用名稱相同的局部變量，因為只有聲明過該變量的函數才能識別出該變量。

提升(Hoisting)

在編譯過程中，將var和function的定義移動到他們作用域最前面的行為叫做提升。

整個函數定義會被提升。所以，可以在函數還未定義之前調用它，而不用擔心找不到該函數。

console.log(toSquare(3)); // 9
function toSquare(n) {
    return n * n;
}

變量只會被部分提升。而且只有變量的聲明會被提升，賦值不會動。

開發者可能最希望實現 for循環的塊級作用域了，因為可以把隨意聲明的計數器變量限制在循環內部。

for (var i = 0; i < 10; i++) {
    console.log(i);
}

立即執行函數能夠有效解決：

for (var i = 0; i < 10; ++i) {
    (function (value) {
        console.log(value);
    })(i);
}

再來看一個例子

(function () {
    var testValue = "hello";
    var testFunc = function () {
        console.log("just test");
    };
})();
console.log(window.testValue); // undefined
console.log(window.testFunc); // undefined

趣題：

var x = 10;
var y = 20;
[y, x] = [x, y];
console.log(x, y); // 20 10

let 聲明

過早訪問 let聲明的引用導致的這個referenceerror叫做臨時死亡區錯誤，在訪問一個已經聲明但還沒有初始化的變量。創建一個塊作用域。

let g1 = "global 1";
let g2 = "global 2";
{
    g1 = "new global 1";
    let g2 = "local global 2";
    console.log(g1); // new global 1
    console.log(g2); // local global 2
    console.log(g3); // ReferenceError: g3 is not defined
    let g3 = "I am not hoisted";
}

const 聲明

const是對賦值做鎖定，不對值的改變鎖定。例如：數組、對象。 一個常見的誤解是：使用const聲明的變量，其值不可更改，但是對于數組和對象，其值是可以更改的。

const tryMe = "initial assignment";
//下面重新賦值會導致程序錯誤
tryMe = "this has been reassigned"; // TypeError: Assignment to constant variable.

//對于數組是可以更改元素值
const array = ["Ted", "is", "awesome!"];
array[0] = "Barney";
array[3] = "Suit up!";
console.log(array); // [ 'Barney', 'is', 'awesome!', 'Suit up!' ]
//下面這樣更改整個數組，相對于重新賦值，是錯誤的
array = ["Barney", "is", "awesome!", "Suit up!"];

// 同樣對于對象
const airplane = {};
airplane.wings = 2;
airplane.passengers = 200;
console.log(airplane); // { wings: 2, passengers: 200 }

//下面是錯誤
airplane = { wings: 2, passengers: 200 };

對于支持ES6的語法，建議默認使用 const， 在確實需要改變的變量聲明使用 let, 這樣可以在某種程度上實現代碼的不可變。從而可以避免很多的問題的出現。

讀到這里，這篇“javascript變量聲明var,let,const的區別是什么”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。