变量与解构

JavaScript 变量与解构

分为变量声明 和解构赋值两部分，结合语法、区别、示例讲解。

一、变量声明：var / let / const

1. 核心区别汇总

特性	var	let	const
作用域	函数作用域/全局作用域	块级作用域 {}	块级作用域 {}
变量提升	存在，可先使用后声明	存在提升，暂时性死区	存在提升，暂时性死区
重复声明	允许	不允许	不允许
重新赋值	允许	允许	不允许（常量）

2. 语法与示例

var

// 函数/全局作用域，无块级限制
if (true) {
  var a = 10;
}
console.log(a); // 10，块外仍可访问

// 允许重复声明
var b = 1;
var b = 2;
console.log(b); // 2

let

块级作用域，暂时性死区 ：代码块内，let 声明前无法访问该变量。

if (true) {
  let c = 20;
}
console.log(c); // 报错：c 未定义

// 暂时性死区
console.log(d); // 报错
let d = 30;

// 禁止重复声明
let e = 1;
let e = 2; // 报错

const

声明后不可重新赋值，必须初始化；同样具备块级作用域、暂时性死区。

// 必须赋值
const f; // 报错

const num = 100;
num = 200; // 报错，常量不能重赋值

// 引用类型（数组/对象）：允许修改内部属性，只是地址不变
const arr = [1,2];
arr.push(3);
console.log(arr); // [1,2,3] 正常修改

3. 使用建议

• 优先使用 const（默认常量，更安全）
• 变量需要重新赋值时，用 let
• 彻底摒弃 var

---

二、解构赋值

ES6 语法，快速从数组、对象中提取值，赋值给变量，简化代码。

（一）数组解构

按索引顺序一一对应。

1. 基础用法

const arr = [10, 20, 30];
// 解构
const [x, y, z] = arr;
console.log(x, y, z); // 10 20 30

2. 跳过元素

空位跳过对应位置的值

const [, m, n] = [1,2,3];
console.log(m, n); // 2 3

3. 默认值

解构值为 undefined 时，启用默认值

const [a = 100, b = 200] = [1];
console.log(a, b); // 1 200

4. 剩余运算符 ...

收集剩余所有元素，只能放在最后一位

const [first, ...rest] = [1,2,3,4];
console.log(first); // 1
console.log(rest); // [2,3,4]

5. 快速交换变量（经典用法）

let p = 1, q = 2;
[p, q] = [q, p];
console.log(p, q); // 2 1

---

（二）对象解构

按属性名匹配，和顺序无关，使用频率最高。

1. 基础用法

const obj = { name: "张三", age: 22 };
// 变量名和属性名一致
const { name, age } = obj;
console.log(name, age); // 张三 22

2. 重命名

当变量名冲突/想自定义变量名时，原属性名: 新变量名

const { name: username, age: userAge } = obj;
console.log(username, userAge); // 张三 22

3. 默认值

属性不存在时启用默认值

const { name, gender = "男" } = obj;
console.log(gender); // 男

4. 剩余运算符 ...

收集对象剩余属性

const { name, ...other } = obj;
console.log(other); // { age: 22 }

5. 嵌套对象解构

多层对象逐层解构

const info = {
  user: { nick: "小李" },
  addr: "北京"
};
const { user: { nick }, addr } = info;
console.log(nick, addr); // 小李 北京

---

（三）字符串解构

字符串可当作类数组解构

const str = "abc";
const [s1, s2] = str;
console.log(s1, s2); // a b

---

三、拓展：函数参数解构

实际开发高频场景，简化传参接收

// 1. 数组参数解构
function fn([a, b]) {
  console.log(a + b);
}
fn([1, 2]); // 3

// 2. 对象参数解构（最常用）
function getUser({ name, age = 18 }) {
  console.log(name, age);
}
getUser({ name: "王五" }); // 王五 18

---

四、补充：扩展运算符 ...（和解构配套）

和解构的剩余运算符写法一致，作用相反：展开数组/对象

// 展开数组
const arr1 = [1,2];
const arr2 = [...arr1, 3];
console.log(arr2); // [1,2,3]

// 展开对象（浅拷贝、合并对象）
const o1 = { a: 1 };
const o2 = { ...o1, b: 2 };
console.log(o2); // { a:1, b:2 }