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

【JavaScript】深入理解 `let`、`var` 和 `const`

文章目录

    • 一、`var` 的声明与特点
    • 二、`let` 的声明与特点
    • 三、`const` 的声明与特点
    • 四、`let`、`var` 和 `const` 的对比
    • 五、实战示例
    • 六、最佳实践

在 JavaScript 中,变量声明是编程的基础,而 letvarconst 是三种常用的变量声明方式。本文将详细介绍这三种变量声明方式的特点、用法、差异及最佳实践,帮助您全面掌握它们的使用方法和适用场景。

一、var 的声明与特点

varvariable 的缩写,表示“变量”的意思。是 ES5 及之前版本中唯一的变量声明方式。它具有一些独特的特性,但这些特性有时会导致意外的行为。

var 的声明

使用 var 声明的变量可以在函数作用域或全局作用域中访问。

var x = 10;
console.log(x); // 输出: 10

函数作用域

var 的作用域是函数级别的,而不是块级别的。这意味着 var 声明的变量在函数内的任何地方都可以访问。

function example() {if (true) {var x = 10;}console.log(x); // 输出: 10
}
example();

变量提升(Hoisting)

var 声明的变量会被提升到其作用域的顶部。这意味着变量可以在声明之前使用,但值为 undefined

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

二、let 的声明与特点

let 是 ES6 引入的变量声明方式,旨在解决 var 的一些问题。let 具有块级作用域,并且不会提升。

let 的声明

使用 let 声明的变量具有块级作用域,并且只能在声明后使用

let y = 20;
console.log(y); // 输出: 20

块级作用域

let 的作用域是块级别的,这意味着变量只能在块内访问。

if (true) {let y = 20;console.log(y); // 输出: 20
}
console.log(y); // 抛出 ReferenceError: y is not defined

不存在变量提升

使用 let 声明的变量不会提升,因此在声明之前使用会导致错误。

console.log(y); // 抛出 ReferenceError: y is not defined
let y = 20;

三、const 的声明与特点

constconstant 的缩写,表示“常量”的意思。也是 ES6 引入的,用于声明常量。const 变量声明后不能重新赋值。

const 的声明

使用 const 声明的变量必须在声明时初始化,并且不能重新赋值。

const z = 30;
console.log(z); // 输出: 30

块级作用域

const 的作用域是块级别的,与 let 类似。

if (true) {const z = 30;console.log(z); // 输出: 30
}
console.log(z); // 抛出 ReferenceError: z is not defined

常量的不可变性

使用 const 声明的变量不能重新赋值,但对于对象和数组,const 只保证引用地址不变,内部数据仍可修改。

const person = { name: 'John', age: 25 };
person.age = 26;
console.log(person); // 输出: { name: 'John', age: 26 }

四、letvarconst 的对比

作用域对比

  • var:函数作用域
  • letconst:块级作用域

变量提升对比

  • var:变量提升
  • letconst:不提升

重新赋值

  • varlet:可以重新赋值
  • const:不能重新赋值

使用建议

在现代 JavaScript 开发中,推荐优先使用 letconst。使用 const 声明常量,只有在需要重新赋值时才使用 let,尽量避免使用 var

五、实战示例

示例 1:letconst 在循环中的使用

for (let i = 0; i < 3; i++) {console.log(i); // 输出: 0, 1, 2
}
console.log(i); // 抛出 ReferenceError: i is not definedconst arr = [1, 2, 3];
for (const num of arr) {console.log(num); // 输出: 1, 2, 3
}

示例 2:使用 const 声明对象和数组

const person = {name: 'Alice',age: 28
};
person.age = 29;
console.log(person); // 输出: { name: 'Alice', age: 29 }const numbers = [1, 2, 3];
numbers.push(4);
console.log(numbers); // 输出: [1, 2, 3, 4]

示例 3:避免 var 的变量提升问题

function example() {console.log(a); // 输出: undefinedvar a = 10;console.log(a); // 输出: 10
}function betterExample() {let b;console.log(b); // 输出: undefinedb = 10;console.log(b); // 输出: 10
}example();
betterExample();

六、最佳实践

优先使用 const

尽量使用 const 声明变量,确保变量不会被重新赋值,增加代码的可读性和可维护性。

仅在必要时使用 let

只有在需要重新赋值时才使用 let,如在循环或条件语句中。

避免使用 var

尽量避免使用 var,以减少潜在的变量提升和作用域混淆问题。


在这里插入图片描述

相关文章:

【JavaScript】深入理解 `let`、`var` 和 `const`

文章目录 一、var 的声明与特点二、let 的声明与特点三、const 的声明与特点四、let、var 和 const 的对比五、实战示例六、最佳实践 在 JavaScript 中&#xff0c;变量声明是编程的基础&#xff0c;而 let、var 和 const 是三种常用的变量声明方式。本文将详细介绍这三种变量声…...

