ES6变量黑话指南:从"渣男"var到"钢铁直男"const的进化史

一、ES6:JavaScript的成年礼

如果把JavaScript比作一个程序员,那ES6就是它去民政局把身份证年龄从"5"改成"18"的重要时刻。2015年这场名为ECMAScript 2015的"成人礼",让JS终于拥有了现代编程语言的标配装备:

  • 箭头函数(让this不再像女朋友的心思一样难猜)
  • 解构赋值(比拆快递还爽的数据拆包体验)
  • class语法(假装自己是Java的cosplay道具)
  • 模块化系统(代码终于不用挤在同一个文件里抢厕所)

但今天我们要重点聊聊变量界的三位顶流------let、const和他们那个名声不太好的前辈var。


二、var:编程界的"世纪渣男"

1. 作用域迷惑行为

用var声明变量就像在电梯里放屁:

javascript 复制代码
function elevator() {
    if(true) {
        var secret = "猜猜我在哪";
    }
    console.log(secret); // 居然能输出!就像屁味弥漫整个电梯
}

这个老六永远在函数作用域 里搞事情,完全无视if/for等代码块的边界,堪称变量界的"中央空调"。

2. 变量提升的鬼畜操作

javascript 复制代码
console.log(girlfriend); // 输出undefined而不是报错!
var girlfriend = "不存在的";

这种"先上车后补票"的行为,就像在简历上写"精通量子物理",等入职了才开始看《时间简史》。JS引擎会把var声明悄悄提到作用域顶端,但赋值留在原地。

3. 重复声明的海王本色

javascript 复制代码
var salary = 3000;
var salary = 30000; // HR:你上个月的工资条是P的?

这种随意覆盖的特性,让代码维护者想给前任var寄刀片。


三、let:有原则的暖男

1. 块级作用域:自带结界

javascript 复制代码
{
    let wallet = 200;
    console.log(wallet); // 正常输出
}
console.log(wallet); // 报错!钱包离开代码块立即消失

这像极了当代年轻人的"月光结界"------工资只在发薪日所在周有效。

2. 暂时性死区:拒绝暧昧

javascript 复制代码
console.log(bonus); // 报错!
let bonus = "老板画的饼";

在声明之前的区域称为"暂时性死区",比女朋友查手机还严格,杜绝任何暧昧操作。

3. for循环的正确打开方式

javascript 复制代码
for(let i=0; i<3; i++){
    setTimeout(()=>console.log(i), 100); // 输出0,1,2
}

用let时每个i都有自己的独立包间,而var就像把i扔进春运火车车厢,最后所有人都挤在同一个值里。


四、const:钢铁直男的倔强

1. 基本类型:焊死车门

javascript 复制代码
const PI = 3.14;
PI = 3.1415926; // 报错!比数学老师还严格

声明时必须立即赋值,后续修改直接触发红色警报。

2. 复杂类型:防君子不防小人

javascript 复制代码
const girlfriend = {
    name: '初音未来'
};
girlfriend.name = '洛天依'; // 居然可以!

这就像给你的对象加上"防偷家"结界:不能换人,但允许整容(修改属性)。要用Object.freeze()才能彻底锁死。

3. 命名艺术的仪式感

javascript 复制代码
const MAX_AGE = 150; // 全大写+下划线,赛博朋克の浪漫
const SECRET_KEY = '程序员防脱发指南';

大写常量就像程序员的摩斯密码,看到就知道是神圣不可侵犯的领域。


五、变量三剑客使用手册

关键字 适用场景 危险操作
var 写上古代码/故意制造bug/训练新人抗压能力 在循环里声明变量
let 循环计数器/需要修改的变量 在同一个作用域重复声明
const 配置项/函数表达式/引入模块 给对象换"皮囊"(重新赋值)

六、当代变量生存法则

  1. const优先原则:像守护工资卡密码一样守护常量
  2. let次之策略:需要修改的变量用let,像给程序装可变色车窗
  3. var考古模式:除非维护祖传代码,否则当作博物馆展品
  4. 作用域最小化:变量活动范围要像程序员社交圈一样精简

下次写代码时,不妨把变量声明当作给不同角色分配通行证:const是VIP终身会员卡,let是限时通行证,而var...建议直接送进变量历史博物馆。

相关推荐
小蜜蜂嗡嗡2 小时前
【flutter对屏幕底部有手势区域(如:一条横杠)导致出现重叠遮挡】
前端·javascript·flutter
伍哥的传说3 小时前
Vue 3 useModel vs defineModel:选择正确的双向绑定方案
前端·javascript·vue.js·definemodel对比·usemodel教程·vue3.4新特性·vue双向绑定
胡gh8 小时前
页面卡成PPT?重排重绘惹的祸!依旧性能优化
前端·javascript·面试
胡gh8 小时前
简单又复杂,难道只能说一个有箭头一个没箭头?这种问题该怎么回答?
javascript·后端·面试
言兴8 小时前
# 深度解析 ECharts:从零到一构建企业级数据可视化看板
前端·javascript·面试
山有木兮木有枝_8 小时前
TailWind CSS
前端·css·postcss
一只叫煤球的猫9 小时前
看到同事设计的表结构我人麻了!聊聊怎么更好去设计数据库表
后端·mysql·面试
烛阴9 小时前
TypeScript 的“读心术”:让类型在代码中“流动”起来
前端·javascript·typescript
杨荧9 小时前
基于Python的农作物病虫害防治网站 Python+Django+Vue.js
大数据·前端·vue.js·爬虫·python
Moment10 小时前
毕业一年了,分享一下我的四个开源项目!😊😊😊
前端·后端·开源