当前位置： 首页 > news >正文

Javascript中var和let之间的区别

news 2025/7/9 0:59:14

文章目录

  • 一.变量提升(声)
  • 二.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(&#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有什么区别

相关文章：

Javascript中var和let之间的区别

文章目录 一.变量提升(声)二.let和var的区别 区别&#xff1a; 1、var有变量提升&#xff0c;而let没有&#xff1b; 2、let不允许在相同的作用域下重复声明&#xff0c;而var允许&#xff1b; 3、let没有暂时性死区问题&#xff1b; 4、let创建的全局变量没有给window设置对应…...

编程日记 2024/2/22 17:31:59

不要抱怨，不如抱 Java 运算符吧 (1)

本篇会加入个人的所谓‘鱼式疯言’ ❤️❤️❤️鱼式疯言:❤️❤️❤️此疯言非彼疯言 而是理解过并总结出来通俗易懂的大白话, 小编会尽可能的在每个概念后插入鱼式疯言,帮助大家理解的. &#x1f92d;&#x1f92d;&#x1f92d;可能说的不是那么严谨.但小编初心是能让更多人…...

编程日记 2024/2/22 17:30:58

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…...

编程日记 2024/2/22 17:29:57

攻防世界-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…...

编程日记 2024/2/22 17:26:54

护眼灯减蓝光和无蓝光的区别是什么？盘点回购率前5名的护眼台灯！

随着近视问题日益严重&#xff0c;保护视力已逐渐成为公众关注的焦点。在日常生活中&#xff0c;不良的光线环境常常成为视力下降的潜在威胁&#xff0c;因此&#xff0c;护眼台灯成为了现代家庭保护视力的必备工具。其中&#xff0c;关于台灯的蓝光问题更是受到了广泛关注。有…...

编程日记 2024/2/22 17:24:52

Linux常见的指令

目录 01. ls 指令02. pwd命令03. cd 指令04. touch指令05.mkdir指令&#xff08;重要&#xff09;&#xff1a;06.rmdir指令 && rm 指令&#xff08;重要&#xff09;&#xff1a;07.man指令&#xff08;重要&#xff09;&#xff1a;08.cp指令&#xff08;重要&#x…...

编程日记 2024/2/22 17:23:51

C++项目开发编译踩坑记录

git工具配置了autocrlfinput下载的代码换行符默认从CRLF转换为LF&#xff0c;导致在windows桌面开发时&#xff0c;编译C代码全文报语法错误 问题现象&#xff1a;使用git clone命令从库上下载下来的代码&#xff0c;使用VS 2022编译&#xff0c;全文报语法错误&#xff0c;但…...

编程日记 2024/2/22 17:22:50

【Python】【Pycharm】Python Script头文件设置

1、步骤&#xff1a;File->settings->Editor->File and CodeTemplates->Python Script 2、复制粘贴以下代码&#xff0c;应用即可&#xff1a; #!/usr/bin/env python # -*- coding: utf-8 -*-# Time :${DATE} ${TIME} # Author : admin # Site :${SITE} …...

编程日记 2024/2/22 17:20:47

Recorder 实现语音录制并上传到后端（兼容PC和移动端）

Recorder 首页&#xff1a;https://github.com/xiangyuecn/Recorder 一、安装 npm install recorder-core二、代码部分 1. HTML页面 <template><div><el-inputv-model"ttsText"type"textarea"placeholder"请输入内容"><…...

编程日记 2024/2/22 17:18:45

fastJSON 字符串转对象

一、fastJSON 包 dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.33</version> </dependency> 二、转普通对象 自定义对象A A aa JSONObject.parseObject("字符串", A.…...

编程日记 2024/2/22 17:12:39

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 参…...

编程日记 2024/2/22 17:04:31

Stable Diffusion ComfyUI安装详细教程

上一篇文章介绍了sd-webui的安装教程&#xff0c;但学习一下ComfyUI这种节点流程式的对理解AI绘画有较大帮助&#xff0c;而且后期排查错误会更加方便&#xff0c;熟练后用这种方式做AI绘画可玩性会更多。 文章目录 一、安装包说明二、安装文件介绍三、安装步骤四、汉化五、云主…...

编程日记 2024/2/22 17:03:29

前端基于Verdaccio搭建私有npm仓库，上传npm插件包，及下载使用自己的npm插件包

文章目录 一、原理二、常用的仓库地址三、优势四、准备环境六、使用verdaccio搭建私有npm服务1、安装2、运行3、配置config.yaml&#xff0c;使局域网下能共享访问&#xff0c;否则只能本机访问。4、重新运行 七、npm常见操作查看当前用户信息查看源地址切换源地址删除源地址创…...

编程日记 2024/2/22 17:01:28

Unity红点系统的架构与设计

在游戏开发中&#xff0c;红点系统是一种常见的功能&#xff0c;用于提示玩家有未读消息或待处理任务。在Unity引擎中&#xff0c;我们可以使用脚本来实现红点系统&#xff0c;下面我将介绍一种基于Unity的红点系统的架构与设计&#xff0c;并给出对应的代码实现。 红点系统的代…...

编程日记 2024/2/22 17:00:27

go语言内存泄漏检查工具

和其它语言一样&#xff0c;go语言也提供了一些内存泄漏分析的工具&#xff0c;用来帮助查找和分析内存泄漏问题。有以下一些常用的工具和技术&#xff1a; 1、go tool pprof&#xff1a; Go内置了一个性能分析工具&#xff08;pprof&#xff09;&#xff0c;它可以用于分析内…...

编程日记 2024/2/22 16:58:25

Ps：灰度模式

Ps菜单&#xff1a;图像/模式/灰度 Image/Mode/Grayscale 灰度 Grayscale模式是一种特定的色彩模式&#xff0c;用于处理没有彩色信息的图像。 在灰度模式下&#xff0c;图像不包含颜色&#xff0c;只显示黑色、白色及其间的灰色阶。 这种模式对于需要强调光影、纹理和形状而不…...

编程日记 2024/2/22 16:51:17

实现律所高质量发展-Alpha法律智能操作系统

律师行业本质上属于服务行业&#xff0c;而律师团队作为一个独立的服务单位&#xff0c;应当包含研发、市场、销售、服务等单位发展的基础工作环节。但现实中&#xff0c;很多律师团队其实并没有区分这些工作。鉴于此&#xff0c;上海市锦天城律师事务所医药大健康行业资本市场…...

编程日记 2024/2/22 16:49:15

WordPress后台自定义登录和管理页面插件Admin Customizer

WordPress默认的后台登录页面和管理员&#xff0c;很多站长都想去掉或修改一些自己不喜欢的功能&#xff0c;比如登录页和管理页的主题样式、后台左侧菜单栏的某些菜单、仪表盘的一些功能、后台页眉页脚某些小细节等等。这里boke112百科推荐这款可以让我们轻松自定义后台登录页…...

编程日记 2024/2/22 16:48:14

C语言——static的三大用法

被称为面试爱考爱问题的它到底有何奥义 它难度不大并且非常常用&#xff0c;话不多说&#xff0c;直接开始 一、局部静态变量 定义 在函数内部使用static修饰的变量被称为局部静态变量&#xff0c;与普通的局部变量不同&#xff0c;局部静态变量在使用后不会被销毁&#xff…...

编程日记 2024/2/22 16:40:07

开源 - 一款可自定义的在线免杀平台|过x60、wd等

免责声明&#xff1a;本工具仅供安全研究和教学目的使用&#xff0c;用户须自行承担因使用该工具而引起的一切法律及相关责任。作者概不对任何法律责任承担责任&#xff0c;且保留随时中止、修改或终止本工具的权利。使用者应当遵循当地法律法规&#xff0c;并理解并同意本声明…...

编程日记 2024/2/22 16:38:05

基于算法竞赛的c++编程（28）结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

编程新知 2025/6/17 5:30:27

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介 对于社交类软件的功能&#xff0c;我们需要对它的功能特点进行分析&#xff1a; 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具&#xff1a; mysql&#xff1a;关系型数据库&am…...

编程新知 2025/7/8 20:45:19

c++ 面试题(1)-----深度优先搜索（DFS）实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

编程新知 2025/7/6 20:47:25

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

编程新知 2025/6/25 3:04:08

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

编程新知 2025/7/7 23:27:32

C# 表达式和运算符(求值顺序)

求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如&#xff0c;已知表达式3*52&#xff0c;依照子表达式的求值顺序&#xff0c;有两种可能的结果&#xff0c;如图9-3所示。 如果乘法先执行&#xff0c;结果是17。如果5…...

编程新知 2025/7/8 3:53:44

Windows电脑能装鸿蒙吗_Windows电脑体验鸿蒙电脑操作系统教程

鸿蒙电脑版操作系统来了&#xff0c;很多小伙伴想体验鸿蒙电脑版操作系统&#xff0c;可惜&#xff0c;鸿蒙系统并不支持你正在使用的传统的电脑来安装。不过可以通过可以使用华为官方提供的虚拟机&#xff0c;来体验大家心心念念的鸿蒙系统啦&#xff01;注意&#xff1a;虚拟…...

编程新知 2025/7/5 18:25:35

mcts蒙特卡洛模拟树思想

您这个观察非常敏锐&#xff0c;而且在很大程度上是正确的&#xff01;您已经洞察到了MCTS算法在不同阶段的两种不同行为模式。我们来把这个关系理得更清楚一些&#xff0c;您的理解其实离真相只有一步之遥。 您说的“select是在二次选择的时候起作用”&#xff0c;这个观察非…...

编程新知 2025/6/17 0:54:48

IP选择注意事项

IP选择注意事项 MTP、FTP、EFUSE、EMEMORY选择时&#xff0c;需要考虑以下参数&#xff0c;然后确定后选择IP。 容量工作电压范围温度范围擦除、烧写速度/耗时读取所有bit的时间待机功耗擦写、烧写功耗面积所需要的mask layer...

编程新知 2025/7/7 8:06:04

记一次spark在docker本地启动报错

1&#xff0c;背景 在docker中部署spark服务和调用spark服务的微服务&#xff0c;微服务之间通过fegin调用 2&#xff0c;问题&#xff0c;docker容器中服务器来后&#xff0c;注册中心都有&#xff0c;调用服务也正常&#xff0c;但是调用spark启动任务后报错&#xff0c;报错…...

编程新知 2025/7/6 6:09:16