云监控(华为) | 实训学习day7(10)

水一篇。。。。。。。。。。。。。 强迫症打卡必须要满 企拓 今天没有将东西 2024/7/22 规划学习路线对于进入AI行业至关重要。以下是一个详细的学习路线规划&#xff0c;旨在帮助你从零基础到成为一名合格的AI或大数据分析师&#xff1a; 第一阶段&#xff1a;基础知识建设…...

JS_plus.key.addEventListener监听键盘按键

官方文档&#xff1a;https://www.html5plus.org/doc/zh_cn/key.html 监听事件 plus.key.addEventListener(keydown, e > {console.log("keydown: "e.keyCode) }) plus.key.addEventListener(keyup, e > {console.log("keyup: "e.keyCode) })移除事…...

对话系统(Chat)与自主代理(Agent)对撞

随着生成式AI技术的不断进步&#xff0c;关于其未来发展方向的讨论也愈发激烈。究竟生成式AI的未来是在对话系统&#xff08;Chat&#xff09;中展现智慧&#xff0c;还是在自主代理&#xff08;Agent&#xff09;中体现能力&#xff1f;这一问题引发了广泛的讨论和探索。 首先…...

sql server 连接报错error 40

做个简单的记录,造成40 的原因有很多,你的错误并不一定就是我遇到的这种情况. 错误描述: 首先我在使用ssms 工具连接的时候是可以正常连接的,也能对数据库进行操作. 在使用 ef core 连接 Sql Server 时报错: Microsoft.Data.SqlClient.SqlException (0x80131904): A network-r…...

邮件安全篇:如何防止邮件泄密?

本文主要讨论组织内部用户违反保密规定通过邮件泄密的场景。其他场景导致邮箱泄密的问题&#xff08;如账号被盗、邮件系统存在安全漏洞等&#xff09;不在本文的讨论范围。本文主要从邮件系架构设计、邮件数据防泄漏系统、建立健全规章制度、安全意识培训等方面分别探讨。 1. …...

MySQL查询优化:提升数据库性能的策略

在数据库管理和应用中&#xff0c;优化查询是提高MySQL数据库性能的关键环节。随着数据量的不断增长&#xff0c;如何高效地检索和处理数据成为了一个重要的挑战。本文将介绍一系列优化MySQL查询的策略&#xff0c;帮助开发者和管理员提升数据库的性能。 案例1: 使用索引优化查…...

vue-快速入门

