Skip to main content

如果你刚开始学 JavaScript，脑子里是不是也冒出过这样的问号：

  • “为啥声明变量有三种写法？”
  • “为啥 const 明明是常量，还能改？”
  • “为啥我用 var 写的变量会莫名其妙跑出来？”

今天我们就来解决这些「变量三兄弟」之间的江湖恩怨。

🧙‍♂️ var：江湖老大哥，脾气有点怪​

var name = "老王";
console.log(name); // 老王

✅ 好处：​

  • 使用简单，几乎所有 JS 环境都支持（ES3 开始就有）。

❌ 但是：​

  1. 可以重复声明，不会报错

    var name = "张三";
    var name = "李四";
    console.log(name); // 李四

  2. 变量提升：你以为你没声明，其实 JS 已经声明了

    console.log(age); // undefined（不是报错哦）
    var age = 30;

  3. 没有块级作用域

    if (true) {
      var a = 10;
    }
    console.log(a); // 10

🕶️ let：新时代打工人，规矩但灵活​

let city = "宁波";
console.log(city); // 宁波

✅ 优点：​

  • 有块级作用域（大括号包起来的地方就是它的世界）
  • 不允许重复声明（更安全）

❗注意：​

  • 有“变量提升”，但不能在声明前使用（暂时性死区）
console.log(food); // ❌ 报错
let food = "火锅";

🧊 const：自带冷漠气质的“铁头娃”​

const PI = 3.14;

✅ 特性：​

  • 必须立即赋值
  • 不能重新赋值

❗注意：对象属性可改，数组元素也能动​

const obj = { name: "小猫" };
obj.name = "小狗"; // ✅

const list = [1, 2, 3];
list.push(4); // ✅

🧪 实战演练​

function test() {
  if (true) {
    var a = 1;
    let b = 2;
    const c = 3;
  }
  console.log(a); // 1
  console.log(b); // ReferenceError
  console.log(c); // ReferenceError
}

🎯 小结​

特性varletconst
块级作用域❌✅✅
可重复声明✅❌❌
可修改✅✅❌（指针）
推荐场景不推荐一般变量常量

🧠 你可能会问​

Q：为什么 const 明明是常量，里面的对象还能变？

因为 const 限制的是“变量不能指向别的东西”，而不是“变量指向的内容不能改”。

🧩 小测验​

  1. 以下代码哪个会报错？

    var x = 10;
    let x = 20;

  2. 以下代码输出是什么？

    {
      let a = 100;
    }
    console.log(a);