技術標籤：前端

2 新變數申明：let 和 const

2.1 概述

2.2 let 和 const

// ES3 語法
a = 1 
var a = 1
// ES6 語法
let a = 1
const a = 1

a = 1屬於哪個物件，取決於執行環境（上下文）。

只想暴露一個全域性變數，塊（{}），C、Java 和 PHP 中都有，但是 JavaScript ES6 之前沒有。

// ES6 之前
(function (){
    var a = 1
    window.JonathanBen = function(){
        console.log(a)
    }
}
 
())
JonathanBen() // 1
console.log(a) // Uncaught ReferenceError: a is not defined

// ES6 之後
{
    let a = 1
    window.JonathanBen = function(){
        console.log(a)
    }
}
JonathanBen() // 1
console.log(a) // Uncaught ReferenceError: a is not defined

臨時死區：直接使用還沒定義的變數，下圖藍色部分就是臨時死區。

let 和 const 總結：
let部分：

const部分：
1 2 3 同上
4 在定義時並賦值只有一次（只有一次賦值機會）。

2.3 相關面試題

程式碼執行時機（守株待兔還是刻舟求劍）

var i 
for(i=0; i<6; i++){
    function fn(){
        console.log(i)
    }
    xxx // 會執行 fn 函式
}
console.log(i) // 6

常見的執行形式xxx = fn()（守株待兔）

var i 
for(i=0; i<
 
6; i++){
    function fn(){
        console.log(i) // 列印：0, 1, 2, 3, 4, 5 
    }
    fn() // 會執行 fn 函式
}
console.log(i) // 6

通過點選事件觸發，示例程式碼。（刻舟求劍）
點選事件觸發時，for 迴圈已經結束，導致 i = 6，然後觸發一次點選事件，列印一次6。

var i 
for(i=0; i<6; i++){
    function fn(){
        console.log(i) // 列印：6
    }
    btn.onclick = fn // 通過點選觸發 fn 函式
}
console.log(i) // 6

面試題：
快速生成 6 個導航ul>li{導航$}*6

點選每一個都列印 6。程式碼

現在需要點選哪個導航就需要列印該導航的編號。

ES6 之前語法（立即執行函式）程式碼

ES6 之後語法（let 解決）程式碼

ES6 之後語法中關於 let 詳解：

for (let i = 0; i < liTags.length; i++) {
    liTags[i].onclick = function () {
      console.log(i)
    }
}

// 等價於

for (let i = 0; i < liTags.length; i++) {
	let i = i // i0, i1, i2, i3, i4, i5
    liTags[i].onclick = function () {
      console.log(i)
    }
}

上面程式碼等價於後部分，是前部分的相信分解：
首先明確for()中的let i和for(){}中的let i是沒有任何關係的。

for()中的let i的作用域就只是括號裡面部分（紫色選中部分）。

所以這裡JavaScript內部隱式的使用了let i = i，來將()中的i的值，賦值到{}中的的i。

上圖中出現了 7 次i，for()中 1 次，和for(){}中 6 次。

疑問：既然說for()中的let的作用域只是在上圖紫色選中部分，那麼怎麼傳值到for(){}中呢？神奇的魔法