为什么要用 const 和 let,而不是 var?

JavaScript 中有三种方式声明变量:varletconst。其中,var 是早期版本的 JavaScript 中的标准,但随着 ECMAScript 6(ES6)引入了 letconstvar 的种种问题也显现出来。今天,我们将探讨为什么你应该避免使用 var,而优先选择 constlet

var 的问题

1. 作用域问题

var 的最大问题之一是作用域是 函数作用域,而不是 块级作用域。这意味着,在 iffor 这样的代码块内使用 var 声明的变量,仍然可以在整个函数内访问。

举个例子:

function test() {if (true) {var name = 'John';}console.log(name);  // 'John'
}
test();

尽管 name 变量是在 if 语句内部声明的,但由于 var 的作用域是整个函数,所以 nameif 语句外部也能访问。

2. 变量提升

var 声明的变量会被“提升”到函数或全局作用域的顶部,这会导致一些难以察觉的错误。

function test() {console.log(age);  // undefined,而不是报错var age = 26;
}
test();

这里,虽然你期望 age 在声明前不可访问,但实际上它被提升到了函数顶部,只是没有值而已,导致打印的是 undefined

3. 多次声明不会报错

你可以在同一作用域内多次使用 var 声明相同的变量,JavaScript 也不会报错。

var age = 30;
var age = 40;  // 没有错误
console.log(age);  // 40

这种行为可能会导致不可预测的结果。

letconst 的优势

1. 块级作用域

letconst 解决了 var 作用域的问题,它们都使用 块级作用域。这意味着它们的作用域仅限于它们被声明的代码块。

if (true) {let name = 'Alice';console.log(name);  // 'Alice'
}
console.log(name);  // ReferenceError: name is not defined

在这个例子中,name 仅在 if 语句块内部可用,外部无法访问。

2. 避免提升和暂时性死区

letconst 不会像 var 那样被提升,它们会进入 暂时性死区(TDZ),即在声明之前访问会抛出错误。

console.log(age);  // ReferenceError: Cannot access 'age' before initialization
let age = 26;

3. 常量值

const 用来声明常量,一旦赋值就不能修改。这对避免意外修改变量值非常有用。

const age = 30;
age = 40;  // TypeError: Assignment to constant variable.

何时使用 letconst

  • const 优先:如果变量的值不会改变,使用 const。它可以帮助你清晰地表达意图,同时避免了修改的错误。
  • let:只有当你知道变量的值将来会发生变化时,才使用 let

for 循环中的使用

for 循环中,letvar 的行为大不相同。使用 let,每次迭代都会创建一个新的作用域,避免了 var 的问题。

// 使用 var
for (var i = 0; i < 5; ++i) {setTimeout(() => console.log(i), 0);
}
// 输出 5, 5, 5, 5, 5// 使用 let
for (let i = 0; i < 5; ++i) {setTimeout(() => console.log(i), 0);
}
// 输出 0, 1, 2, 3, 4

总结

  • 避免使用 varvar 具有不直观的作用域和提升机制,容易引发错误。
  • 优先使用 const:当变量值不会改变时,使用 const,它能清晰表达你的意图并避免修改错误。
  • 使用 let:当变量值需要改变时,使用 let,它提供了块级作用域。

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

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

相关文章

从零开始玩转TensorFlow:小明的机器学习故事 2

你好&#xff0c;TensorFlow&#xff01;——从零开始的第一个机器学习程序 1. 为什么要写这个“Hello, TensorFlow!”&#xff1f; 无论学习什么新语言或新框架&#xff0c;“Hello World!”示例都能帮助我们快速确认开发环境是否就绪&#xff0c;并掌握最基本的使用方式。对…

【Java八股文】10-数据结构与算法面试篇

【Java八股文】10-数据结构与算法面试篇 数据结构与算法面试题数据结构红黑树说一下跳表说一下&#xff1f;LRU是什么&#xff1f;如何实现&#xff1f;布隆过滤器怎么设计&#xff1f;时间复杂度&#xff1f; 排序算法排序算法及空间复杂度 数据结构与算法面试题 数据结构 红…

Docker换源加速(更换镜像源)详细教程(2025.2最新可用镜像,全网最详细)

文章目录 前言可用镜像源汇总换源方法1-临时换源换源方法2-永久换源&#xff08;推荐&#xff09;常见问题及对应解决方案1.换源后&#xff0c;可以成功pull&#xff0c;但是search会出错 补充1.如何测试镜像源是否可用2.Docker内的Linux换源教程 换源速通版&#xff08;可以直…

华为云deepseek大模型平台:deepseek满血版

华为云硅基流动使用Chatbox接入DeepSeek-R1满血版671B 1、注册&#xff1a; 华为云deepseek大模型平台注册&#xff1a;https://cloud.siliconflow.cn/i/aDmz6aVN 说明&#xff1a;填写邀请码的话邀请和被邀请的账号都会获得2000 万 Tokens&#xff1b;2个帐号间不会与其他关联…

抓包工具是什么?

抓包工具是一种用于捕获和分析网络数据包的软件或硬件设备。它可以帮助用户监控网络通信过程&#xff0c;查看网络中传输的数据内容、协议类型、源地址、目的地址等信息。以下是关于抓包工具的一些详细解释&#xff1a; 1. 主要功能 捕获数据包&#xff1a;抓包工具能够实时捕…

51c大模型~合集71

我自己的原文哦~ https://blog.51cto.com/whaosoft/12260659 #大模型推理加速技术的学习路线 EfficientQAT 可以在 41 小时内在单个 A100-80GB GPU 上完成对 2-bit Llama-2-70B 模型的量化感知训练。与全精度模型相比&#xff0c;精度仅下降了不到 3%&#xff08;69.48 v…

