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等
免责声明：本工具仅供安全研究和教学目的使用，用户须自行承担因使用该工具而引起的一切法律及相关责任。作者概不对任何法律责任承担责任，且保留随时中止、修改或终止本工具的权利。使用者应当遵循当地法律法规，并理解并同意本声明…...
从CNN到Transformer：LeViT和LocalViT是如何把‘局部感知’这个CNN绝活‘偷’过来的？
从CNN到Transformer：LeViT和LocalViT如何实现局部感知的跨架构融合 视觉Transformer（ViT）的崛起彻底改变了计算机视觉领域的格局，但纯Transformer架构在图像处理中面临着一个根本性挑战——缺乏CNN与生俱来的局部感知能力。本文将…...
GitGitHub实操图文详解教程(10)—SSH)
(最新版)GitGitHub实操图文详解教程(10)—SSH
版权声明 本文原创作者：谷哥的小弟 作者博客地址：http://blog.csdn.net/lfdfhl 1. 应用场景 前面几课已经完成了本地Git基础操作：先通过git init初始化仓库，再用git status查看状态，用git add把修改加入暂存区，用git commit创建本地提交，最后用git log查看提交历史。到…...
抢先李飞飞！世界模型能多人联机玩FPS游戏了
Jay 发自 凹非寺量子位 | 公众号 QbitAI我被AI杀了？有视频为证，我被一个不知道是人还是AI的东西，一枪崩了。还是在一个世界模型创造的世界里。嗯，就是这个画质糊成马赛克的网页版FPS。背后没有游戏引擎，没有物理规则&a…...
深入STM32F103定时器：用TIM2输入捕获精准测量脉冲宽度与频率
深入STM32F103定时器：用TIM2输入捕获精准测量脉冲宽度与频率 在嵌入式开发中，精确测量外部信号的脉冲宽度和频率是一项常见但极具挑战性的任务。无论是工业控制中的旋转编码器、消费电子中的红外遥控信号，还是无人机领域的PPM控制信号&#x…...
【Perplexity环境新闻搜索实战指南】：20年老炮亲授3大避坑法则与实时情报提纯术
更多请点击： https://intelliparadigm.com 第一章：Perplexity环境新闻搜索实战指南导论 Perplexity 是一款以实时、可信与上下文感知为设计核心的 AI 搜索工具，其底层融合了多源新闻 API、语义检索模型及动态引用验证机制，特别适…...
影刀RPA跨境店群运营架构：Python协同Chromium底层调度与高并发容器化架构
定了。在这场旷日持久的跨境电商反爬风控拉锯战中，我们终于用一套基于 Python 深度协同的分布式微服务调度架构，重塑了跨境千店矩阵的自动化底座。 这几天，科技圈被“DeepSeek V4 首发华为昇腾芯片，国产 AI 开始打破英伟达 CUDA …...
如何在Windows11中配置家长控制？限制使用时间与内容访问
如何在Windows11中配置家长控制？限制使用时间与内容访问 【免费下载链接】windows11 🌎 Windows 11 Settings, Tweaks, Scripts 项目地址: https://gitcode.com/GitHub_Trending/wi/windows11 Windows 11家长控制是保护孩子健康使用电脑的重要功能…...
Windows缩略图加载太慢？这款智能预加载工具让文件浏览快如闪电
Windows缩略图加载太慢？这款智能预加载工具让文件浏览快如闪电 【免费下载链接】WinThumbsPreloader-V2 WinThumbsPreloader is a powerful open source tool for quickly preloading thumbnails in Windows Explorer. 项目地址: https://gitcode.com/gh_mirrors/…...
Escrcpy终极指南：5分钟掌握Android设备图形化控制与屏幕镜像
Escrcpy终极指南：5分钟掌握Android设备图形化控制与屏幕镜像 【免费下载链接】escrcpy 📱 Display and control your Android device graphically with scrcpy. 项目地址: https://gitcode.com/GitHub_Trending/es/escrcpy 你是否曾经为在电脑上控…...
终极微信小程序逆向解析指南：wxappUnpacker专业实战解析
终极微信小程序逆向解析指南：wxappUnpacker专业实战解析 【免费下载链接】wxappUnpacker forked from https://github.com/qwerty472123/wxappUnpacker 项目地址: https://gitcode.com/gh_mirrors/wxappu/wxappUnpacker 微信小程序逆向解析是开发者深入理解小…...