从0开始学习JavaScript--JavaScript 中 `let` 和 `const` 的区别及最佳实践

在JavaScript中,letconst 是两个用于声明变量的关键字。尽管它们看起来很相似,但它们之间有一些重要的区别。本篇博客将深入探讨 letconst 的用法、区别,并提供一些最佳实践,以确保在代码中正确使用它们。

letconst 的基本用法

let 的基本用法

let 声明一个变量,并在之后重新赋值。它具有块级作用域,适用于那些需要在程序执行过程中改变的变量。

let count = 10;if (true) {let count = 20; // 块级作用域console.log(count); // 输出: 20
}console.log(count); // 输出: 10

在这个例子中,let 关键字在不同的块中使用相同的变量名 count,而不会互相干扰。

const 的基本用法

const 用于声明一个常量,其值在声明后不能被修改。它同样也具有块级作用域。

const pi = 3.14;if (true) {const pi = 3.1415926535; // 块级作用域console.log(pi); // 输出: 3.1415926535
}console.log(pi); // 输出: 3.14

在这个例子中,尝试修改 pi 的值会导致错误。const 常用于声明不应该被重新赋值的常量,例如数学常数、配置值等。

区别和注意事项

1. 变量重新赋值

let 允许变量重新赋值,而 const 不允许。

let x = 10;
x = 20; // 合法const y = 30;
y = 40; // 报错: Assignment to constant variable

使用 const 声明的变量在声明后不能再次赋值,这有助于确保常量的不可变性。

2. 块级作用域

letconst 都具有块级作用域,这意味着它们在 {} 内声明的变量只在该块中可见。

{let blockScoped = 'I am a block scoped variable';const alsoBlockScoped = 'I am also a block scoped variable';
}console.log(blockScoped); // 报错: blockScoped is not defined
console.log(alsoBlockScoped); // 报错: alsoBlockScoped is not defined

在这个例子中,blockScopedalsoBlockScoped 变量只在 {} 内部可见,尝试在外部访问会导致错误。

3. 提升

letconst 都不会被提升到作用域的顶部。它们在声明语句之前是不可访问的。

console.log(a); // 报错: Cannot access 'a' before initialization
let a = 5;console.log(b); // 报错: Cannot access 'b' before initialization
const b = 10;

在这个例子中,尝试在声明语句之前访问变量 ab 会导致错误。

最佳实践

1. 优先使用 const

在编写代码时,尽量使用 const 来声明变量。这有助于确保变量不会被意外地重新赋值,从而提高代码的可维护性。

// 不好的实践
let radius = 10;
let pi = 3.14;
let area = pi * radius * radius;// 好的实践
const radius = 10;
const pi = 3.14;
const area = pi * radius * radius;

2. 使用 let 仅在需要重新赋值时

如果确实需要在后续代码中重新赋值,才使用 let。这可以使代码更易于理解,因为读者会知道这个变量可能会在后续的代码中发生变化。

// 不好的实践
const totalPrice = calculateTotalPrice();
let discount = 0;if (userIsPremium()) {discount = 0.2;
}const finalPrice = totalPrice - (totalPrice * discount);// 好的实践
const totalPrice = calculateTotalPrice();
let discount = userIsPremium() ? 0.2 : 0;
const finalPrice = totalPrice - (totalPrice * discount);

在这个例子中,discount 变量只在用户是高级用户时才会改变,因此使用 let 是合适的。

3. 使用 const 避免不必要的变量

避免使用 let 来声明不必要的变量。使用 const 声明的常量更容易被理解,而且它们的不可变性可以提高代码的可靠性。

// 不好的实践
let temp = 0;
let counter = 0;while (counter < 10) {temp += counter;counter++;
}// 好的实践
const temp = Array.from({ length: 10 }, (_, index) => index).reduce((acc, val) => acc + val, 0);

在这个例子中,使用 const 和函数式编程的方法更清晰地表达了代码的目的。

总结

