前言:

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

1.作用域表现形式不同

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

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


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

2.是否变量提升的区别

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

console.log(monkey); //undefined
var monkey='熏悟空';

console.log(pig); //报错:pig is not defined
let pig='猪扒盖'; 


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

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

var monkey;

console.log(monkey); //undefined
monkey='熏悟空';

console.log(pig); //报错:pig is not defined
let 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 declared
var pig='猪扒盖';
var pig='猪肛裂';  //正常访问,变量pig的值被替换

到此这篇关于JavaScript中var与let的区别的文章就介绍到这了,更多相关JavaScript中var与let内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax!

JavaScript中var与let的区别的更多相关文章

  1. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  2. HTML5数字输入仅接受整数的实现代码

    这篇文章主要介绍了HTML5数字输入仅接受整数的实现代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. amaze ui 的使用详细教程

    这篇文章主要介绍了amaze ui 的使用详细教程,本文通过多种方法给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  4. html5简介_动力节点Java学院整理

    这篇文章主要介绍了html5简介,用于指定构建网页的元素,这些元素中的大多数都用于描述网页内容,有兴趣的可以了解一下

  5. ios 8 Homescreen webapp,关闭和打开iPad停止javascript

    我有一个适用于iPad的全屏HTML5网络应用程序,并且刚刚安装了IOS8来试用它,它一切正常,直到你关闭并重新启动iPad.一旦web应用程序重新启动javascript就会停止并加载新页面不会重新启动它.在iPad上的Safari中打开同一页面时,关闭和打开iPad会继续按预期工作.其他人注意到了这个或想出了一个解决方案吗?解决方法这似乎是我在iOS8.1.1更新中解决的.

  6. iOS 6 javascript与object.defineProperty的间歇性问题

    当访问使用较新的Object.defineProperty语法定义属性的对象的属性时,有没有其他人注意到新iOS6javascript引擎中的间歇性错误/问题?https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty我正在看到javascript失败的情况,说

  7. ios – 200在xcode 7中生成DSMM警告

    解决方法我有同样的问题.Facebook表示他们已经意识到这一点并且不是高优先级,因为它不会影响应用程序.我回退到4.7.1警告问题不再存在.我不认为它会被拒绝但不能确定.

  8. ios – 如何使用JSExport导出内部类的方法

    解决方法似乎没有办法将内部类函数导出到javascript.我将内部类移出并创建了独立的类,它起作用了.

  9. xamarin.ios – Facebook iOS SDK:应用程序在启动时找不到“找不到符号:_ACFacebookAppIdKey.”仅在iOS 5中崩溃

    解决方法这是一个已修复的knownbug.目前唯一已知的解决方法是使用较旧版本的FacebookSDK.

  10. osx – 无法创建目录/ var / teamsserver

    OpenSSH_6.2p2,OSSLShim0.9.8r8Dec2011debug1:Readingconfigurationdata/etc/ssh_configdebug1:/etc/ssh_configline20:Applyingoptionsfor*debug1:Connectingto1.2.3.4[1.2.3.4]portPORT.debug1:Connectionestablished.Couldnotcreatedirectory‘/var/teamsserver/.ssh’.debug

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部