js 里面 let 和 const的区别（js中的let）

myzbx 2025-07-03 18:18 50 浏览

在 JavaScript（包括 Vue、Node.js、前端脚本等）中，const 和 let 是用于声明变量的两种方式，它们的主要区别如下：

const vs let 的区别

特性	const	let
是否能重新赋值	不能	可以
是否能重新声明	不能	不能
作用域	块级作用域	块级作用域
常用于	常量、不变引用	可变变量

示例 1：是否能重新赋值

const name = 'Jason';
name = 'Tom';  //  报错：Assignment to constant variable.

let age = 30;
age = 31;      //  正常

示例 2：数组、对象是“引用不变”，但内容可以改

const arr = [1, 2, 3];
arr.push(4);        //  可以修改数组内容
arr = [5, 6];       //  报错：不能重新赋值为新数组

const obj = { a: 1 };
obj.a = 2;          //  可以改属性
obj = { b: 3 };     //  报错

const 限制的是「变量绑定不能变」，不是「内容不能变」。

示例 3：作用域

两者都有「块级作用域」：

{
  let x = 1;
  const y = 2;
}
// console.log(x); //  报错
// console.log(y); //  报错

Vue 中的响应式变量

const total = ref(0)

function addToTotal(val) {
  total.value += val
}

看起来 total 的值确实变了，但其实 const 这里并不是让值不能变，而是变量绑定不变，我们来深入解释一下。

Vue 中 ref 的本质

const total = ref(0)

这句话创建了一个 响应式引用对象，total 是一个对象，结构大概是：

total = {
  value: 0
}

onst 保证的是：
变量 total 这个指针 不能重新赋值，但
total.value 可以改（因为这是对象的属性）。

类比解释：

想象一下：

const box = { value: 0 }

box.value += 1   //  可以
box = { value: 100 } //  报错

正确理解

const total = ref(0) // total 绑定到这个 ref 对象
total.value += 1     // 改变的是对象内部的 value，不是重新赋值

所以，这里并不违背 const 的规则，你只是在修改对象内部的值，不是在修改 total 本身的引用。

JS 数组 Const

上一篇：JDK21新特性:Sequenced Collections
下一篇：ES6(二)let 和 const（es6 var let const区别）

js 里面 let 和 const的区别（js中的let）

const vs let 的区别

示例 3：作用域

Vue 中的响应式变量

类比解释：

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

8.7k star，一款超炫酷的动态可视化大屏项目

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