在JavaScript中,letconst 是两个关键字,用于声明变量。let 允许变量重新赋值,适用于需要在程序执行过程中改变的变量,而 const 用于声明常量,其值在声明后不可修改。最佳实践中,建议优先使用 const,以确保变量不被意外地重新赋值,提高代码的可维护性。使用 let 仅在确实需要在后续代码中重新赋值时,避免不必要的变量。通过正确使用这两个关键字,我们可以编写出更具可读性、可维护性和稳健性的JavaScript代码。总体而言,letconst 的灵活运用有助于提高代码的可靠性和清晰度,为JavaScript开发提供了更好的编程体验。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/183158.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

企业微信http协议接口调用,发送视频号消息

产品说明 一、 hook版本&#xff1a;企业微信hook接口是指将企业微信的功能封装成dll&#xff0c;并提供简易的接口给程序调用。通过hook技术&#xff0c;可以在不修改企业微信客户端源代码的情况下&#xff0c;实现对企业微信客户端的功能进行扩展和定制化。企业微信hook接口…

jenkins pipeline 运行超时后强制停止

在Jenkins中&#xff0c;Pipeline是一种用于定义持续集成/持续交付&#xff08;CI/CD&#xff09;流程的工具。有时候&#xff0c;Pipeline的执行可能会超时&#xff0c;需要强制停止。 要在Jenkins Pipeline中设置超时&#xff0c;并在超时后强制停止运行&#xff0c;可以使用…

【NGINX--9】复杂的媒体串流

1、传输 MP4 和 FLV 格式的文件 需要流式传输 MP4 或 FLV 格式的数字媒体。 解决方案 指定一个 HTTP location 代码块&#xff0c;提供 .mp4 或 .flv 格式的视频。NGINX 将使用渐进式 下载或 HTTP 伪流技术流式传输媒体并支持搜索&#xff1a; http {server {# ...location /…

2.2 - 网络协议 - IP协议,IP地址划分,报文格式,数据分片,抓包实战

「作者主页」&#xff1a;士别三日wyx 「作者简介」&#xff1a;CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「推荐专栏」&#xff1a;对网络安全感兴趣的小伙伴可以关注专栏《网络安全入门到精通》 IP协议 1、IP地址划分2、IP协议报文格式3、IP协议数…

RedisTemplate的配置和讲解以及和StringRedisTemplate的区别

本文主要讲redisTempalte的几种常用的序列化方式 string&#xff0c;我们大部分情况下都希望存入redis的数据可读性强一些&#xff0c;并且value也不总是一个规则的类型&#xff0c;所以这里也是不用json序列化的原因&#xff0c;可以更自由方便&#xff0c;下边提供配置方法 …

useEffect和useMemo

每次点击》状态发生改变会执行Example()函数&#xff0c; useEffect会执行吗&#xff1f;只有数组里传了count才会执行&#xff0c;没有的话不会执行&#xff08;但页面中的state还是响应式的&#xff0c;只是不会执行useEffect里面的内容&#xff09;。 useEffect里所执行的…

深度学习框架:Pytorch与Keras的区别与使用方法

☁️主页 Nowl &#x1f525;专栏《机器学习实战》 《机器学习》 &#x1f4d1;君子坐而论道&#xff0c;少年起而行之 文章目录 Pytorch与Keras介绍 Pytorch 模型定义 模型编译 模型训练 输入格式 完整代码 Keras 模型定义 模型编译 模型训练 输入格式 完整代…

渗透测试考核(靶机1)

信息收集 主机发现 nbtscan -r 172.16.17.0/24 发现在局域网内&#xff0c;有两台主机名字比较可疑&#xff0c;177和134&#xff0c;猜测其为目标主机&#xff0c;其余的应该是局域网内的其他用户&#xff0c;因为其主机名字比较显眼&#xff0c;有姓名的拼音和笔记本电脑的…

【Python】SqlmapAPI调用实现自动化SQL注入安全检测

文章目录 简单使用优化 应用案例&#xff1a;前期通过信息收集拿到大量的URL地址&#xff0c;这个时候可以配置sqlmapAP接口进行批量的SQL注入检测 &#xff08;SRC挖掘&#xff09; 查看sqlmapapi使用方法 python sqlmapapi.py -h启动sqlmapapi 的web服务&#xff1a; 任务流…

【论文笔记】SDCL: Self-Distillation Contrastive Learning for Chinese Spell Checking

