ES6新特性 Let Const Var的区别

发布时间：2025-09-21 11:39:18 阅读量： 0 来源： 互联网转载

ES6以后，写JS的时候推荐尽量不使用Var来定义变量，而是使用Let来代替，这是因为var有比较多的缺点。我们使用代码来演示一下var的缺陷，然后慢慢引入 Let Const Var它们之间的区别。

1：var可以重复的定义变量名称而let不会

var a=1var a=2var a=3

上面的代码是没有任何错误的，所以var关键字可以重复的定义同一个变量名称。这样肯定是不好的。万一咱们一下没注意，因为取名习惯把一些变量给覆盖了那肯定会出问题不是，所以这个是var的缺点之一。那如果用let 就不存在这样的问题如下

let a=1let a=2

上面的代码如果是使用node.js都不能编译通过。

2：var会造成变量提升

这个是什么意思呢？请看下面的代码

var tmp=5;if (tmp===5){  var a=1}else{  var a=2}

上面我们在if里定义的变量同样是没问题的。但这样其实是不符合规范的。首先我们不管学习任何语言都要有一个作用域的概念。如以下代码

<ｓｃｒｉｐｔ>var a=1var b =(function() {  var a=2  console.log(a,"函数内")})()console.log(a,"函数外")</ｓｃｒｉｐｔ>

上述2个变量名a它们的作用域不同，ｓｃｒｉｐｔ->a 可以在ｓｃｒｉｐｔ的所有下级生效。而function->a 只能在函数内和函数的下级有效，实际它们是不同的2个变量，function->a在自身的作用域里会覆盖掉ｓｃｒｉｐｔ->a。所以在示例1里的if语句它也是有作用域的，我们在if语句的作用域里通过var 定义了变量if->a，然后在ｓｃｒｉｐｔ的作用域里确有可以正常读取到if->a这就属于一种变量提升的行为，这样的缺点就是有的时候我们定义的局部变量会变成全局变量，这种情况出现多了是不是就会造成混乱？

那么用let 就完美的避免了这种问题，示例代码如下

let tmp=1if (tmp===1){  let a=1;} else{  let a=2;}console.log(a)

打印后报错：Uncaught ReferenceError: a is not defined

如果上述代码要正常运行就需要再ｓｃｒｉｐｔ的作用域下提前定义变量a

let tmp=1let aif (tmp===1){   a=1;} else{   a=2;}console.log(a)

用了let是不是感觉从逻辑上都比var要合理？

3：var会提前装载

var a = 1;function tmp(){  console.log(a,"函数外");  var a = 2;  console.log(a,"函数内");}tmp();

上述会正常打印 “undefined '函数外' ”“2 '函数内'”。如果我们使用let的定义2个变量a的话会直接报错：Cannot access 'a' before initialization，所以可以看出来var还有会被提前装载的问题。

通过以上对比我们应该就清楚了var 和let 之间的不同了把！所以如果不考虑兼容性问题的话就不要使用var来定义变量了。

4：var会挂载到window对象

var a=1console.log(window.a)//打印值为1let b=1console.log(window.b)//打印值为undefined

const关键字的区别

const关键字是用来定义常量的，它的特性跟let基本一样。上面var和let的比较，你可以脑补一下把let换成const也是一样的。只是let是定义变量，const是定义常量。但const还是有一些不同的。

const定义的常量不可被整体的修改

const a = 1;a=2;console.log(a)

打印后会报错Assignment to constant variable.

上面为什么说不可以被整体修改下面我们示例

const a = {id:1};a={id:2}//报错："尝试分配给常量或只读变量 "

但是我们这样做确是可以的修改const的数据

const a = {id:1};a.id=2console.log(a)

看，一切正常,如果const是对象(object)类型数据，我们可以修改它的键值对从而达到修改const的值的目的。

const存在浅拷贝问题

关于浅拷贝或则深拷贝的问题，推荐阅读一下本站《JavaScript深拷贝和浅拷贝》，这里我们只给出程序的示例如下

const a = {id:1};let b=ab.id=2console.log(a,b)//id都为2b={id:2} //如果把b.id=2这行删除，b整体赋值那么就不影响a的值

最终2个变量a,b的id的值都为2。除非b整体赋值。那么它们才会不相互影响。

这里有个编写vue的小技巧，在编写vue程序的时候，我就通过js的浅拷贝特性，可以直接修改Props的数据。而达到修改父组件的值，当然vue官方是不推荐这么做的。

最后如果需要前后端制作的便宜，如果感觉小弟还行的话可以联系小弟的qq24722,谢谢了！

ES6新特性合集 ES6新特性 Let Const Var的区别 ES6新特性解构赋值 ES6异步编程Promise对象全解析 ES6异步编程从Generator到Async/Await ES6新特性模块化Modules ES6新特性模板字符串Template String ES6新特性 Map的使用方法 ES6新特性之箭头函数 ES6新特性 map() filter() find()使用方法总结

上一篇: 如何构建强大的百度云外链网络，提升网站权重与排名

下一篇: 上海税收筹划平台财税政策

ES6新特性 Let Const Var的区别

热门文章