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

JavaScript 中的 var 和 let :关键区别与使用建议

        在 JavaScript 开发中,变量声明是基础且重要的部分。  var   和   let   都是用于声明变量的关键字,但它们在作用域、变量提升、重复声明等方面存在显著差异。本文将详细探讨它们的区别,并给出使用建议。

1. 作用域

1.1   var   的作用域 

        var声明的变量具有函数作用域(function scope)或全局作用域(global scope)。这意味着:

  • 如果在函数内部声明,变量的作用域是整个函数,即使它被声明在某个代码块(如   if   语句块)中。
  • 如果在函数外部声明,变量的作用域是全局的。
function exampleVar() {if (true) {var x = 10;}console.log(x); // 输出 10,因为 x 的作用域是整个函数
}
exampleVar();

1.2   let   的作用域 

        let声明的变量具有块级作用域(block scope),即变量的作用域仅限于它所在的代码块(如   {}   包裹的代码块)。这意味着:

  • 在块级作用域内声明的变量不会影响外部作用域。
function exampleLet() {if (true) {let y = 20;}console.log(y); // 报错,y 在这个作用域中不存在
}
exampleLet();

2. 变量提升(Hoisting)

2.1   var   的变量提升

        var   声明的变量会被提升到函数或全局作用域的顶部,但初始化不会提升。这意味着在声明之前访问变量时,变量会存在但值为   undefined  。

console.log(a); // 输出 undefined
var a = 10;

2.2   let   的变量提升

        let   声明的变量不会被提升。在声明之前访问变量会导致运行时错误(  ReferenceError  ),因为   let   声明的变量在声明之前处于“暂时性死区”(Temporal Dead Zone,TDZ)。

console.log(b); // 报错:ReferenceError,b 还未声明
let b = 20;

3. 重复声明

3.1   var   的重复声明

        var   允许在同一个作用域内重复声明同一个变量,不会报错。

var c = 10;
var c = 20; // 不会报错,但后面的声明会覆盖前面的
console.log(c); // 输出 20

3.2   let   的重复声明

        let   不允许在同一个作用域内重复声明同一个变量,否则会报错。

let d = 10;
let d = 20; // 报错:SyntaxError,重复声明

4. 全局对象属性

4.1   var   的全局对象属性

        在全局作用域中声明的   var   变量会成为全局对象(如浏览器中的   window   或 Node.js 中的   global  )的属性。 

var e = 30;
console.log(window.e); // 输出 30(在浏览器中)

4.2   let   的全局对象属性 

        在全局作用域中声明的   let   变量不会成为全局对象的属性。

let f = 40;
console.log(window.f); // 输出 undefined(在浏览器中)

5. 使用建议

5.1 避免使用   var  

        由于   var   的作用域和变量提升的特性,容易导致一些难以察觉的错误。例如,变量提升可能导致在声明之前意外访问变量,而函数作用域可能导致变量在代码块外部被意外访问。 

5.2 优先使用   let  

        let   由于其块级作用域和更严格的语法限制,更适合现代 JavaScript 的开发需求。它能够有效减少变量作用域相关的错误,同时避免重复声明带来的问题。 

        在现代 JavaScript 开发中,建议优先使用   let   和   const  ,以利用其更安全的特性和更清晰的作用域规则。这将有助于编写更稳定、更可维护的代码。

相关文章:

JavaScript 中的 var 和 let :关键区别与使用建议

在 JavaScript 开发中,变量声明是基础且重要的部分。 var 和 let 都是用于声明变量的关键字,但它们在作用域、变量提升、重复声明等方面存在显著差异。本文将详细探讨它们的区别,并给出使用建议。 1. 作用域 1.1 var 的作用域 …...

寒假刷题Day19