文章目录 论文信息Abstract1. Introduction2. Methodology2.1 The Main Model2.2 Contrastive Loss2.3 Implementation Details(Hyperparameters) 3. Experiments代码实现个人总结值得借鉴的地方 论文信息 论文地址&#xff1a;https://arxiv.org/pdf/2210.17168.pdf Abstrac…

游戏APP接入哪些广告类型

当谈到游戏应用程序&#xff08;APP&#xff09;接入广告时&#xff0c;选择适合用户体验和盈利的广告类型至关重要。游戏开发者通常考虑以下几种广告类型&#xff1a; admaoyan猫眼聚合 横幅广告&#xff1a; 这些广告以横幅形式显示在游戏界面的顶部或底部。它们不会打断游戏…

idea doc 注释 插件及使用

开启rendered view https://blog.csdn.net/Leiyi_Ann/article/details/124145492 生成doc https://blog.csdn.net/qq_42581682/article/details/105018239 把注释加到类名旁边插件 https://blog.csdn.net/qq_30231473/article/details/128825306

解决QT信号在信号和槽连接前发出而导致槽函数未调用问题

1.使用QMetaObject::invokeMethod 当使用 QMetaObject::invokeMethod 将函数放入事件队列时&#xff0c;该函数会在适当时机被执行&#xff0c;然后被从事件队列中移除。 "适当时机" 指的是函数被安排在事件队列中&#xff0c;等待事件循环处理时机。这个时机取决于…

聚类分析例题 (多元统计分析期末复习)

例一 动态聚类&#xff0c;K-means法&#xff0c;随机选取凝聚点&#xff08;题目直接给出&#xff09; 已知5个样品的观测值为&#xff1a;1&#xff0c;4&#xff0c;5&#xff0c;7&#xff0c;11。试用K均值法分为两类(凝聚点分别取1&#xff0c;4与1&#xff0c;11) 解&…

找不到 sun.misc.BASE64Decoder ,sun.misc.BASE64Encoder 类

找不到 sun.misc.BASE64Decoder &#xff0c;sun.misc.BASE64Encoder 类 1. 现象 idea 引用报错 找不到对应的包 import sun.misc.BASE64Decoder; import sun.misc.BASE64Encoder;2. 原因 因为sun.misc.BASE64Decoder和sun.misc.BASE64Encoder是Java的内部API&#xff0c;通…

oracle java.sql.SQLException: Invalid column type: 1111

1.遇到的问题 org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.type.TypeException: Could not set parameters for mapping: ParameterMapping{propertyuuid, modeIN, javaTypeclass java.lang.String, jdbcTypenull, numericScalenull, r…

VR虚拟教育展厅,为教学领域开启创新之路

线上虚拟展厅是一项全新的展示技术&#xff0c;可以为参展者带来不一样的观展体验。传统的实体展览存在着空间限制、时间限制以及高昂的成本&#xff0c;因此对于教育领域来说&#xff0c;线上虚拟教育展厅的出现&#xff0c;可以对传统教育方式带来改革&#xff0c;凭借强大的…

An illegal reflective access operation has occurred问题记录

报错 2023-11-30T01:08:18.7440800 [ERROR] [system.err] WARNING: An illegal reflective access operation has occurred 2023-11-30T01:08:18.7450800 [ERROR] [system.err] WARNING: Illegal reflective access by com.intellij.ui.JreHiDpiUtil to method sun.java2d.Sun…

ORA-00837: Specified value of MEMORY_TARGET greater than MEMORY_MAX_TARGET

有个11g rac环境&#xff0c;停电维护后&#xff0c;orcl1正常启动了&#xff0c;orcl2启动报错如下 SQL*Plus: Release 11.2.0.4.0 Production on Wed Nov 29 14:04:21 2023 Copyright (c) 1982, 2013, Oracle. All rights reserved. Connected to an idle instance. SYS…

1091 Acute Stroke (三维搜索)

题目可能看起来很难的样子&#xff0c;但是看懂了其实挺简单的。&#xff08;众所周知&#xff0c;pat考察英文水平&#xff09; 题目意思大概是&#xff1a;给你一个L*M*N的01长方体&#xff0c;求全为1的连通块的总体积大小。&#xff08;连通块体积大于T才计算在内&#xf…