輕鬆弄懂var、let、const之間的區別

ECMAScript 6（簡稱ES6）是JavaScript語言的下一代標準，於2015年6月正式發佈，也稱ECMAScript 2015。

ES6的好處

ES6的出現爲咱們前端帶來了不少方便之處，之前用js幾十行才實現的一個功能，ES6幾行代碼就能簡單的實現，ES6新增的一些特性，改變了不少弊端之處，好比新出現的let、const，實現了塊級做用域功能，減小了之前var的全局變量，箭頭函數代替詞法做用域的"this" 等等，在這裏就再也不作更多的舉例子，想了解更多請參考 https://www.w3cschool.cn/ecmascript/pgms1q5d.html，今天主要跟你們一塊兒瞭解一下var、let、const之間的區別

let

let是ES6新增的命令，用來聲明變量，跟var聲明變量同樣。可是它倆有很大的區別。

• let、const聲明的變量僅在塊級做用域內有效，var 聲明變量是全局的，沒有塊級做用域功能
• let 、const 不存在變量提高 , var 存在變量
• let 、const不能在同一塊級做用域內重複申請

用let定義變量，運行代碼以下：

const arr = [1, 2, 3, 4]
    for (let i = 0; i < arr.length; i++) {
    console.log(arr[i])
    }
        console.log(i);

以上報錯i未定義，說明let定義變量i，只在所在的塊做用域內起做用

var 定義變量，運行代碼以下：

var arr = [1, 2, 3, 4]
    for (var i = 0; i < arr.length; i++) {
            console.log(arr[i])
        }
        console.log(i);

以上運行結果說明，var 定義變量 沒有塊級做用域，i在塊級做用域照樣能夠輸出結果
其實var在函數內命名的變量是隻在整個函數做用域內起做用，出了這個函數做用域就不能用了，例以下面

function testVar () {
            var i = 2
            console.log('函數內:' + i)
        }
        testVar()
        console.log('函數外:' + i)

很明顯在函數外輸出變量i的時候，報i未定義，var在函數內命名的變量是隻在整個函數做用域內起做用

let不像var那樣會發生「變量提高」現象。因此，變量必定要在聲明後使用，不然報錯。
運行代碼以下：

console.log(arg1)
    console.log(arg2)
    var arg1 = 'test'
    let arg2 = 'test2'

變量arg1用var命令聲明，會發生變量提高，即腳本開始運行時，變量arg1已經存在了，可是沒有值，因此會輸出undefined。變量arg2用let命令聲明，不會發生變量提高。這表示在聲明它以前，變量arg2是不存在的，這時若是用到它，就會拋出一個錯誤。

var 重複申明變量的運行結果：

var arg1 = 'test'
        console.log('var第一次申明：' + arg1)
        var arg1 = 'test2'
        console.log('var第二次申明：' + arg1)

let 重複聲明變量代碼

let  arg2 = 'test'
console.log('let第一次申明：' + arg2)
let  arg2 = 'test2'
console.log('let第二次申明：' + arg2)

let在同一塊做用域內不能重複聲明變量，var 能夠重複聲明

const

const與let上面特色同樣，可是也有不一樣點，let聲明的是變量，const聲明的是常量，只讀，修改值會報錯，const保存的是內存地址,能夠給對象或數組添加屬性或元素，可是不能從新複寫。
想要了解更多，請掃描二維碼