Javascript中var和let之间的区别

文章目录

  • 一.变量提升(声)
  • 二.let和var的区别

区别:
1、var有变量提升,而let没有;
2、let不允许在相同的作用域下重复声明,而var允许;
3、let没有暂时性死区问题;
4、let创建的全局变量没有给window设置对应的属性;
5、let会产生块级作用域,var不会。

想要了解var(ES5)和let(ES6)区别,首先就要了解ES5下JS的变量提升

一.变量提升(声)

当浏览器开辟出供代码执行的栈内存后,代码并没有自上而下立即执行,而是继续做了一些事情:把当前作用域中所有带var/function关键字的进行提前的声明和定义 => 变量提升机制

带var的只是提前声明(declare) var a;,如果只声明没有赋值,默认值是undefined
例如:

console.log(a);
var a = 13;

输出:undefined
相当于:

var a;      // 只声明没有赋值,默认为undefined
console.log(a);
a = 13;

带function的不仅声明,而且还定义了(defined),准确来说就是让变量和某个值进行关联。

二.let和var的区别

1. letconst 不存在变量提升机制. 创建变量的六种方式中:var/function有变量提升,而let/const/class/import都不存在这个机制

2. var允许重复声明,而let不允许重复声明.
在相同的作用域(或执行上下文中)
如果使用var/function关键词声明变量并且重复声明,是不会有影响的(声明第一次之后,之后再遇到就不会再重复声明了)
但使用let/const就不行,浏览器会校验当前作用域中是否已经存在这个变量了,如果已经存在了,则再次基于let等重新声明就会报错

在浏览器开辟栈内存供代码自上而下执行之前,不仅有变量提升的操作,还有很多其他的操作 => “词法解析”或者“词法检测”:就是检测当前即将要执行的代码是否会出现“语法错误 SyntaxError”,如果出现错误,代码将不会再执行(第一行都不会执行)

console.log(1)  // => 这行代码就已经不会执行了
let a = 12
console.log(a)
let a = 13      // => 此行出错:SyntaxError: Identifier 'a' has already been declared
console.log(a)

所谓重复就是:不管之前通过什么方法,只要当前栈内存中存在了这个变量,我们使用let/const等重复再声明这个变量就是语法错误。

console.log(a)
var a = 12
let a = 13  // => SyntaxError: Identifier 'a' has already been declared
console.log(a)
console.log(a)
let a = 13
var a = 12  // => SyntaxError: Identifier 'a' has already been declared
console.log(a)

3. let能解决typeof检测时出现的暂时性死区问题(let比var更严谨)

console.log(a)
// => ReferenceError: a is not defined

typeof a 未报错

console.log(typeof a)
// =>  'undefined' 这是浏览器的bug,本应报错,因为没有a(暂时性死区)

使用let后:

console.log(typeof a)
// => ReferenceError: Cannot access 'a' before initialization
let a

返回不能在a被定义之前使用它,解决暂时性死区问题。

4. let创建的全局变量没有给window设置对应的属性
首先看带var与不带var创建全局变量时的区别

/** 不带var的:相当于给全局对象window设置了一个属性a*      window.a = 13*/
a = 13
console.log(a)  // => window.a 13
/** 栈内存变量存储空间*            b* 带var的:是在全局作用域下声明了一个变量b(全局变量),* 但是在全局下声明的变量也相当于给全局对象window增加了一个对应的* 属性b(只有全局作用域具备这个特点)*/
var b = 14
console.log(b)
console.log(window.b)

在这里插入图片描述
在这里插入图片描述

使用let创建时:

/** 栈内存变量存储空间*   c* 带let的:仅仅在全局作用域下声明了一个变量b(全局变量),* 并未给全局对象window增加对应的属性c*/
let c = 15
console.log(c)                          // => 15
console.log(window.c)                   // => undefined

