关于JavaScript中let关键字的理解

1、let的介绍

首先，初识let是在MDN上面，介绍了let的基本用法，根据它的介绍，我知道了以下几点：

• let声明的变量作用域是块级的
• let变量不能重复声明
• let存在暂时性死区（变量未初始化之前，不能使用）

一开始我是这么理解的，我相信也是大多数人理解的那样。

2、经典面试题

let liList = document.querySelectorAll('li') // 6个li
for(var i=0; i<liList.length; i++){
    liList[i].onclick = function(){
        console.log(i)
    }
}

上面这段代码会输出什么呢？答案是6个6，我想这一点大家应该知道，因为var关键字会使变量提升，所以其实只有一个全局i，当你去执行click事件的时候，这时候i已经变成6了。

那么把var改成let之后呢，

let liList = document.querySelectorAll('li') //6个li
for(let i=0; i<liList.length; i++){
    liList[i].onclick = function(){
        console.log(i)
    }
}

这段代码执行效果，依次点击会输出0,1,2,3,4,5。

其实这里有两个点：1、每次进入循环体，都会在循环体中重新声明一个i并初始化一次，2、for后面的括号里有一个作用域，

所以其实一共存在7个i，六次循环，然后一个for后面的作用域。

相当于这样子：

let liList = document.querySelectorAll('li') //6个li
for(let i=0; i<liList.length; i++){
    let i = i(这里的i是for后面括号中的)
    liList[i].onclick = function(){
        console.log(i)
    }
}

所以当let和for一起用的时候，如果搞不清i是哪里的，那么自己声明一个重新初始化。

3、let和var、function的比较

众所周知，var 和 function 都是存在提升的，也就是说下面的代码不会报错：

console.log(i) // undefined
var i = 2

fn()

function fn() {
    console.log('hello')
}

那么假如把var变成let呢？会报错，

console.log(i) // Uncaught ReferenceError: i is not defined
let i = 2

现在就来看下它们三者的区别，

首先JS变量的三个过程【创建、初始化、赋值】

3.1、var声明的过程

function fn() {
    var x = 1
}
fn()

1. 当进入fn后，会为fn创建一个环境
2. 找到所有用var声明的变量，然后创建它们
3. 将它们初始化为undefined
4. 执行代码
5. x = 1将x变量赋值为1

也就是说，var声明会在代码执行前就创建变量，并初始化为undefined。

3.2、let声明的过程

function fn() {
    let x = 1
    x = 2
}
fn()

1. 当进入fn后，会为fn创建一个环境
2. 找到所有用let声明的变量，然后创建它们
3. 执行代码（未初始化）
4. 执行x = 1，将x初始化为1
5. 执行x = 2，将x赋值为2

也就是说，let声明会在代码执行前就创建变量，但不会初始化，所以初始化之前不能使用，存在暂时死区。

3.3、function声明的过程

fn()
function fn() {
    console.log('hello')
}

1. 找到所有用function声明的变量，然后创建它们
2. 将变量初始化并赋值为function { console.log('hello') }
3. 开始执行fn

也就是说，function声明会在代码执行前就创建，初始化并赋值。

3.4、总结

1. var的创建和初始化都被提升了；
2. let的创建过程被提升了，但是初始化没有提升；
3. function的创建、初始化和赋值都被提升了；
4. 顺便说一下const，创建和初始化过程和let一样，只是没有赋值过程。

4、总结

以上就是我对let的理解。