Vue 前端体系、前后端分离 1、概述 1.1、简介 Vue (发音为 /vjuː/&#xff0c;类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建&#xff0c;并提供了一套声明式的、组件化的编程模型&#xff0c;可以高效地开发用户界面。…...

【网络流】——初识(最大流)

网络流-最大流 基础信息引入一些概念基本性质 最大流定义 Ford–Fulkerson 增广Edmons−Karp算法Dinic 算法参考文献 基础信息 引入 假定现在有一个无限放水的自来水厂和一个无限收水的小区&#xff0c;他们之间有多条水管和一些节点构成。 每一条水管有三个属性&#xff1a…...

【STM32嵌入式系统设计与开发---拓展】——1_10矩阵按键

这里写目录标题 1、矩阵按键2、代码片段分析 1、矩阵按键 通过将4x4矩阵按键的每一行依次设为低电平&#xff0c;同时保持其它行为高电平&#xff0c;然后读取所有列的电平状态&#xff0c;可以检测到哪个按键被按下。如果某列变为低电平&#xff0c;说明对应行和列的按键被按下…...

长期更新方法库推荐pmq-ui

# pmq-ui pmq-ui 好用方法库ui库, 欢迎您的使用 ## 安装 1. 克隆项目库到本地&#xff1a; 2. 进入项目目录&#xff1a;cd pmq-ui 3. 安装依赖&#xff1a;npm install pmq-ui ## 使用 <!-- 1. 启动应用&#xff1a; 2. 访问 [http://localhost:3000](http://localhost:300…...

<数据集>抽烟识别数据集<目标检测>

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;4860张 标注数量(xml文件个数)&#xff1a;4860 标注数量(txt文件个数)&#xff1a;4860 标注类别数&#xff1a;1 标注类别名称&#xff1a;[smoking] 使用标注工具&#xff1a;labelImg 标注规则&#xff1a;对…...

SQL Server 端口设置教程

引言 你好&#xff0c;我是悦创。 在配置 SQL Server 的过程中&#xff0c;设置正确的端口非常关键&#xff0c;因为它影响到客户端如何连接到 SQL Server 实例。默认情况下&#xff0c;SQL Server 使用 TCP 端口 1433&#xff0c;但在多实例服务器上或出于安全考虑&#xff…...

【React1】React概述、基本使用、脚手架、JSX、组件

文章目录 1. React基础1.1 React 概述1.1.1 什么是React1.1.2 React 的特点声明式基于组件学习一次,随处使用1.2 React 的基本使用1.2.1 React的安装1.2.2 React的使用1.2.3 React常用方法说明React.createElement()ReactDOM.render()1.3 React 脚手架的使用1.3.1 React 脚手架…...

k8s部署kafka集群

k8s部署kafka集群 kafka&#xff08;Kafka with KRaft&#xff09; mkdir -p ~/kafka-ymlkubectl create ns kafkacat > ~/kafka-yml/kafka.yml << EOF apiVersion: v1 kind: Service metadata:name: kafka-headlessnamespace: kafkalabels:app: kafka spec:type: C…...

(C++回溯01) 组合

77、组合 回溯题目三步走 1. 确定参数 2. 确定终止条件 3. for 循环横向遍历&#xff0c;递归纵向遍历 class Solution { public:vector<vector<int>> result;vector<int> path;void backtracking(int n, int k, int startIndex) {if(path.size() k) {…...

k8s学习笔记——安装istio的仪表盘之prometheus安装

接上一篇&#xff0c;继续安装istio的dashboard。 先到istio-1.22.0/samples/addons目录下&#xff0c;把yaml文件中的镜像仓库地址修改了&#xff0c;修改地址参考我之前写的CSDN里的镜像对照表。不然直接执行kubectl apply -f samples/addons这个命令后&#xff0c;依据会出…...

四、GD32 MCU 常见外设介绍 (7) 7.I2C 模块介绍

7.1.I2C 基础知识 I2C(Inter-Integrated Circuit)总线是一种由Philips公司开发的两线式串行总线&#xff0c;用于内部IC控制的具有多端控制能力的双线双向串行数据总线系统&#xff0c;能够用于替代标准的并行总线&#xff0c;连接各种集成 电路和功能模块。I2C器件能够减少电…...

Apollo 配置中心的部署与使用经验

前言 Apollo&#xff08;阿波罗&#xff09;是携程开源的分布式配置管理中心。 本文主要介绍其基于 Docker-Compose 的部署安装和一些使用的经验 特点 成熟&#xff0c;稳定支持管理多环境/多集群/多命名空间的配置配置修改发布实时&#xff08;1s&#xff09;通知到应用程序支…...

Perl中的设计模式革新:命令模式的实现与应用

Perl中的设计模式革新&#xff1a;命令模式的实现与应用 在面向对象编程中&#xff0c;设计模式是解决特定问题的成熟模板。命令模式作为行为设计模式之一&#xff0c;它将请求封装为对象&#xff0c;从而允许用户根据不同的请求对客户进行参数化。本文将深入探讨如何在Perl中…...

深入剖析AI大模型:大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

MySQL 部分重点知识篇

一、数据库对象 1. 主键 定义 &#xff1a;主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 &#xff1a;确保数据的完整性&#xff0c;便于数据的查询和管理。 示例 &#xff1a;在学生信息表中&#xff0c;学号可以作为主键&#xff…...

在 Spring Boot 项目里,MYSQL中json类型字段使用

前言&#xff1a; 因为程序特殊需求导致&#xff0c;需要mysql数据库存储json类型数据&#xff0c;因此记录一下使用流程 1.java实体中新增字段 private List<User> users 2.增加mybatis-plus注解 TableField(typeHandler FastjsonTypeHandler.class) private Lis…...

Linux中《基础IO》详细介绍

目录 理解"文件"狭义理解广义理解文件操作的归类认知系统角度文件类别 回顾C文件接口打开文件写文件读文件稍作修改&#xff0c;实现简单cat命令 输出信息到显示器&#xff0c;你有哪些方法stdin & stdout & stderr打开文件的方式 系统⽂件I/O⼀种传递标志位…...

软件工程 期末复习

瀑布模型&#xff1a;计划 螺旋模型&#xff1a;风险低 原型模型: 用户反馈 喷泉模型:代码复用 高内聚 低耦合&#xff1a;模块内部功能紧密 模块之间依赖程度小 高内聚&#xff1a;指的是一个模块内部的功能应该紧密相关。换句话说&#xff0c;一个模块应当只实现单一的功能…...

若依登录用户名和密码加密

/*** 获取公钥&#xff1a;前端用来密码加密* return*/GetMapping("/getPublicKey")public RSAUtil.RSAKeyPair getPublicKey() {return RSAUtil.rsaKeyPair();}新建RSAUti.Java package com.ruoyi.common.utils;import org.apache.commons.codec.binary.Base64; im…...

Spring Boot + MyBatis 集成支付宝支付流程

Spring Boot MyBatis 集成支付宝支付流程 核心流程 商户系统生成订单调用支付宝创建预支付订单用户跳转支付宝完成支付支付宝异步通知支付结果商户处理支付结果更新订单状态支付宝同步跳转回商户页面 代码实现示例&#xff08;电脑网站支付&#xff09; 1. 添加依赖 <!…...