三分钟教你彻底分清JavaScript三大变量声明方式

前言

在刚学JS时，我们都会想，变量不就是存文字、存数字，简单赋值就能用，为啥还要分var、let、const三种？

但其实只要看懂它们能不能重复声明、赋值规则的差异，利用作用域，三者的差别就会清晰显现出来。

本篇文章将以开宝箱的形式讲解，抛开难懂的专业术语，带你轻松分清var、let、const的区别，零基础也能看懂。

我们把可以把变量比作用来存放数据的宝箱，代码里的代码块就相当于一间独立房间。

一、var：公共宝箱

在这里，var 对应的是摆在大厅的公共宝箱，没有房门隔断，在整个页面随便取用。

代码演示

// var 允许只声明不赋值，不会报错，默认值为undefined
var test;
console.log(test); // 打印输出：undefined

// var 允许重复定义同名变量，后声明的会直接覆盖前面的值
var name = '宝箱1';
console.log(name); // 打印输出：宝箱1
var name = '宝箱2'; // 重复声明同名变量，直接覆盖原有数据
console.log(name); // 打印输出：宝箱2

// var 声明的变量值可以随时修改
name = "新宝箱";
console.log(name); // 打印输出：新宝箱

• 只用 var 打造公共宝箱，没有放入任何物品，代码不会报错。
• 箱子是空的，控制台打印出 undefined。
• 用 var 打造一个名叫 name 的宝箱，箱子里存放内容 “宝箱 1”。
• 查看这个木箱里存放的东西，控制台打印出：宝箱1。
• 再次用 var 打造同名的宝箱，大厅里不限制同名箱子，新箱子会直接替换掉之前的旧箱子，内部内容变成 “宝箱 2”。
• 再次查看宝箱内容，此时打印结果会变成：宝箱2。
• 不用新建箱子，直接替换箱子内部存放的数据，var 完全允许。

var 限制最少，可以空箱子、可以重名箱子、可以随便换箱子里的内容，但容易误删旧数据。

写 JS 代码时，var 是最常用的声明变量关键字。

【1】可以只创建箱子、不往里面放东西，代码不会报错，查看箱子只会显示空值 undefined；

// 只声明var变量，不赋值
var box;
console.log(box); // 输出 undefined，代表空箱子

【2】可以做出两个一模一样名字的宝箱，新箱子会直接盖住旧箱子；

var box = "旧宝箱";
console.log(box); // 输出：旧宝箱
var box = "新宝箱"; // 同名宝箱，会直接覆盖旧的
console.log(box); // 输出：新宝箱

【3】宝箱里面存放的物品，能够随意更换；

var box = "旧宝箱";
box = "新宝箱"; //定义新变量名，直接覆盖旧宝箱
console.log(box); // 输出：新宝箱

var是公用宝箱，没有房间限制，哪怕你把宝箱放到房间，走出房间后，外面照样能摸到宝箱里的东西，很容易把数据搞混弄坏。

二、let：专属宝箱

对应上面var公共宝箱，let对应的是房间里的专属宝箱，有房门隔开，走出房间就拿不到箱子里的东西

与 var 不同，let 声明的变量是“专属宝箱”，它遵循块级作用域规则，并且不允许重复声明，但允许重新赋值。

代码演示

// let只声明不赋值，默认undefined（这点和var一样）
let test;
console.log(test); // undefined

// let 不允许重复声明同名变量，会直接报错
let name = '宝箱1';
console.log(name); // 宝箱1
// 下面这行取消注释就会报错：SyntaxError: Identifier 'name' has already been declared
// let name = '宝箱2'; 

// let 声明后，值可以修改（和var一样，可重新赋值）
name = "新宝箱";
console.log(name); // 新宝箱

• let 声明变量被限制在它所在的代码块内，就像宝箱被锁在房间里，出了房间就找不到它了。
• 在同一个作用域内，不能用 let 再次声明同名的变量，这避免了因不小心重复声明而覆盖数据的风险。
• 但是let 声明的变量值是可以改变的，你可以随时替换宝箱里的物品。
• 相比之下，var 没有块级作用域限制，且允许重复声明，这正是它容易导致变量污染和意外覆盖的原因。

let 比 var 规则更严，有块级作用域、不能重复定义变量，写代码不容易出错，现在写JS优先用let。

写 JS 代码时，let 是 ES6 新增的变量声明关键字，用来弥补 var 的缺陷。