OpenBMC:BmcWeb实例化App

BmcWeb是OpenBMC的一个核心模块&#xff0c;对外负责响应Redfish请求&#xff0c;并且由于OpenBMC的Web使用的Redfish api&#xff0c;所以BmcWeb也是Web的后台。 1.main函数 //src\webserver_main.cpp #include "webserver_run.hpp"int main(int /*argc*/, char**…

利用AI优化可再生能源管理:Python让绿色能源更高效

利用AI优化可再生能源管理&#xff1a;Python让绿色能源更高效 引言 在全球气候变化和能源危机的背景下&#xff0c;可再生能源的利用变得尤为重要。然而&#xff0c;可再生能源的管理和优化面临诸多挑战&#xff0c;如能源生产的不稳定性和能源需求的波动性。幸运的是&#…

改BUG:Mock测试的时候,when失效

问题再现&#xff1a; 这里我写了一测试用户注册接口的测试类&#xff0c;并通过when模拟下层的服务&#xff0c;但实际上when并没有奏效&#xff0c;还是走了真实的service层的逻辑。 package cn.ac.evo.review.test;import cn.ac.evo.review.user.UserMainApplication; imp…

单片机 code RO-data RW-data ZI-data以及OTA学习

带着问题去学习&#xff1a;这些数据是什么&#xff1f;分别放在哪里&#xff0c; 是什么&#xff1a;我个人的理解 code 和RO-data 分别是代码和只读数据&#xff0c;RW-data以及ZI-data分别是读写数据和初始化数据。 codeRO-data的大小正好是所占用ROM的大小&#xff0c;RO…

什么是LoRA微调

LoRA是大模型微调方法的一种&#xff0c;它的特点是只在模型的 部分权重&#xff08;如 QKV 矩阵&#xff09; 上 添加可训练参数 通过 低秩矩阵&#xff08;AB&#xff09; 来优化参数更新 优点&#xff1a; 极大降低显存消耗&#xff08;deepseek 7B 只需 10GB&#xff09; 适…

EasyRTC低延迟通信与智能处理:论嵌入式WebRTC与AI大模型的技术融合

在当今数字化时代&#xff0c;实时通信的需求日益增长&#xff0c;视频通话作为一种高效、直观的沟通方式&#xff0c;广泛应用于各个领域。WebRTC技术的出现&#xff0c;为实现浏览器之间的实时音视频通信提供了便捷的解决方案。而基于WebRTC技术的EasyRTC视频通话SDK&#xf…

10、k8s对外服务之ingress

service和ingress的作用 service的作用 NodePort&#xff1a;会在每个节点开放一个端口&#xff0c;端口号30000-32767。 也是只能用于内网访问&#xff0c;四层转发。实现负载均衡。不能基于域名进行访问。 clusterip&#xff1a;service的默认类型&#xff0c;只能在集群…

Java数据结构---栈

目录 一、栈的概念 二、栈的基本方法 三、栈的模拟实现 四、栈的练习 1、括号匹配 2、出栈入栈次序匹配 一、栈的概念 栈是一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈顶&#xff0c;另一端称为栈底…

从CNN到Transformer:遥感影像目标检测的未来趋势

文章目录 前言专题一、深度卷积网络知识专题二、PyTorch应用与实践&#xff08;遥感图像场景分类&#xff09;专题三、卷积神经网络实践与遥感影像目标检测专题四、卷积神经网络的遥感影像目标检测任务案例【FasterRCNN】专题五、Transformer与遥感影像目标检测专题六、Transfo…

php-fpm

摘要 php-fpm(fastcgi process manager)是PHP 的FastCGI管理器&#xff0c;管理PHP的FastCGI进程&#xff0c;提升PHP应用的性能和稳定性 php-fpm是一个高性能的php FastCGI管理器&#xff0c;提供了更好的php进程管理方式&#xff0c;可以有效的控制内存和进程&#xff0c;支…

Python strip() 方法详解:用途、应用场景及示例解析(中英双语)

Python strip() 方法详解&#xff1a;用途、应用场景及示例解析 在 Python 处理字符串时&#xff0c;经常会遇到字符串前后存在多余的空格或特殊字符的问题。strip() 方法就是 Python 提供的一个强大工具&#xff0c;专门用于去除字符串两端的指定字符。本文将详细介绍 strip(…

open webui 部署 以及解决,首屏加载缓慢,nginx反向代理访问404,WebSocket后端服务器链接失败等问题

项目地址&#xff1a;GitHub - open-webui/open-webui: User-friendly AI Interface (Supports Ollama, OpenAI API, ...) 选择了docker部署 如果 Ollama 在您的计算机上&#xff0c;请使用以下命令 docker run -d -p 3000:8080 --add-hosthost.docker.internal:host-gatewa…

docker安装ros2 并在windows中显示docker内ubuntu系统窗口并且vscode编程

这里包括docker desktop安装ros2 humble hawkshill , 安装xserver(用来在windows中显示ubuntu中窗口), vscode安装插件连接docker并配置python的一系列方法 1.安装xserver 为了能方便的在windows中显示ubuntu内的窗口,比如rqt窗口 参考文章:https://www.cnblogs.com/larva-zhh…

VMware安装Centos 9虚拟机+设置共享文件夹+远程登录

一、安装背景 工作需要安装一台CentOS-Stream-9的机器环境&#xff0c;所以一开始的安装准备工作有&#xff1a; vmware版本&#xff1a;VMware Workstation 16 镜像版本&#xff1a;CentOS-Stream-9-latest-x86_64-dvd1.iso &#xff08;kernel-5.14.0&#xff09; …