在这里插入图片描述
5. let会产生块级作用域
下面代码能否实现点击某个按钮,body的背景色改为按钮对应的颜色,若不能,如何改进(腾讯)

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="ie=edge"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"><style>* {margin: 0;padding: 0;}html,body {height: 100%;overflow: hidden;}button {padding: 5px 10px;cursor: pointer;}</style>
</head><body>
<!---->
<button value="red"></button>
<button value="green">绿</button>
<button value="blue"></button><script>var body = document.querySelector(&#39;body&#39;),buttons = document.querySelectorAll(&#39;button&#39;),arr = [&#39;red&#39;, &#39;green&#39;, &#39;blue&#39;]for (var i = 0; i < buttons.length; i++) {buttons[i].onclick = function () {body.style.background = arr[i]}}
</script>
</body>
</html>

答案当然是不能,因为通过var定义的变量,在for循环中的i是全局的,变量提升、3次循环过后,i=3,因为点击每个都相当于点击最后一个。

参考:
javascript中var和let有什么区别

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/694651.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

不同种类遥感图像汇总 !!

文章目录 前言 1、可见光遥感图像 2、全色遥感图像 3、多光谱遥感图像 4、高光谱遥感图像 5、红外遥感图像 6、激光雷达图像 7、合成孔径雷达遥感图像 前言 遥感技术是从远距离感知目标反射或自身辐射的电磁波、可见光、红外线&#xff0c;对目标进行探测和识别的技术。遥感卫…

【JAVA高级面试题】运用锁机制实现一个自定义的阻塞队列

文章目录 前言实战演示写在最后 前言 前几天看见一个高级Java面试题&#xff0c;我觉得很有代表意义。既考察了面试者的基本锁机制运用&#xff0c;也了解了阻塞队列的产生实现原理。先分享出来&#xff0c;以供鉴赏。 面试题&#xff1a;实现一个自定义的阻塞队列&#xff0c…

React 事件处理 ( this问题 参数传递 ref)

React事件的命名采用小驼峰方式&#xff08;cameCase&#xff09;,而不是小写 使用JSX语法时你需要传入一个函数作为事件处理函数&#xff0c;而不是一个字符串 你不能通过返回false 的方式阻止默认行为。你必须显示式的使用preventDefault 1 this 需要谨慎对待JSX回调函数中的…

Linux的Ubuntu的APT使用

Linux的Ubuntu的APT使用 apt 介绍 apt 是 Advanced Packaging Tool 的简称&#xff0c;是一款安装包管理工具。在 Ubuntu 下&#xff0c;我们可以使用 apt 命令进行软件包的安装、删除、清理等&#xff0c;类似于 Windows 中的软件管理工具。 Ubuntu 软件操作的相关命令 su…

Android 面试问题 2024 版(其二)

Android 面试问题 2024 版&#xff08;其二&#xff09; 六、多线程和并发七、性能优化八、测试九、安全十、Material设计和 **UX/UI** 六、多线程和并发 Android 中的进程和线程有什么区别&#xff1f; 答&#xff1a;进程是在自己的内存空间中运行的应用程序的单独实例&…

Maven的下载安装配置教程

一、简单了解一下什么是Maven Maven就是一款帮助程序员构建项目的工具&#xff0c;我们只需要告诉Maven需要哪些Jar 包&#xff0c;它会帮助我们下载所有的Jar&#xff0c;极大提升开发效率。 1.Maven翻译为“专家“&#xff0c; ”内行”的意思&#xff0c;是著名Apache公司下…

Unity基于AssetBundle资源管理流程详解

在Unity游戏开发中&#xff0c;资源管理是一个非常重要的环节。随着游戏的发展&#xff0c;资源会变得越来越庞大&#xff0c;因此需要一种高效的资源管理方式来减少内存占用和加快加载速度。AssetBundle是Unity提供的一种资源打包和加载方式&#xff0c;可以将资源打包成一个独…

Fiddler工具 — 19.Fiddler抓包HTTPS请求(二)

5、查看证书是否安装成功 方式一&#xff1a; 点击Tools菜单 —> Options... —> HTTPS —> Actions 选择第三项&#xff1a;Open Windows Certificate Manager打开Windows证书管理器。 打开Windows证书管理器&#xff0c;选择操作—>查看证书&#xff0c;在搜索…

【Java程序员面试专栏 数据结构】四 高频面试算法题:哈希表

一轮的算法训练完成后,对相关的题目有了一个初步理解了,接下来进行专题训练,以下这些题目就是汇总的高频题目,一个O(1)查找的利器哈希表,所以放到一篇Blog中集中练习 题目关键字解题思路时间空间两数之和辅助哈希使用map存储出现过的值,key为值大小,value为下标位置,…

船舶维保管理系统|基于springboot船舶维保管理系统设计与实现(源码+数据库+文档)

船舶维保管理系统目录 目录 基于springboot船舶维保管理系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、船舶列表 2、公告信息管理 3、公告类型管理 4、维保计划管理 5、维保计划类型管理 四、数据库设计 1、实体ER图 五、核心代码 六、论文参考 七、…

网络安全-pikachu之SQL注入漏洞(数字型注入)

哦,SQL注入漏洞&#xff0c;可怕的漏洞。 在owasp发布的top10排行榜里&#xff0c;注入漏洞一直是危害排名第一的漏洞&#xff0c;其中注入漏洞里面首当其冲的就是数据库注入漏洞。 一个严重的SQL注入漏洞&#xff0c;可能会直接导致一家公司破产&#xff01; SQL注入漏…

Day3 javaweb开发——登录认证

登录功能 没什么好写的&#xff0c;就是LoginController层里面要注入empService的对象 登录校验&#xff08;重点&#xff09; 没有校验的情况 没有登录之前&#xff0c;访问数据的网址需要跳转到登录页面。 http是无状态的&#xff0c;处理其他业务时没有判断他是否登录 …

Apache POI技术-在Java中的基本使用

Apache POI技术-在Java中的基本使用 文章目录 Apache POI技术-在Java中的基本使用前言一、Apache POI是什么&#xff1f;1.Apache POI简介&#xff1a;2.Apache POI主要包括的模块&#xff1a;3.Apache POI 的应用场景&#xff1a;报表生成&#xff1a;数据导入导出&#xff1a…

HarmonyOS—LocalStorage:页面级UI状态存储

LocalStorage是页面级的UI状态存储&#xff0c;通过Entry装饰器接收的参数可以在页面内共享同一个LocalStorage实例。LocalStorage也可以在UIAbility实例内&#xff0c;在页面间共享状态。 本文仅介绍LocalStorage使用场景和相关的装饰器&#xff1a;LocalStorageProp和LocalS…

Docker技术仓库

数据卷 为什么用数据卷&#xff1f; 宿主机无法直接访问容器中的文件容器中的文件没有持久化&#xff0c;导致容器删除后&#xff0c;文件数据也随之消失容器之间也无法直接访问互相的文件 为解决这些问题&#xff0c;docker加入了数据卷机制&#xff0c;能很好解决上面问题…

FPGA模块——IIC接口设计

FPGA模块——IIC接口设计 IIC协议IIC接口代码应用IIC接口的代码 IIC协议 IIC接口代码 module iic_drive#(parameter P_ADDR_WIDTH 16 )( input i_clk ,//模块输入时钟input i_rs…

js-Vue Router 中的方法,父A-子B-子C依次返回,无法返回到A,BC中形成循环跳转解决

1.常用的方法 在 Vue Router 中&#xff0c;有一些常用的方法用于实现路由导航和管理。以下是一些常见的 Vue Router 方法及其作用&#xff1a; push: router.push(location, onComplete, onAbort) 作用&#xff1a;向路由历史记录中添加一个新条目&#xff0c;并导航到指定的路…

十六进制数

1.做一个收电费程序&#xff0c;要求输入使用的电的度数&#xff08;整数&#xff09;以及电费单价&#xff08;实数&#xff09;&#xff0c;输出总的用电费用。 2.提示并输入一个小写字母数据&#xff0c;输出其对应的ASCII值&#xff0c;以及该小写字母对应的大写字母。 3.提…

leetcode hot100组合综合四

本题中&#xff0c;是要求nums中求的总和为target的排列数&#xff0c;因为题中说了&#xff0c;元素顺序不同&#xff0c;则可以视为不同的结果之一。 所以&#xff0c;根据对背包问题的总结&#xff0c;本题中元素可以重复使用&#xff0c;是完全背包并且需要求排列数&#…

Redis之缓存击穿问题解决方案

文章目录 一、书接上文二、介绍三、解决方案1. 单例双检锁2. 缓存预热和定时任务 一、书接上文 Redis之缓存雪崩问题解决方案 二、介绍 缓存击穿就是大量并发访问同一个热点数据&#xff0c;一旦这个热点数据缓存失效&#xff0c;则请求压力都来到数据库。 三、解决方案 1…