彻底了解varletconst变量的区别
Posted Jet_closer_burning
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了彻底了解varletconst变量的区别相关的知识，希望对你有一定的参考价值。
文章目录
一、var
1.声明作用域
使用var定义的变量会成为包含它的函数的局部变量
function foo()
var msg = 'helloword' //局部变量
foo()
console.log(msg) //报错未定义 test is not defined
这里，msg变量是在函数内部使用var定义的。调用函数foo会创建这个变量并给它赋值。调用之后变量msg就被销毁了，所以最后打印会报错。
如果需要定义多个变量，可以在一条语句中用逗号分隔每个变量。
var name = 'uzi',
age = '22',
team = 'rng'
console.log(name, age, team);
结果
在严格模式下，不能定义eval和arguments的变量，否则会导致语法报错。
2.声明提升
先看代码
function foo()
console.log(name) //undefined
var name = 'Jay'
foo()
为什么是undefined而不是报错。因为ES运行时把它看成下面的等价代码
function foo()
var name
console.log(name) //undefined
name = 'Jay'
foo()
这就是所谓的变量提升，使用var关键字声明的变量会自动提升到函数作用域顶部。
此外一次性反复多次使用var声明同一个变量也是可以的。
function foo()
var name = 'Jay'
var name = 'Eason'
var name = 'Beyond'
console.log(name) //Beyond
foo()
二、let
1.声明作用域
let和var差不多的，但是有着非常重要的区别是 let是块级作用域，而var的范围是函数作用域
if (1 == true)
var goods = 'chatgpt-3'
let newGoods = 'chatgpt-4'
console.log(goods); //chatgpt-3
console.log(newGoods); //chatgpt-4
console.log(goods); //chatgpt-3
console.log(newGoods); //报错未定义 newGoods is not defined
在这里newGoods变量之所以不能在if外部引用，因为它的作用域仅限于该块内部。
2.重复声明
let不允许同一个块级作用域中出现相同的冗余声明，会导致报错
Uncaught SyntaxError: Identifier ‘name’ has already been declared
表示name已经声明过了。
但是在嵌套使用的相同标识符不会报错，因为在同一个块中没没有重复声明
let name = 'Macey'
console.log(name); //Macey
function foo()
name = 'Ronaldo'
console.log(name); //Ronaldo
foo()
3.变量提升
let和var的另一个重要区别，就是let声明的变量不会在作用域中被提升
console.log(name); //undefined
var name = 'Macey'
console.log(age); //未定义 Uncaught ReferenceError: Cannot access 'age' before initialization
let age = '35'
在let声明之前执行瞬间被称为"暂时性死区"，在此阶段引用后面才声明的变量会报错！
4.全局声明
与var不同，使用let在全局作用域中声明的变量不会成为window对象的属性（var声明的则会）
var name = 'Macey'
console.log(window.name); //Macey
let age = '35'
console.log(window.age); //undefined
不过，let的声明任然是在全局中发生的，相应变量会在页面的生命周期中存续，为了避免重复定义的错误，最好还是不要重复声明同一个变量。
5.for循环中声明
使用var在for循环中定义的迭代变量会渗透到循环体外部
for (var i = 0; i < 5; i++)
//逻辑
console.log(i);
for (let j = 0; j < 5; j++)
//逻辑
console.log(j);
打印结果
因为let迭代的变量仅限于块级作用域for的内部
再看一个著名的例子
for (var i = 0; i < 5; i++)
setTimeout(() => console.log('i======', i))
for (let j = 0; j < 5; j++)
setTimeout(() => console.log('j======', j))
打印结果
之所以会这样，是因为在退出循环的时候var保存的值是：5。在后面执行setTimeout时，所有的i都是同一个变量，所以输出都是同一个值。
而使用let迭代声明时，JS会为每一个迭代循环声明一个新的迭代变量。每个setTimeout引用的都是不同的变量实例。
这种每次迭代声明一个独立变量实例的行为适用于所有风格的for循环，包括for-in和for-of循环。
三、const
const 的行为与let基本相同，唯一一个重要的区别是它声明变量时必须同时赋值，一旦声明了简单的数据类型（数值、字符串、布尔值），就不能修改否则会报错。
const name
//一旦声明了就必须赋值 Missing initializer in const declaration
const age = '22'
age = '23' //不能赋值 Assignment to constant variable
const color = 'red'
const color = 'blue' //不能重复声明 Identifier 'color' has already been declared
const name = 'Macey'
console.log(name); //Macey
function foo()
const name = 'Ronaldo'
console.log(name); //Ronaldo 声明的作用域也是块级
foo()
const 声明的限制只适用于它指向的变量的引用。如果const引用的是一个对象或者数组，那么修改的内部属性是可以的。
const person =
name: 'Jay'
person.name = 'Eason'
console.log(person.name); //Eason
如果真的想将对象冻结，应该使用Object.freeze方法。
const person = Object.freeze(
name: 'Jay'
)
// 常规模式时，下面一行不起作用；
// 严格模式时，该行会报错
person.name = 'Eason'
console.log(person.name); // Jay
结尾：
声明风格 ：有了let 和const 不再使用var，因为变量有了明确的作用域、声明为准、以及不变的值。
const使用的优先级应该高于let：使用const 声明可以让浏览器运行时强制保持变量不变，也可以让静态代码分析工具提前发现不合法的赋值操作。只在提前知道未来某个变量会有修改时，再使用let。这样可以推断某些变量的值永远不变，同时也能迅速发现因意外赋值导致的非预期行为。
参考：javascript高级程序设计(第四版)
varletconst之间的区别
目录
变量
ECMAScript变量是松散类型的，也就是说变量可以用于保存任何类型的数据，每个变量只不过是一个用于保存任意值的命名占位符。
有三个关键字可以声明变量：var let const，var在ECMAScript的所有版本中都可以使用，let和const只能在ECMAScript6及更晚的版本中使用。
var
var message;
这段代码声明了一个名为message的变量，可以用来保存任何类型的值。不初始化的情况下，会保存一个特殊值undefined。
var message = '遥岑'
message = 10 //合法 但不建议
message只是被定义为一个保存了字符串值的变量，初始化变量不会将它标记为字符串类型，只是一个简单的赋值而已。后面可以改变保存的值，也可以改变值的类型，但不推荐这么做。
var message = 10
message = 20
message = 73
console.log(message) //73
反复多次使用var声明同一个变量也是可以的。
var message = '遥岑',
num = 5,
text = false;
因为ECMAScript是松散类型的，所以使用不同数据类型初始化变量可以用一条语句声明，换行和缩进不是必须的，但这样有利于理解。
在严格模式下，不能定义名为eval和arguments的变量，否则会导致语法错误。
var声明作用域
ES6之前只有全局作用域和函数作用域，var既可以作为全局作用域，也可以作为函数作用域。
//全局作用域
var message = '遥岑'
function test()
//函数作用域
var message = '阿翡'
console.log(message) //阿翡
test()
console.log(message) //遥岑
使用var在函数内部定义一个变量，就意味着该变量将在函数退出时被销毁。
如果在函数内定义变量忽略var，可以创建一个全局变量；但不推荐这么做，在局部作用域内定义的全局变量很难维护，也会造成困扰，并不能直接断定var是不是有意为之。在严格模式下，如果这样给未声明的变量赋值，会抛出错误。
变量提升
console.log(message) //undefined
var message = '遥岑'
//相当于
var message
console.log(message)
message = '遥岑
使用这个关键字声明的变量会自动提升到顶部。
let
let和var的作用差不多，但有着很重要的区别，let声明的范围是块作用域。
if(true)
var message = '遥岑'
console.log(message) //遥岑
console.log(message) //遥岑
if(true)
let name = 'yc'
console.log(name) //yc
console.log(name) //报错
name变量的作用域仅限于块内，所以在外部无法引用。
let name
let name //报错
let不允许在同一个块作用域中出现冗余声明。
js引擎会记录用于变量声明的标识符及其所在的块作用域，因此嵌套相同的标识符不会报错，这是因为在同一块中没有重复声明。
var name
let name //报错
这两个关键字声明的不是不同类型的变量，它们只是指出变量在相关作用域内如何存在。
暂时性死区
let声明不会在作用域中被提升。
console.log(name) //报错
let name = 'yc'
在let声明之前不能以任何方式来引用未声明的变量。在let声明之前的执行瞬间被称为暂时性死区，在此阶段引用任何后面才声明的变量都会抛出错误。
块级作用域
let name = 'yc'
console.log(window.name) //undefined
let即使在全局作用域中声明也不会挂载在window对象下，不过let声明仍然是在全局作用域中发生的，相应变量会在页面的生命周期内存续。
for循环中的let声明
在let出现之前，for循环定义的迭代变量会渗透到循环体外部。
for(var i=0;i<5;i++)
setTimeout(()=>console.log(i),0)
//5 5 5 5 5
for(let i=0;i<5;i++)
setTimeout(()=>console.log(i),0)
//0 1 2 3 4
在退出循环时，迭代变量保存的是导致循环退出的值5，在之后执行超时逻辑时，所有的i都是同一个变量，输出的都是同一个最终值。
而使用let声明迭代变量时，js引擎会在后台为每个迭代循环声明一个新的迭代变量，每个setTimeout引用的都是不同的变量实例。这种每次迭代声明一个独立变量实例的行为适用于所有风格的for循环，包括for in和for of。
const
const的行为和let基本一致，区别在于它声明变量时必须同时初始化变量，修改声明的变量会报错。
const num = 7
num = 8 //报错
const num = 7
const num = 9 //不能重复声明
const也属于块级作用域，不能重复声明赋值，存在暂时性死区。
const num =
name:'yc',
age:24
num.age = 18
console.log(num)
const声明限制只适用于它指向的变量的引用，如果引用的是一个对象，那么修改这个对象的属性是可以的。
for(const i=0;i<5;i++) //报错
for(const key in a:1,n:9)
console.log(key) //a n
const不能用来声明迭代变量，但是可以声明不会被修改的for循环变量，也就是每次迭代只是创建一个新变量。
区别
- var：全局作用域下挂载在顶层对象window下；未声明变量会被隐式创建为全局变量；可以多次声明赋值；变量提升
- let：块级作用域，即使在全局下也在块级作用域中；同一块中不能重复声明，可以重复赋值；变量在被声明前不能被访问，存在暂时性死区
- const：块级作用域；不能重复声明和赋值；存在暂时性死区；只读常量，必须初始化，变量指向内存地址不变
总结
var未声明直接赋值的变量都会自动挂在顶层对象下，会造成全局环境变量混乱。var可以多次声明同一个变量不会报错，也会造成代码不容易维护。而ES6新增的let和const客观上为这门语言更精确的声明作用域和语义提供了更好的支持，使用let和const有助于提升代码质量。
以上是关于彻底了解varletconst变量的区别的主要内容，如果未能解决你的问题，请参考以下文章