一、923. 三数之和的多种可能 class Solution { public:int threeSumMulti(vector<int>& arr, int target) {const int MOD 1000000007; // 正确的模数long long ans 0; // 使用 long long 防止溢出std::sort(arr.begin(), arr.end());for (size_t i 0; i < a…...

写好简历的三个关键认知

在当今竞争激烈的就业市场中&#xff0c;一份优秀的简历往往是敲开理想企业大门的第一把钥匙。然而&#xff0c;很多求职者在写简历时往往不得要领&#xff0c;让宝贵的机会从指间溜走。今天&#xff0c;让我们一起探讨如何提升简历写作水平&#xff0c;让你的职业之路走得更顺…...

工具的应用——安装copilot

一、介绍Copilot copilot是一个AI辅助编程的助手&#xff0c;作为需要拥抱AI的程序员可以从此尝试进入&#xff0c;至于好与不好&#xff0c;应当是小马过河&#xff0c;各有各的心得。这里不做评述。重点在安装copilot的过程中遇到了一些问题&#xff0c;然后把它总结下&…...

Koa 基础篇(二)—— 路由与中间件

let app new Koa() router.get(“/”,async ctx > { ctx.body “hello koa router” }) app.use(router.routes()) app.use(router.allowedMethods()) app.listen(3000) 运行项目&#xff0c;在浏览器访问本地3000端口&#xff0c;在页面上就会看到输出的语句。这就…...

帆软 FCA -业务分析师认证学习

帆软 FCA -业务分析师认证学习 认证概述 适合人群 企业中有需求管理、指标梳理、业务逻辑梳理、项目规划等需求的人员&#xff0c;想提升综合数据能力、推进数据应用落地的业务/IT骨干。 具体-FCA-业务分析理论 考试要求&#xff1a; FCA-业务分析理论考试- 费用&#xff1a…...

Miniconda 安装及使用

文章目录 前言1、Miniconda 简介2、Linux 环境说明2.1、安装2.2、配置2.3、常用命令2.4、常见问题及解决方案 前言 在 Python 中&#xff0c;“环境管理”是一个非常重要的概念&#xff0c;它主要是指对 Python 解释器及其相关依赖库进行管理和隔离&#xff0c;以确保开发环境…...

solidity高阶 -- Eth支付

在区块链的世界里&#xff0c;智能合约是实现去中心化应用&#xff08;DApp&#xff09;的核心技术之一。Solidity 是一种专门用于编写以太坊智能合约的编程语言&#xff0c;它可以帮助开发者构建各种功能&#xff0c;包括支付功能。 今天&#xff0c;我们就来探讨如何使用 Sol…...

深入理解Java中的String

前言 在Java中&#xff0c;String类是一个非常重要的内置类&#xff0c;用于处理字符串数据。字符串是不可变的&#xff08;immutable&#xff09;&#xff0c;这意味着一旦创建&#xff0c;字符串的内容不能被修改。作为Java中最为基础和常用的类之一&#xff0c;String类在内…...

洛谷 P1734 最大约数和 C语言

P1734 最大约数和 - 洛谷 | 计算机科学教育新生态 题目描述 选取和不超过 S 的若干个不同的正整数&#xff0c;使得所有数的约数&#xff08;不含它本身&#xff09;之和最大。 输入格式 输入一个正整数 S。 输出格式 输出最大的约数之和。 输入输出样例 输入 #1复制 …...

Golang 执行流程分析

文章目录 1. 编译和运行2. 编译和运行说明 1. 编译和运行 如果是对源码编译后&#xff0c;再执行&#xff0c;Go的执行流程如下图 如果我们是对源码直接 执行 go run 源码&#xff0c;Go的执行流程如下图 两种执行流程的方式区别 如果先编译生成了可执行文件&#xff0c;那么…...

python学opencv|读取图像(五十一)使用修改图像像素点上BGR值实现图像覆盖效果

【1】引言 前序学习了图像的得加方法&#xff0c;包括使用add()函数直接叠加BGR值、使用bitwise()函数对BGR值进行按位计算叠加和使用addWeighted()函数实现图像加权叠加至少三种方法。文章链接包括且不限于&#xff1a; python学opencv|读取图像&#xff08;四十二&#xff…...

Flask数据的增删改查(CRUD)_flask删除数据自动更新

查询年龄小于17的学生信息 Student.query.filter(Student.s_age < 17) students Student.query.filter(Student.s_age.__lt__(17))模糊查询&#xff0c;使用like&#xff0c;查询姓名中第二位为花的学生信息 like ‘_花%’,_代表必须有一个数据&#xff0c;%任何数据 st…...

kamailio-ACC模块介绍【kamailio6.0. X】

Acc 模块 作者 Jiri Kuthan iptel.org jiriiptel.org Bogdan-Andrei Iancu Voice Sistem SRL bogdanvoice-system.ro Ramona-Elena Modroiu rosdev.ro ramonarosdev.ro 编辑 Bogdan-Andrei Iancu Voice Sistem SRL bogdanvoice-system.ro Sven Knoblich 1&1 Internet …...

数据库对象

数据库对象 数据库对象是构成数据库结构的基本单位&#xff0c;它们定义了数据库存储的数据类型、数据的组织方式以及数据之间的关系。在数据库中&#xff0c;对象可以包括表&#xff0c;视图&#xff0c;索引&#xff0c;触发器&#xff0c;存储过程&#xff0c;函数等多种类…...

EtherCAT主站IGH-- 27 -- IGH之globals.h文件解析

EtherCAT主站IGH-- 27 -- IGH之globals.h文件解析 0 预览一 该文件功能宏定义数据结构打印宏三 h文件翻译四 c文件翻译该文档修改记录:总结0 预览 一 该文件功能 该文件包含了一些全局定义和宏,用于 IgH EtherCAT 主站(EtherCAT Master)的实现。包括了一些超时设定、宏定义…...

2025多目标优化创新路径汇总

多目标优化是当下非常热门且有前景的方向&#xff01;作为AI领域的核心技术之一&#xff0c;其专注于解决多个相互冲突的目标的协同优化问题&#xff0c;核心理念是寻找一组“不完美但均衡”的“帕累托最优解”。在实际中&#xff0c;几乎处处都有它的身影。 但随着需求场景的…...

15JavaWeb——Maven高级篇

Maven高级 Web开发讲解完毕之后&#xff0c;我们再来学习Maven高级。其实在前面的课程当中&#xff0c;我们已经学习了Maven。 我们讲到 Maven 是一款构建和管理 Java 项目的工具。经过前面 10 多天 web 开发的学习&#xff0c;相信大家对于 Maven 这款工具的基本使用应该没什…...

使用Ollama本地化部署DeepSeek

1、Ollama 简介 Ollama 是一个开源的本地化大模型部署工具&#xff0c;旨在简化大型语言模型&#xff08;LLM&#xff09;的安装、运行和管理。它支持多种模型架构&#xff0c;并提供与 OpenAI 兼容的 API 接口&#xff0c;适合开发者和企业快速搭建私有化 AI 服务。 Ollama …...

蓝桥杯刷题DAY1:前缀和

所谓刷题&#xff0c;讲究的就是细心 帕鲁服务器崩坏【算法赛】 “那个帕鲁我已经观察你很久了&#xff0c;我对你是有些失望的&#xff0c;进了这个营地&#xff0c;不是把事情做好就可以的&#xff0c;你需要有体系化思考的能力。” 《幻兽帕鲁》火遍全网&#xff0c;成为…...

XML Group端口详解

在XML数据映射过程中&#xff0c;经常需要对数据进行分组聚合操作。例如&#xff0c;当处理包含多个物料明细的XML文件时&#xff0c;可能需要将相同物料号的明细归为一组&#xff0c;或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码&#xff0c;增加了开…...

工业安全零事故的智能守护者:一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

无法与IP建立连接,未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

20个超级好用的 CSS 动画库

分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码&#xff0c;而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库&#xff0c;可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画&#xff0c;可以包含在你的网页或应用项目中。 3.An…...

Vite中定义@软链接

在webpack中可以直接通过符号表示src路径&#xff0c;但是vite中默认不可以。 如何实现&#xff1a; vite中提供了resolve.alias&#xff1a;通过别名在指向一个具体的路径 在vite.config.js中 import { join } from pathexport default defineConfig({plugins: [vue()],//…...