今天學習了ES6新增語法中的let與const命令的基本用法和一些特性,這篇部落格用以對這兩個命令的用法的一些總結。
在寫let與const之前,首先要明白JS中的塊級作用域。
一、JS中的塊級作用域
ES6之前JS不支援塊級作用域
在ES6之前,JS是沒有塊級作用域這個概念的,只有全域性作用域和函式內的區域性作用域,比如在下面的程式碼中,for迴圈內定義的變數 i 實際上處於全域性作用域中,所以在迴圈的外部是可以呼叫變數 i 的,這個 i 就有可能造成變數的汙染
for(var i = 0; i < 5; i++){
}
console。log(i) // 5
出現
ES6的擴充套件為JS帶來了新的變數宣告方法,其中的let從實際上為JS新增了塊級作用域的功能,使用該命令宣告的變數只能在let命令所在的程式碼塊中使用。
二、let命令
與var命令的對比,以及let的一些特性
1。let宣告的變數只能在let命令所在程式碼區塊中生效
// var
for(var i = 0; i < 5; i++){
}
console。log(i) // 5
// let
for(let i = 0; i < 5; i++){ // 這個i只能在這個for迴圈內使用
}
console。log(i) // 報錯:i is not defined
2。let不存在變數提升
console。log(a) // undefined
console。log(b) // 報錯:b未定義
var a = 1
let b = 1
3。因為let不存在變數提升,所以會有暫時性死區
什麼是暫時性死區?
暫時性死區就是在這個區塊中的變數未宣告之前,對該區塊中的變數的一切呼叫都會報錯
a = 1
let a = 2
// 以上程式碼會報錯
a = 1
{let a = 2}
// 以上程式碼不會報錯,因為宣告變數的區塊不一
4。let宣告的變數不能重複進行宣告
let a = 1
var a = 1 // 報錯 a已經被宣告
const a = 1 // 報錯 a已經被宣告
let的使用例項
因為let命令的出現,所以JS有了塊級作用域,原本因為作用域問題導致的閉包問題也可以使用let嗎,清零進行解決,比如以下經典閉包程式碼會一次性輸出5個5,但需求是輸出01234
for(var i = 0; i < 5; i++){
setTimeout(function(){
console。log(i)
}, 1000)
}
1。ES6之前的解決辦法,使用一個變數對 i 的值進行暫存
for(var i = 0; i < 5; i++){
(function(e){
setTimeout(function(){
console。log(e)
}, 1000)
})(i)
}
2。出現let後的解決辦法
for(let i = 0; i < 5; i++){
setTimeout(function(){
console。log(i)
}, 1000)
}
關於for迴圈作用域的問題
在for迴圈中實際上是有兩個作用域的,條件設定的圓括號()內是一個父作用域,而程式碼塊大括號{}中是一個子作用域,比如下面程式碼可以進行區分
for(let i = 0; i < 5; i++){
let i = 8
console。log(i)
}
// 輸出結果是5個8
三、const命令
與let命令的用法類似,const命令也是用來宣告一個變數,同時也只能在宣告的塊級作用域中進行使用,但不同的是const宣告變數後,這個變數就變成了一個不能進行更改的常量。
const命令的特性
1。宣告的時候就必須馬上初始化,否則報錯
如下程式碼:
const a; // 報錯 未初始化
const a = 1 // 不報錯
2。宣告的值不能改變,不能重新進行賦值
const a = 1
a = 2 // 報錯 a已經被宣告過
3。與let一樣不存在變數提升
console。log(a) // 報錯 a未宣告
const a = 1
4。與let一樣不可重複進行宣告
const a = 1
var a = 1 // 報錯 a已經被宣告
let a = 1 // 報錯 a已經被宣告
注意點
1。const宣告的變數的值不能改變實質上是變數指向的記憶體地址不能改變,因此會有以下兩種情況
值為簡單型別:
值儲存在變數指向的記憶體地址上。
值為複雜型別:
例如物件:值也儲存在變數指向的記憶體地址上,但是不同的是,這個記憶體地址實際上是一個指標,指向這個物件,那麼在實際上是可以對這個物件內的屬性進行賦值的,如下程式碼:
const a = {b:1}
console。log(a。b) // 1
a。b = 2
console。log(a。b) // 2
2。針對上面的問題,如果想讓物件的屬性和值絕對不變,可以使用Object。freeze方法
const a =Object。freeze({b:1})
console。log(a。b) // 1
a。b = 2
console。log(a。b) // 1