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. let和const 不存在变量提升机制. 创建变量的六种方式中：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('body'),buttons = document.querySelectorAll('button'),arr = ['red', 'green', 'blue']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有什么区别
相关文章：
Javascript中var和let之间的区别
文章目录 一.变量提升(声)二.let和var的区别 区别： 1、var有变量提升，而let没有； 2、let不允许在相同的作用域下重复声明，而var允许； 3、let没有暂时性死区问题； 4、let创建的全局变量没有给window设置对应…...
不要抱怨，不如抱 Java 运算符吧 (1)
本篇会加入个人的所谓‘鱼式疯言’ ❤️❤️❤️鱼式疯言:❤️❤️❤️此疯言非彼疯言 而是理解过并总结出来通俗易懂的大白话, 小编会尽可能的在每个概念后插入鱼式疯言,帮助大家理解的. 🤭🤭🤭可能说的不是那么严谨.但小编初心是能让更多人…...
python之ftp小工具
文章目录 python之FTP小工具 python之FTP小工具 源码 #!/usr/bin/python3 import os import sys from pyftpdlib.authorizers import DummyAuthorizer from pyftpdlib.handlers import FTPHandler, ThrottledDTPHandler from pyftpdlib.servers import FTPServer import logg…...
攻防世界-web-Training-WWW-Robots
题目信息 In this little training challenge, you are going to learn about the Robots_exclusion_standard. The robots.txt file is used by web crawlers to check if they are allowed to crawl and index your website or only parts of it. Sometimes these files rev…...
护眼灯减蓝光和无蓝光的区别是什么？盘点回购率前5名的护眼台灯！
随着近视问题日益严重，保护视力已逐渐成为公众关注的焦点。在日常生活中，不良的光线环境常常成为视力下降的潜在威胁，因此，护眼台灯成为了现代家庭保护视力的必备工具。其中，关于台灯的蓝光问题更是受到了广泛关注。有…...
Linux常见的指令
目录 01. ls 指令02. pwd命令03. cd 指令04. touch指令05.mkdir指令（重要）：06.rmdir指令 && rm 指令（重要）：07.man指令（重要）：08.cp指令（重要&#x…...
C++项目开发编译踩坑记录
git工具配置了autocrlfinput下载的代码换行符默认从CRLF转换为LF，导致在windows桌面开发时，编译C代码全文报语法错误 问题现象：使用git clone命令从库上下载下来的代码，使用VS 2022编译，全文报语法错误，但…...
【Python】【Pycharm】Python Script头文件设置
1、步骤：File->settings->Editor->File and CodeTemplates->Python Script 2、复制粘贴以下代码，应用即可： #!/usr/bin/env python # -*- coding: utf-8 -*-# Time :${DATE} ${TIME} # Author : admin # Site :${SITE} …...
Recorder 实现语音录制并上传到后端（兼容PC和移动端）
Recorder 首页：https://github.com/xiangyuecn/Recorder 一、安装 npm install recorder-core二、代码部分 1. HTML页面 <template><div><el-inputv-model"ttsText"type"textarea"placeholder"请输入内容"><…...
fastJSON 字符串转对象
一、fastJSON 包 dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.33</version> </dependency> 二、转普通对象 自定义对象A A aa JSONObject.parseObject("字符串", A.…...
C++知识点总结(19)：高级贪心算法
高级贪心算法 一、P1803 活动安排1. 审题2. 思路2.1 最优区间挑选方法2.2 分配时间方法2.3 排序方法 3. 参考答案 二、P1094 纪念品分组1. 审题2. 思路2.1 每组多少个方法2.2 搭配的方法 3. 参考答案 三、村民打水1. 审题2. 思路3. 参考答案 四、习题1. 服务等待1.1 审题1.2 参…...
Stable Diffusion ComfyUI安装详细教程
上一篇文章介绍了sd-webui的安装教程，但学习一下ComfyUI这种节点流程式的对理解AI绘画有较大帮助，而且后期排查错误会更加方便，熟练后用这种方式做AI绘画可玩性会更多。 文章目录 一、安装包说明二、安装文件介绍三、安装步骤四、汉化五、云主…...
前端基于Verdaccio搭建私有npm仓库，上传npm插件包，及下载使用自己的npm插件包
文章目录 一、原理二、常用的仓库地址三、优势四、准备环境六、使用verdaccio搭建私有npm服务1、安装2、运行3、配置config.yaml，使局域网下能共享访问，否则只能本机访问。4、重新运行 七、npm常见操作查看当前用户信息查看源地址切换源地址删除源地址创…...
Unity红点系统的架构与设计
在游戏开发中，红点系统是一种常见的功能，用于提示玩家有未读消息或待处理任务。在Unity引擎中，我们可以使用脚本来实现红点系统，下面我将介绍一种基于Unity的红点系统的架构与设计，并给出对应的代码实现。 红点系统的代…...
go语言内存泄漏检查工具
和其它语言一样，go语言也提供了一些内存泄漏分析的工具，用来帮助查找和分析内存泄漏问题。有以下一些常用的工具和技术： 1、go tool pprof： Go内置了一个性能分析工具（pprof），它可以用于分析内…...
Ps：灰度模式
Ps菜单：图像/模式/灰度 Image/Mode/Grayscale 灰度 Grayscale模式是一种特定的色彩模式，用于处理没有彩色信息的图像。 在灰度模式下，图像不包含颜色，只显示黑色、白色及其间的灰色阶。 这种模式对于需要强调光影、纹理和形状而不…...
实现律所高质量发展-Alpha法律智能操作系统
律师行业本质上属于服务行业，而律师团队作为一个独立的服务单位，应当包含研发、市场、销售、服务等单位发展的基础工作环节。但现实中，很多律师团队其实并没有区分这些工作。鉴于此，上海市锦天城律师事务所医药大健康行业资本市场…...
WordPress后台自定义登录和管理页面插件Admin Customizer
WordPress默认的后台登录页面和管理员，很多站长都想去掉或修改一些自己不喜欢的功能，比如登录页和管理页的主题样式、后台左侧菜单栏的某些菜单、仪表盘的一些功能、后台页眉页脚某些小细节等等。这里boke112百科推荐这款可以让我们轻松自定义后台登录页…...
C语言——static的三大用法
被称为面试爱考爱问题的它到底有何奥义 它难度不大并且非常常用，话不多说，直接开始 一、局部静态变量 定义 在函数内部使用static修饰的变量被称为局部静态变量，与普通的局部变量不同，局部静态变量在使用后不会被销毁ÿ…...
开源 - 一款可自定义的在线免杀平台|过x60、wd等
免责声明：本工具仅供安全研究和教学目的使用，用户须自行承担因使用该工具而引起的一切法律及相关责任。作者概不对任何法律责任承担责任，且保留随时中止、修改或终止本工具的权利。使用者应当遵循当地法律法规，并理解并同意本声明…...
论文阅读-EMS: History-Driven Mutation for Coverage-based Fuzzing（2022）模糊测试
一、背景 本文研究了基于覆盖率的模糊测试中的历史驱动变异技术。之前的研究主要采用自适应变异策略或集成约束求解技术来探索触发独特路径和崩溃的测试用例，但它们缺乏对模糊测试历史的细粒度重用，即它们在不同的模糊测试试验之间很大程度上未能正确利用…...
【 Java 编程中的常用方法和技巧】
本人详解 作者：王文峰，参加过 CSDN 2020年度博客之星，《Java王大师王天师》 公众号：JAVA开发王大师，专注于天道酬勤的 Java 开发问题中国国学、传统文化和代码爱好者的程序人生，期待你的关注和支持！本人外号：神秘小峯 山峯 转载说明：务必注明来源（注明：作者：王文峰…...
2024年重点关注的5大DevOps趋势
DevOps趋势代表了运维、开发领域在未来一段时间内的发展方向。 如果你是一名技术管理者，了解趋势意味着能够及时引入新技术，优化技术架构，解决实际问题，持续保持技术在行业的前沿。 如果你是一名工程师，那么了解趋势…...
RMAN备份与恢复
文章目录 一、RMAN介绍二、全量备份三、增量备份0级备份1级增量备份累积性差量备份总结 四、压缩备份压缩备份介绍压缩备份操作压缩备份优缺点 五、异常恢复1、恢复前的准备2、恢复数据库 六、RMAN相关参数 一、RMAN介绍 RMAN（Recovery Manager）是Oracl…...
速评谷歌开源大模型Gemma 7B
大家好，我是herosunly。985院校硕士毕业，现担任算法研究员一职，热衷于机器学习算法研究与应用。曾获得阿里云天池比赛第一名，CCF比赛第二名，科大讯飞比赛第三名。拥有多项发明专利。对机器学习和深度学习拥有自己独到的见解。曾经辅导过若干个非计算机专业的学生进入到算法…...
线阵相机参数介绍---变频参数控制
变频器介绍 变频器功能的目的在于对外部输入信号进行运算处理，以达到理想的行频值。该功能主要是为了解决信号超行频，图像拉伸压缩等问题。 输入信号处理过程： 输入信号：允许出发相机信号的频率f与所要求输入信号的频率F不同 …...
挑战杯 基于人工智能的图像分类算法研究与实现 - 深度学习卷积神经网络图像分类
文章目录 0 简介1 常用的分类网络介绍1.1 CNN1.2 VGG1.3 GoogleNet 2 图像分类部分代码实现2.1 环境依赖2.2 需要导入的包2.3 参数设置(路径，图像尺寸，数据集分割比例)2.4 从preprocessedFolder读取图片并返回numpy格式(便于在神经网络中训练)2.5 数据预…...
Spring6学习技术|IoC|手写IoC
学习材料 尚硅谷Spring零基础入门到进阶，一套搞定spring6全套视频教程（源码级讲解） 有关反射的知识回顾 IoC是基于反射机制实现的。 Java反射机制是在运行状态中，对于任意一个类，都能够知道这个类的所有属性和方法&…...
基于Java在线宠物店商城系统设计与实现（源码+部署文档）
博主介绍： ✌至今服务客户已经1000、专注于Java技术领域、项目定制、技术答疑、开发工具、毕业项目实战 ✌ 🍅 文末获取源码联系 🍅 👇🏻 精彩专栏 推荐订阅 👇🏻 不然下次找不到 Java项目精品实…...
http和https的区别（简述）
HTTP（HyperText Transfer Protocol）和HTTPS（HTTP Secure）都是用于在客户端和服务器之间传输数据的协议，但它们在安全性方面有重要的区别。 1.HTTP: 概述： HTTP是一种用于传输超文本的协议（超文…...