JavaScript中三种变量声明方式var、let、const的区别与实战指南

// 1. 函数作用域（无块级作用域）
if (true) {
  var a = 10;
}
console.log(a); // 输出 10（a 跳出了 if 的 {}，因为 var 无块级作用域）

// 2. 变量提升
console.log(b); // 输出 undefined（声明提升了，赋值没提升）
var b = 20;

// 3. 可重复声明
var c = 30;
var c = 40;
console.log(c); // 输出 40（后声明的覆盖前一个）

// 4. 可修改
var d = 50;
d = 60;
console.log(d); // 输出 60

// 1. 块级作用域
if (true) {
  let a = 10;
}
console.log(a); // 报错：a is not defined（a 被 if 的 {} 限制，外部访问不到）

// 2. 暂时性死区
console.log(b); // 报错：Cannot access 'b' before initialization
let b = 20;

// 3. 不可重复声明
let c = 30;
// let c = 40; // 报错：Identifier 'c' has already been declared
// var c = 40; // 同样报错

// 4. 可修改
let d = 50;
d = 60;
console.log(d); // 输出 60

// 1. 块级作用域
if (true) {
  const a = 10;
}
console.log(a); // 报错：a is not defined

// 2. 暂时性死区
console.log(b); // 报错：Cannot access 'b' before initialization
const b = 20;

// 3. 不可重复声明
const c = 30;
// const c = 40; // 报错

// 4. 声明时必须赋值
// const d; // 报错：Missing initializer in const declaration

// 5. 不可修改引用（重点）
const e = 50;
// e = 60; // 报错：Assignment to constant variable.

// 注意：对象/数组的内部可修改（只是引用不能变）
const obj = { name: "张三" };
obj.name = "李四"; // 正常执行，输出 { name: '李四' }
console.log(obj);

const arr = [1, 2];
arr.push(3); // 正常执行，输出 [1,2,3]
console.log(arr);

// 数学常量
const PI = 3.1415926;
const RADIUS = 5;
const AREA = PI * RADIUS * RADIUS; // 计算后的值也不变

// 配置项（固定的接口地址、密钥等）
const BASE_URL = 'https://api.example.com';
const TOKEN = 'abc123456';

// 固定字符串
const TITLE = '个人信息'; // 就像你之前写的标题文本

// 个人信息对象（只会改内部属性，不会重新赋值）
const userInfo = {
  name: '韩雨龙',
  class: '24专本软件',
  hobby: ['唱歌', '跳舞']
};
// 允许修改内部属性（符合 const 规则）
userInfo.name = '小雨'; 
userInfo.hobby.push('爬山');

// 列表数据（只会增删元素，不会重新赋值数组）
const list = ['苹果', '香蕉'];
list.push('橙子'); // 正常执行

// 创建 h2 元素（不会重新赋值，用 const）
const h2 = document.createElement('h2');
h2.textContent = '个人信息'; // 只是修改属性，不是重新赋值
document.body.appendChild(h2);

// 创建按钮元素（同理）
const btn = document.createElement('button');
btn.textContent = '点击';
document.body.appendChild(btn);

// for 循环计数器（i 会从 0 变到 4，需要修改）
const info = ['班级', '学号', '姓名', '性别', '爱好'];
for (let i = 0; i < info.length; i++) {
  const p = document.createElement('p');
  p.textContent = info[i];
  document.body.appendChild(p);
}

// while 循环变量
let count = 0;
while (count < 3) {
  console.log('计数：', count);
  count++; // 重新赋值，必须用 let
}

// 开关状态（点击按钮切换 true/false）
let isShow = false;
const btn = document.createElement('button');
btn.textContent = '显示/隐藏';
btn.onclick = function() {
  isShow = !isShow; // 重新赋值，用 let
  console.log('状态：', isShow);
};
document.body.appendChild(btn);

// 计数器（点击一次加 1）
let num = 0;
const countBtn = document.createElement('button');
countBtn.textContent = '计数';
countBtn.onclick = function() {
  num++; // 重新赋值，用 let
  countBtn.textContent = `计数：${num}`;
};
document.body.appendChild(countBtn);

// 分步计算总价
let total = 0;
total += 10; // 加商品1价格
total += 20; // 加商品2价格
total *= 0.8; // 打8折（多次重新赋值，用 let）
console.log('总价：', total);

// 条件赋值（根据条件修改变量）
let message = '';
const isLogin = false;
if (isLogin) {
  message = '欢迎登录';
} else {
  message = '请先登录'; // 重新赋值，用 let
}

const i = 0;
i++; // 报错：Assignment to constant variable.（const 不能重新赋值）

// 标题文本不会改，应该用 const 而不是 let
let TITLE = '个人信息';