【1】可以只创建箱子、不往里面放东西，代码不会报错，查看箱子只会显示空值 undefined;

// 只声明let变量，不赋值
let box;
console.log(box); // 输出 undefined，代表空宝箱

【2】不允许创建两个一模一样名字的宝箱，重复声明会直接报错，不会覆盖旧箱子;

let box = "旧宝箱";
console.log(box); // 输出：旧宝箱
// 下面这行取消注释运行会直接报错：标识box已被声明
// let box = "新宝箱";

【3】宝箱里面存放的物品，能够随意更换

let box = "旧宝箱";
console.log(box); // 输出：旧宝箱
box = "新宝箱"; // 直接修改箱子里的值，允许重新赋值
console.log(box); // 输出：新宝箱

let是专属宝箱，只在当前房间内生效，出房间就无法使用；不能创建同名箱子，但箱内物品可以随时更换。

三、const：上锁宝箱

如果说 let 是专属宝箱，那么 const 就是上了锁的专属宝箱，箱子一旦放好物品，就不能再更换，但箱子本身仍然只在当前房间内有效。

const 声明的变量是“常量”，它同样遵循块级作用域规则，但比 let 更严格：不允许重复声明，也不允许重新赋值。一旦初始化，值就不能改变。

代码演示

// const 必须声明时就赋值，不能只空着声明，会报错
// const test;
const test = "旧宝箱";
console.log(test); // 旧宝箱

// const 不允许重复声明同名变量，直接报错
const name = '宝箱1';
console.log(name); // 宝箱1
// 下面取消注释运行就报错
// const name = '宝箱2';

// const 不能重新赋值，箱子里的东西不能整体换掉
// name = "新宝箱"; // 取消注释直接报错

• const 声明的变量必须在创建时就放入物品，不能创建空箱子。
• 和 let 一样，const 箱子也是专属的，只在当前房间内有效。
• const 箱子一旦上锁，里面的物品就不能再更换。
• 但如果箱子里面装的是“可调整的储物格”，虽然箱子本身不能换，但储物格里的物品可以调整。

const规矩最多，创建箱子就得放东西，不能重名，箱子不能整个换掉，用来存不会变的东西刚刚好。

写 JS 代码时，const 和 let 一样是 ES6 新增的关键字，规则比 let 更严格。

【1】不能只创建空箱子，必须一创建就放东西，只声明不赋值直接报错；

// const box;  // 只声明不赋值，运行直接报错
const box = "装满宝物的宝箱";
console.log(box); // 输出：装满宝物的宝箱

【2】不允许创建两个一模一样名字的宝箱，重复声明会直接报错，不会覆盖旧箱子；

const box = "旧宝箱";
console.log(box); // 输出：旧宝箱
// const box = "新宝箱"; // 取消注释运行直接报错：标识符box已被声明

【3】箱子里的东西不能整体换掉，不能重新赋值；

const box = "旧宝箱";
// box = "新宝箱"; // 取消注释直接报错，不能整箱更换内容

const是上锁宝箱，只在当前房间生效，刚造出来箱子就得马上放东西，不能空箱子，同一个房间里不能有一模一样名字的箱子，整个箱子本身不能直接换掉，只适合存放从头到尾都不会变动的数据。

总结

var是公共宝箱，规矩最少，空箱子、重名箱子全都允许，里面东西想换就换。但它没有房间限制，在哪都能拿到，一不小心就把旧数据覆盖掉，代码很容易乱套。

let是专属宝箱，只在这间房能用，不能做同款名字箱子，箱子里的东西随便换。

const是上锁宝箱，和let一样只待在自己房间，不能重名、不能空箱子，整个箱子不能换掉，只有里面装的袋子能添东西。

写代码优先用const，其次用let，尽量别用var，能少出很多奇怪错误。

var / let / const 核心区别速记

var

1. 允许重复声明、可重新赋值
2. 只声明不赋值 = undefined
3. 存在变量提升，全局变量挂载 window

let

1. 禁止重复声明，可重新赋值
2. 只声明不赋值 = undefined
3. 暂时性死区，声明前使用报错

const

1. 禁止重复声明，不可重新赋值
2. 声明时必须赋值，不能只声明
3. 引用类型（对象 / 数组）内部属性可修改

到此这篇关于JavaScript三大变量声明方式的文章就介绍到这了,更多相关JS变量声明方式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论