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

news2025/6/30 1:05:50

在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.coloradmin.cn/o/1269727.html

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

相关文章

36 - 电商系统表设计优化案例分析

如果在业务架构设计初期&#xff0c;表结构没有设计好&#xff0c;那么后期随着业务以及数据量的增多&#xff0c;系统就很容易出现瓶颈。如果表结构扩展性差&#xff0c;业务耦合度将会越来越高&#xff0c;系统的复杂度也将随之增加。这一讲我将以电商系统中的表结构设计为例…

iOS NSDate的常用API

目录 一、创建日期 1.获取当前时间 2.当前时间指定秒数之后/前的时间 3.指定日期之后/后的时间 4.2001年之后/前指定秒数的时间 5.1970年之后/后指定秒数的时间 二、初始化日期 1.init 2.时间间指定秒数的时间 3.指定时间指定秒数之前/后的时间 4.2001年指定秒数之后…

网络相关-面试高频

网络 当前的应用系统主要分两大类&#xff0c;一类是C/S&#xff08;Client/Server&#xff09;客户端/服务器架构的&#xff0c;一类是B/S&#xff08;Browser/Server&#xff09;浏览器/服务器架构的[3]&#xff0c;例如&#xff1a;PC上安装的QQ程序是典型的C/S架构中的客户…

C# Onnx 阿里达摩院开源DAMO-YOLO目标检测

效果 模型信息 Inputs ------------------------- name&#xff1a;images tensor&#xff1a;Float[1, 3, 192, 320] --------------------------------------------------------------- Outputs ------------------------- name&#xff1a;output tensor&#xff1a;Float…

人工智能-优化算法之动量法

对于嘈杂的梯度&#xff0c;我们在选择学习率需要格外谨慎。 如果衰减速度太快&#xff0c;收敛就会停滞。 相反&#xff0c;如果太宽松&#xff0c;我们可能无法收敛到最优解。 泄漏平均值 小批量随机梯度下降作为加速计算的手段。 它也有很好的副作用&#xff0c;即平均梯度…

HMM(Hidden Markov Model)详解——语音信号处理学习(三)(选修一)

参考文献&#xff1a; Speech Recognition (Option) - HMM哔哩哔哩bilibili 2020 年 3月 新番 李宏毅 人类语言处理 独家笔记 HMM - 6 - 知乎 (zhihu.com) 隐马尔可夫&#xff08;HMM)的解码问题维特比算法 - 知乎 (zhihu.com) 本次省略所有引用论文 目录 一、介绍 二、建模单…

解决uview中uni-popup弹出层不能设置高度问题

开发场景&#xff1a;点击条件筛选按钮&#xff0c;在弹出的popup框中让用户选择条件进行筛选 但是在iphone12/13pro展示是正常&#xff0c;但是切换至其他手机型号就填充满了整个屏幕&#xff0c;需要给这个弹窗设置一个固定的高度 iphone12/13pro与其他型号手机对比 一开始…

关于使用若依,并不会自动分页的解决方式

关于使用若依,并不会自动分页的解决方式 如果只是单纯的使用一次查询list,并不会触发这个bug 例如: 但是我们如果对里面的数据进行调整修改的话就会触发这个bug 例如: 此时可以看到我对数据进行了转换!!!,这时如果超出数据10条,实际我们拿到的永远是10条,具体原因这里就不展…

ora.LISTENER.lsnr状态为Not All Endpoints Registered

客户的监控反馈有个监听无法连接&#xff0c;登录环境检查发现ora.LISTENER.lsnr的状态为Not All Endpoints Registered&#xff0c;如下 [rootdb2 ~]# crsctl status res -t -------------------------------------------------------------------------------- NAME …

什么是requestIdleCallback?和requestAnimationFrame有什么区别?

什么是requestIdleCallback? 我们都知道React 16实现了新的调度策略(Fiber), 新的调度策略提到的异步、可中断&#xff0c;其实就是基于浏览器的 requestIdleCallback和requestAnimationFrame两个API。 在 JavaScript 中&#xff0c;requestIdleCallback 是一个用于执行回调函…

Go 谈论了解Go语言

一、引言 Go的历史回顾 Go语言&#xff08;通常被称为Go或Golang&#xff09;由Robert Griesemer、Rob Pike和Ken Thompson在2007年开始设计&#xff0c;并于2009年正式公开发布。这三位设计者都曾在贝尔实验室工作&#xff0c;拥有丰富的编程语言和操作系统研究经验。Go的诞生…

数据结构day6作业

初次进入len100;if(resuillen)不符合条件,执行resultcompetu_date(arr,--len),从此处开始递归. 直到len0: 此时len0; ---result0; ---return arr[0]1; 上一层len1; ---result1---执行语句return (result%2)?(result arr[len]):((result 1)*arr[len]);得到return 1arr[1]3 …

visionOS空间计算实战开发教程Day 10 照片墙

本例选择了《天空之城》的25张照片&#xff0c;组成5x5的照片墙&#xff09;。首先我们在setupContentEntity方法中构建了一个纹理数组&#xff0c;将这25张照片添加到数组images中。其中封装了setup方法&#xff0c;借助于visionOS对沉浸式空间的支持&#xff0c;我们创建了三…

解决:ModuleNotFoundError: No module named ‘qt_material‘

解决&#xff1a;ModuleNotFoundError: No module named ‘qt_material’ 文章目录 解决&#xff1a;ModuleNotFoundError: No module named qt_material背景报错问题报错翻译报错位置代码报错原因解决方法今天的分享就到此结束了 背景 在使用之前的代码时&#xff0c;报错&…

基于asp.net 消防安全宣传网站设计与实现

目 录 1 绪论 1 1.&#xff11;课题背景 1 1.2 目的和意义 1 1.3主要研究内容 1 1.4 组织结构 2 2 可行性分析 3 2.1技术可行性 3 2.2经济可行性 3 2.3操作可行性 3 2.4系统开发环境 4 3 需求分析 7 3.1性能分析 7 3.2业务流程分析 7 3.3数据流程分析 9 4 系统设计 11 4.1系统…

drawio 流程图以图片保存

随笔记录 目录 1. drawio 介绍 2. 绘制流程图以白底图片保存 2.1 流程图原始图​编辑 2.2 修改配置 2.3 流程图以图片保存 2.4 图片保存后效果展示 1. drawio 介绍 是一款非常强大的开源在线的流程图编辑器&#xff0c;支持绘制各种形式的图表&#xff0c;提供了 Web…

Leetcode2336 无限集中的最小数字

题目&#xff1a; 现有一个包含所有正整数的集合 [1, 2, 3, 4, 5, ...] 。 实现 SmallestInfiniteSet 类&#xff1a; SmallestInfiniteSet() 初始化 SmallestInfiniteSet 对象以包含 所有 正整数。int popSmallest() 移除 并返回该无限集中的最小整数。void addBack(int nu…

[node]Node.js事件

[node]Node.js事件 EventEmitter属性方法error 事件 实例应用简单实例onceremoveListenerlistenerCounterror 事件完整实例 继承 事件循环事件驱动程序 Node.js 所有的异步 I/O 操作在完成时都会发送一个事件到事件队列 Node.js 里面的许多对象都会分发事件&#xff1a;一个 n…

从0开始学习JavaScript--JavaScript 单例模式

单例模式是一种常见的设计模式&#xff0c;它保证一个类仅有一个实例&#xff0c;并提供一个全局访问点。在 JavaScript 中&#xff0c;单例模式通常用于创建唯一的对象&#xff0c;以确保全局只有一个实例。本文将深入探讨单例模式的基本概念、实现方式&#xff0c;以及在实际…