谈一谈let和var区别

起初对两者声明变量的关键字认识并不深，只知道var是ES3引入的关键字，而let是ES6引入的关键字。那么let的出现就是为了解决var带来的问题并且提升代码质量，规范代码。作为一个前端新人，这条修行之路任重而道远，如果有描述欠妥的地方欢迎指正共同进步~

目录

特点

总结

---

特点

（我在这里通过对比讨论二者的特点）

1. var存在变量提升（仅作用于声明，不进行赋值）和函数作用域，通俗一点来说就是无论你在什么位置使用var定义了一个变量，都会被提升到最近的函数(在函数内部声明)的顶部进行预编译(声明)（如果没在函数内定义，则在全局顶部声明），也就是说只有函数能限制该变量的使用范围

想了解预编译可以看看这个博主的文章：https://juejin.cn/post/7372400694765502505

console.log(a);
var a = 0;

会输出以下结果，预编译只会声明变量，告诉编译器存在一个a的变量，并不会给a赋值，故不会报错，正常输出undefined；

let就不存在变量提升，也就是说你不能在声明变量之前访问使用；

console.log(a);
let a = 0;

 

2. var可以重复声明同一个变量，可以自己在编译器上实践，控制台并不会报错，实际上，JavaScript只会处理第一个声明，重复声明的作用也只是对同一个变量重新赋新值和初始化；

let不允许重复声明同一个变量，自己实操一下就知道了，JavaScript引擎会报错，像这样

有这个知识作基础，我们再进一步讨论二者作用域的区别：

3. var具有函数作用域没有块级作用域的概念，这就容易造成变量污染，举个🌰

for (var i = 0; i < 5; i++) {
    setTimeout(() => {
        console.log(i);
    }, 500)
}

 (这里的灰标5表示打印了5次 5这个值)

 

输出的结果全是5，这是因为for循环执行完成之后再执行定时器，而因为var的函数作用域的关系，i变量提升至全局顶部，循环结束后i的值为5，i变量只声明了一次，后续的var都是在重新赋值，再执行定时器时捕获到的i值(5)就全是同一个了;

（此知识点涉及浏览器的事件循环机制，这是重要的干货，可以移步https://juejin.cn/post/7373507761126391859?searchId=20240725164848B3CCC36FAB8444E785EB，这个博主解释的挺全面详细的，如果大家看到好的文章麻烦分享在评论区，家人们一起进步！  (> v <）)

块级作用域：即变量在定义它们的块（通常是 {} 内部）中有效，并且在块之外是不可访问的。

 

let具有块级作用域的特点就很好的解决了这种问题，展示：

for (let i = 0; i < 5; i++) {
    setTimeout(() => {
        console.log(i);
     }, 500)
}

可以看到正确地打印了每个i的值，每一次循环迭代时都会重新声明i并赋值，并且每个i的作用域在当前迭代中(for循环的{}内)，这样每个setTimeout都能捕获当前循环中的i值；

当前循环结束就会自动回收当前的i，不会影响在下一次循环重新声明i；

总结

var:

• 变量提升
• 可以重复声明
• 函数作用域

let:

• 不具备变量提升  (也就是说你不能在未声明变量之前访问使用该变量)
• 不可以重复声明
• 块级作用域  (解决var变量污染弊端)

在面试中回答到这几点就差不多OK了；在学习知识的途中，多看多实操才能把别人的东西变为自己的。

参考文章：

https://juejin.cn/post/7343162622177476608?searchId=2024072510111862F591CCA4521DB2E23A