news 2026/4/23 14:48:25

JavaScript 变量声明最佳实践

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
JavaScript 变量声明最佳实践

使用const 作为变量赋值,这是一个非常好的习惯!在现代前端开发(尤其是 Vue/React 项目)中,“默认使用const,只有必须修改时才用let是公认的最佳实践。

不仅没有问题,反而是在遵循行业标准。

不过,作为一个开发者,我们需要深入理解const到底锁住了什么,否则在处理**对象(Object)数组(Array)**时可能会产生误解。

以下是关于const你必须知道的几个核心点:

1. 最大的误区:const并不代表“值不能变”

很多初学者认为const定义的东西就是“常量”,永远不能改。这是不准确的。

  • 对于基础类型(String, Number, Boolean):是的,你不能修改它的值。
  • 对于引用类型(Object, Array):const锁住的只是内存地址(引用),而不是里面的内容。

代码演示:

// ✅ 基础类型:彻底锁死constscore=100;score=101;// ❌ 报错:Assignment to constant variable.// ⚠️ 引用类型:锁地址,不锁内容constuser={name:"Ming",age:18};// ✅ 这样是允许的!(修改内容)user.age=19;console.log(user.age);// 19// ✅ 这样也是允许的!(新增属性)user.gender="male";// ❌ 这样是禁止的!(修改地址/重新赋值)user={name:"Jack"};// 报错

比喻:
const就像是你给了变量一个房子的地址

  • 你不能把这个变量指向另一个房子(重新赋值)。
  • 但是你可以随意装修这个房子里的家具(修改属性)。

2. Vue 3 中的const

在你之前的 Vue 代码中,你可能会疑惑:为什么响应式数据要用const

// Vue 3 常见写法constcount=ref(0);conststate=reactive({list:[]});
  • 为什么refconst

  • 因为ref返回的是一个对象(RefImpl)。

  • 我们修改的是count.value = 1(修改房子里的家具)。

  • 我们永远不会写count = ref(1)(换房子),这样会丢失响应性。

  • 为什么reactiveconst

  • 同理,reactive返回的是一个 Proxy 对象。我们只修改里面的属性,不修改对象本身。

结论:在 Vue 3 中,95% 的响应式变量定义都应该用const


3. 什么时候const会出问题?(必须用let的场景)

只有当你明确需要**“重新赋值”**(Reassign)的时候,const才会报错,这时你需要换成let

场景 A:基本类型的累加/切换
// ❌ 错误constisShow=false;isShow=true;// 报错// ✅ 正确letisShow=false;isShow=true;
场景 B:for 循环的索引
// ❌ 错误for(consti=0;i<5;i++){// i++ 试图修改 i,导致报错}// ✅ 正确for(leti=0;i<5;i++){...}// ✅ 特例:for...of 是可以的// 因为每次循环都会创建一个新的 const 作用域,而不是修改同一个变量for(constitemoflist){...}

4. 总结:黄金法则

  1. **首选const**:默认所有变量都用const。这能告诉阅读代码的人:“这个变量的引用不会变”,代码可读性更强,也更安全。
  2. **次选let**:如果你写代码时发现报错说Assignment to constant variable,或者你明确知道这个变量稍后会被x = y这样重新赋值,再把它改成let
  3. **永不用var**:把它扫进历史的垃圾堆。var有变量提升(Hoisting)和作用域泄露的问题,是 bug 之源。

一句话:只要记住const对象是可以改属性的就行。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/23 14:44:35

LSUN数据集实战指南:从入门到精通的MindSpore解决方案

LSUN数据集实战指南&#xff1a;从入门到精通的MindSpore解决方案 【免费下载链接】diffusers-cd_bedroom256_l2 项目地址: https://ai.gitcode.com/hf_mirrors/openai/diffusers-cd_bedroom256_l2 你遇到的数据加载难题是什么&#xff1f; 作为一名计算机视觉开发者&…

作者头像 李华
网站建设 2026/4/23 17:03:11

EmotiVoice语音平滑处理技术提升听感舒适度

EmotiVoice语音平滑处理技术提升听感舒适度 在虚拟主播深夜直播、智能助手温柔提醒日程、游戏角色因剧情转折而情绪爆发的今天&#xff0c;我们对“声音”的期待早已超越了简单的信息传递。用户不再满足于“能说话”&#xff0c;而是要求语音具备情感温度、个性辨识与自然流畅的…

作者头像 李华
网站建设 2026/4/16 7:08:25

EmotiVoice与VITS对比分析:两者适用场景有何不同?

EmotiVoice与VITS对比分析&#xff1a;两者适用场景有何不同&#xff1f; 在AI语音合成技术迅速普及的今天&#xff0c;我们早已不再满足于“能说话”的机器。无论是虚拟主播的一句带笑的开场白&#xff0c;还是智能助手轻声安慰的温柔语调&#xff0c;用户期待的是有情绪、有个…

作者头像 李华
网站建设 2026/4/20 1:59:54

2025下半年软件设计师考前几页纸

该资料是软件设计师考试的核心备考精华&#xff0c;涵盖计算机组成与体系结构、操作系统、程序设计语言基础、数据结构、算法基础、系统开发基础、项目管理、面向对象技术、数据库系统、计算机网络、信息安全、知识产权与标准化12 大核心模块&#xff0c;聚焦各模块高频考点、关…

作者头像 李华
网站建设 2026/4/21 2:48:31

EmotiVoice语音情感分类准确率实测:识别一致性达87%

EmotiVoice语音情感分类准确率实测&#xff1a;识别一致性达87% 在虚拟主播的直播中&#xff0c;一句“我好开心啊&#xff01;”如果听起来语气平淡、毫无波澜&#xff0c;观众立刻会感到违和。同样&#xff0c;在智能客服系统里&#xff0c;面对用户投诉时仍用机械冷漠的语调…

作者头像 李华
网站建设 2026/4/20 19:40:05

源泉设计CAD插件终极指南:免费快速提升制图效率

源泉设计CAD插件终极指南&#xff1a;免费快速提升制图效率 【免费下载链接】源泉设计CAD插件下载及使用教程 本仓库提供**源泉设计CAD插件**的下载资源&#xff0c;并附带详细的使用教程。源泉设计CAD插件&#xff08;源泉建筑与装饰设计CAD工具箱&#xff09;是一款完全免费且…

作者头像 李华