重學ES6 let & const

legendaryedu發表於2019-04-09

如果沒有歷史包袱，現在做一些專案，不用考慮較低版本的瀏覽器，某軟，現在自己都已經放棄自己的瀏覽器了，推薦使用Edge瀏覽器~

那麼，在前端工程化的趨勢下，vue，react以及眾多其他框架的大潮中，ES6還是有它的用武之處的！

先從let const 熱下身吧~

let

所有宣告的變數，只在let命令所在的程式碼塊內有效。

for迴圈計數器就很適合使用let，如果用 var 來宣告 for迴圈內的變數，有可能會導致外部某處的同名變數受到影響。

還有一個很經典的輸出問題

var a = []
for(var i = 0;i < 10; i++){
    console.log(i)
    a[i] = function() {
        console.log(i)
    }
}
a[5]() //10
a[8]() //10
複製程式碼

因為i都指向同一個全域性i，導致輸出的是最後一輪的i值，也就是 10

但是如果用 let ，那就完全不一樣了

var a = []
for(let i = 0;i < 10; i++){
    console.log(i)
    a[i] = function() {
        console.log(i)
    }
}
a[5]() //5
a[8]() //8
複製程式碼

因為，let宣告的變數只在本輪迴圈有效，每一次迴圈都是一個新的變數~而且，for 設定迴圈的部分是父作用域，迴圈體內是子作用域

看demo

for(let i = 0;i < 3; i++){
    let i = 'hahaha'
    console.log(i)
}
//hahaha
//hahaha
//hahaha
複製程式碼

木有變數提升

之前我們用ES5，var宣告一個變數，可能有時候會這樣寫

console.log( a ) // undefined,但是並不會報錯
var a = 8
複製程式碼

之所以可以這樣寫，是因為 var 存在 “變數提升”

相當於如下程式碼

var a 
console.log( a ) // 此時a還未被賦值
var a = 8
複製程式碼

但是let 沒有 變數提升

console.log( a ) // RenerenceError
let a = 8
複製程式碼

let const 暫時性死區

用let宣告的變數就被繫結在了宣告處的塊級作用域，只要在宣告之前呼叫，就會報錯。

不允許重複宣告

以下兩種都會報錯

let a = 10 
let a = 5
複製程式碼
var a = 10 
let a = 5
複製程式碼

const

const 宣告一個只讀的常量，一旦宣告，值就不能被改變了。

const宣告變數也不會提升，也存在暫時性死區。

本質

const 實際上，並不是變數的值不能改變，而是變數所指向的記憶體地址不能改變，因為，簡單資料型別，值就儲存在記憶體地址中，但是引用型別，變數只能保證指標是固定的，至於資料結構是不是可變，完全不能控制。也就是，你可以改變這個物件的屬性啊，巴拉巴拉的，但是，不能將這個物件換成別人~

相關文章