跳到主要内容

JS 解构赋值与展开运算符

解构赋值（Destructuring Assignment）​

解构赋值是一种从数组或对象中提取值并赋给变量的简洁语法。

数组解构​

js
const arr = [10, 20, 30];

// 基本用法
const [a, b, c] = arr; // a=10, b=20, c=30

// 跳过元素
const [x, , y] = arr; // x=10, y=30

// 默认值
const [m, n, o = 100] = [1, 2]; // o=100

// 交换变量
let p = 1, q = 2;
[p, q] = [q, p]; // p=2, q=1

对象解构​

js
const user = { name: "Alice", age: 25 };

// 基本用法
const { name, age } = user;

// 重命名变量
const { name: username, age: years } = user; // username="Alice", years=25

// 默认值
const { city = "未知" } = user; // city="未知"

// 嵌套对象
const person = { info: { job: "dev" } };
const { info: { job } } = person; // job="dev"

混合解构​

js
const data = {
  title: "JS",
  scores: [90, 80, 70],
};

const {
  title,
  scores: [first, second],
} = data;

console.log(title);  // JS
console.log(first);  // 90

展开运算符（Spread Operator： ... ）​

展开运算符可将数组或对象展开为独立元素。

数组展开​

js
const arr = [1, 2, 3];
const newArr = [...arr, 4, 5]; // [1, 2, 3, 4, 5]

// 合并数组
const merged = [...[1, 2], ...[3, 4]]; // [1, 2, 3, 4]

// 拷贝数组（浅拷贝）
const copy = [...arr];

对象展开​

js
const obj = { a: 1, b: 2 };
const newObj = { ...obj, c: 3 }; // {a:1, b:2, c:3}

// 合并对象
const merged = { ...{ x: 1 }, ...{ y: 2 } }; // {x:1, y:2}

// 浅拷贝
const copy = { ...obj };

展开与函数​

js
const nums = [10, 20, 30];
console.log(Math.max(...nums)); // 30

function sum(a, b, c) {
  return a + b + c;
}
console.log(sum(...nums)); // 60

解构与展开的区别​

功能解构赋值展开运算符
方向从结构中取出数据将结构展开成单个元素
常用于变量赋值复制、合并、函数参数
是否创建新对象否是（浅拷贝）