文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JavaScript中var与let的区别是什么

2023-06-22 00:04

关注

本篇文章给大家分享的是有关JavaScript中var与let的区别是什么,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

前言:

varJavaScript刚出现时就存在的变量声明关键字,而let作为ES6才出现的变量声明关键字,无疑两者之间存在着很大的区别。那么具体有哪些区别呢?

1.作用域表现形式不同

var是函数作用域,let是块级作用域

{  var monkey='熏悟空';  let pig='猪扒盖';    }console.log(monkey); //输出undefinedconsole.log(pig); //报错:pig is not deined

由上面代码可见,let声明的变量只在其所在的代码块有效,在代码块外部无效无法访问,而var声明的变量在该代码块所在的函数作用域内都有效。

2.是否变量提升的区别

var声明的变量会进行变量提升,let声明的变量不会进行变量提升。

console.log(monkey); //undefinedvar monkey='熏悟空';console.log(pig); //报错:pig is not definedlet pig='猪扒盖';

同样的逻辑,为什么var声明的变量在它声明之前调用会显示未定义,而let声明的变量在声明之前调用会抛出异常呢,这就是两者在变量提升上的区别,var声明的变量存在变量提升,let声明的变量不存在变量提升。

那么什么叫变量提升呢,我这里不做概念性的描述,我只说我个人的理解,就是以上代码实际上相当于如下:

var monkey;console.log(monkey); //undefinedmonkey='熏悟空';console.log(pig); //报错:pig is not definedlet pig='猪扒盖';

看见区别了吗,var声明的变量会将声明的变量提取到作用域的最上面进行定义但不赋值,赋值操作还是在你的代码处,所以你在调用var声明的变量时就是一个已经声明但是并未定义值的变量,所以调用结果就是undefined,这就是所谓的变量提升。而let定义的变量不存在这种变量提升。

3.暂时性死区上的区别

暂时性死区:如果在某一作用域内let了一个变量,如果外部作用域中有相同名称的变量,那么就算在作用域内进行了更改,也不会影响到外部作用域

具体表现如下:

for(var i=0;i<5;i++){    setTimeout(function(){        console.log(i)    },1000)}for(let i=0;i<5;i++){  setTimeout(function(){     console.log(i)            },1000)  }

请问这两处代码的运行结果分别是什么?

第一处代码运行完毕的结果是1s后顺序打印5个5;第二处代码运行完毕的结果是1s后顺序打印0,1,2,3,4。

请问为什么会存在这种区别?

因为第一处代码的变量i由var关键字声明,不存在关键性死区,即你在1s后setTimeout中访问到的变量i是全局上下文中for循环运行完毕之后的i,所以打印的结果全是5;

而第二处代码的变量i由let关键字声明,产生了关键性死区,存在setTimeout中的i变量是你当时存储时的i的值,这个存储区间的i不会因为外面有相同的i变量且赋了不同的值而改变,他依旧是之前存储进去的值,这就是暂时性死区的表现,也是为什么第二处代码运行完毕是顺序打印0,1,2,3,4的原因。

4.在同一个上下文中var可以重复声明,let不行

let monkey='熏悟空';let monkey='逼马吻'; //报错:Identifier 'a' has already been declaredvar pig='猪扒盖';var pig='猪肛裂';  //正常访问,变量pig的值被替换

以上就是JavaScript中var与let的区别是什么,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