文章目录
一、概述
在JavaScript中，let、const 和 var 是用于声明变量的三种关键字。
var关键字最初是在ECMAScript 1（1997年发布的ECMAScript标准）中引入的，用以支持基本的变量声明。但是由于var声明的变量存在内层变量可能覆盖外层变量的问题以及用来计数的循环变量泄露为全局变量； 为了解决var的各种问题，ES6（ECMAScript 2015）中引入了let、const 声明变量和常量。
二、var变量的问题与限制
var声明的变量可能会带来一些潜在问题，如变量提升和全局作用域污染等。
- 全局变量污染：使用var声明的全局变量可能会覆盖已有的全局变量，导致意外的行为。
- 函数作用域的提升：可能导致代码难以理解和维护，尤其是在复杂的函数中。
- 块级作用域的限制：在块级作用域（如if语句、for循环等）中使用var声明的变量会提升到其函数作用域的顶部，而非其块级作用域。
三、let、const和var的区别
3.1、作用域
- var：声明的变量作用域是全局作用域或函数作用域，不存在块级作用域，可以跨块访问，但不能跨函数访问。
- let 和 const：声明的变量作用域是块级作用域，仅在声明它们的代码块（如if语句、for循环、函数等）内有效。
3.2、变量提升（Hoisting）
- var：声明的变量会被提升到它们所在作用域的顶部，但初始化的值不会提升，因此在声明之前调用变量，其值为undefined。
- let 和 const：声明的变量也会被提升，但它们不会被初始化，在声明之前访问它们会导致暂时性死区（Temporal Dead Zone, TDZ）错误。
3.3、重复声明
- var：允许在同一作用域内重复声明变量，后声明的同名变量会覆盖之前声明的。
- let 和 const：不允许在同一作用域内重复声明变量，重复声明会报错。
3.4、可变性
- var：声明的变量可以被多次赋值。
- let：声明的变量可以被多次赋值，但不允许重新声明。
- const：声明的变量必须被初始化，并且不能被重新赋值。然而，如果const变量指向的是一个对象或数组，那么对象或数组的内容是可以被修改的。
3.5、 全局对象属性
- var：在全局作用域下声明的变量会成为全局对象的属性（在浏览器环境中通常是window对象）。
- let 和 const：声明的变量不会成为全局对象的属性，这有助于避免全局命名空间的污染。
3.6、初始值设置
- var 和 let：在声明时可以不用设置初始值。
- const：声明变量时必须设置初始值。
四、总结
| 特性 | var |
let |
const |
|---|---|---|---|
| 起源 | ES6之前 | ES6（ECMAScript 2015） | ES6（ECMAScript 2015） |
| 作用域 | 函数作用域 | 块作用域 | 块作用域 |
| 提升 | 是，值为 undefined | 是，暂时性死区 | 是，暂时性死区 |
| 重新赋值 | 允许 | 允许 | 不允许 |
| 重复声明 | 允许 | 不允许 | 不允许 |
| 全局变量 | 成为全局对象的属性 | 不会成为全局对象的属性 | 不会成为全局对象的属性 |
五、实践使用
1、使用 let 和 const：一般建议使用 let 和 const，避免使用 var。const 应该作为默认选择，除非需要在后续代码中重新赋值。
2、块作用域：利用 let 和 const 的块作用域来减少变量的生命周期，提高代码的可读性。
3、避免全局变量：尽量避免在全局作用域中使用 var，以减少潜在的命名冲突和污染。
4、使用 const 来声明常量：对于不会被重新赋值的变量，使用 const 来表明它的不可变性
因为let和const是es6的新特性，let和const的出现就是为了解决var的各种问题，强烈建议大家写js代码都用let和const声明变量和常量！
创作不易，欢迎打赏，你的鼓励将是我创作的最大动力。
