变量最基础的作用是保存数据,让你可以在代码的不同位置重复使用这个数据,而不用反复写相同的值。
// 没有变量:每次计算都要写固定值,修改时要改多处
console.log(9.9 * 3); // 计算3件9.9元商品的总价
console.log(9.9 * 5); // 计算5件的总价
// 如果价格调整为10.9,需要修改所有9.9的位置
// 有变量:只需修改变量值,所有使用处自动更新
const price = 9.9; // 存储商品单价
console.log(price * 3); // 29.7
console.log(price * 5); // 49.5
// 价格调整时,只改这一行:const price = 10.9;
变量(let声明的)可以随时修改值,让程序能根据不同条件、用户输入等动态调整。
// 模拟用户购物车数量变化
let cartCount = 0; // 初始购物车为空
console.log("购物车数量:", cartCount); // 0
// 用户添加商品
cartCount = cartCount + 1;
console.log("购物车数量:", cartCount); // 1
// 用户又添加2件商品
cartCount += 2;
console.log("购物车数量:", cartCount); // 3
用有意义的变量名代替纯数值 / 字符串,让代码 “自解释”,不用额外注释就能看懂逻辑。
// 无变量:一堆数字,看不懂含义
console.log((80 + 95 + 90) / 3); // 88.333...
// 有变量:语义清晰,一眼看懂是计算平均分
const mathScore = 80;
const englishScore = 95;
const chineseScore = 90;
const averageScore = (mathScore + englishScore + chineseScore) / 3;
console.log("平均分:", averageScore); // 88.333...
通过变量的作用域(全局 / 函数 / 块级),可以控制数据的访问范围,避免不同代码段之间的变量冲突。
// 全局变量:整个脚本可用
let userName = "小明";
function showUser() {
// 函数内变量:仅函数内可用,不会和外部冲突
let userAge = 18;
console.log(userName, userAge); // 小明 18
}
showUser();
// console.log(userAge); // 报错:userAge未定义(外部无法访问函数内变量)
如果完全不用变量,代码会变得:
- 难以维护:修改一个值需要改遍所有出现的位置;
- 难以理解:一堆 “魔法值”(无意义的数字 / 字符串),无法直观判断含义;
- 无法动态运行:程序只能执行固定逻辑,无法响应用户操作、数据变化等。
- 核心价值:变量是存储和管理数据的 “容器”,实现数据的复用和动态修改;
- 代码层面:让代码更易读、易维护,通过语义化命名提升可读性;
- 逻辑层面:控制数据的访问范围,支撑程序的动态逻辑(如用户交互、条件判断)。