JavaScript中的解构赋值有哪些高级用法？

JavaScript解构赋值高级用法详解

解构赋值是JavaScript ES6新增的核心特性之一，它允许按照一定模式从数组或对象中提取值，然后赋值给对应的变量。除了基础的数组和对象解构，还有很多高级用法可以应对复杂的开发场景，下面逐一介绍这些用法。

嵌套解构

当数组或对象存在多层嵌套结构时，可以通过嵌套的解构语法直接提取深层的值，不需要先提取外层再逐层访问。

数组嵌套解构示例：

// 嵌套数组解构
const arr = [1, [2, 3], 4];
const [a, [b, c], d] = arr;
console.log(a); // 输出1
console.log(b); // 输出2
console.log(c); // 输出3
console.log(d); // 输出4

对象嵌套解构示例：

// 嵌套对象解构
const user = {
  name: '张三',
  info: {
    age: 25,
    address: {
      city: '北京'
    }
  }
};
const { name, info: { age, address: { city } } } = user;
console.log(name); // 输出张三
console.log(age); // 输出25
console.log(city); // 输出北京

解构时设置默认值

当解构的数组元素或对象属性不存在（值为undefined）时，可以给变量设置默认值，避免获取到undefined导致后续逻辑出错。

数组解构默认值示例：

const arr = [1];
const [a, b = 2] = arr;
console.log(a); // 输出1
console.log(b); // 输出2，因为arr中第二个元素不存在，使用默认值

对象解构默认值示例：

const user = { name: '李四' };
const { name, age = 18 } = user;
console.log(name); // 输出李四
console.log(age); // 输出18，user中没有age属性，使用默认值

剩余参数解构

使用剩余运算符...可以获取数组或对象中剩余的所有元素或属性，赋值给一个数组或对象变量。

数组剩余参数解构示例：

const arr = [1, 2, 3, 4, 5];
const [first, second, ...rest] = arr;
console.log(first); // 输出1
console.log(second); // 输出2
console.log(rest); // 输出[3,4,5]

对象剩余参数解构示例：

const user = {
  name: '王五',
  age: 30,
  gender: '男',
  job: '工程师'
};
const { name, age, ...otherInfo } = user;
console.log(name); // 输出王五
console.log(age); // 输出30
console.log(otherInfo); // 输出{ gender: '男', job: '工程师' }

函数参数解构

解构赋值可以直接用在函数参数中，方便提取传入的对象或数组参数中的具体值，同时可以设置默认值，让函数调用更灵活。

对象参数解构示例：

// 函数参数对象解构，同时设置默认值
function getUserInfo({ name, age = 20, city = '上海' } = {}) {
  return `姓名：${name}，年龄：${age}，城市：${city}`;
}
console.log(getUserInfo({ name: '赵六', age: 28 })); // 输出姓名：赵六，年龄：28，城市：上海
console.log(getUserInfo({})); // 输出姓名：undefined，年龄：20，城市：上海
console.log(getUserInfo()); // 输出姓名：undefined，年龄：20，城市：上海，因为参数默认值是空对象

数组参数解构示例：

function sum([a, b, c = 0]) {
  return a + b + c;
}
console.log(sum([1, 2])); // 输出3，c使用默认值0
console.log(sum([1, 2, 3])); // 输出6

变量交换

利用数组解构可以实现两个变量值的快速交换，不需要借助临时变量，代码更简洁。

let a = 10;
let b = 20;
[a, b] = [b, a];
console.log(a); // 输出20
console.log(b); // 输出10

提取正则表达式匹配结果

正则表达式的exec方法返回的结果是一个数组，可以通过解构直接提取需要的部分。

const str = '当前版本是v1.2.3';
const reg = /v(d+).(d+).(d+)/;
const result = reg.exec(str);
if (result) {
  const [fullMatch, major, minor, patch] = result;
  console.log(fullMatch); // 输出v1.2.3
  console.log(major); // 输出1
  console.log(minor); // 输出2
  console.log(patch); // 输出3
}

遍历Map结构

Map结构的entries方法返回的遍历器，每次迭代得到的是一个[key, value]形式的数组，配合解构可以方便地遍历Map。

const map = new Map();
map.set('name', '张三');
map.set('age', 25);
for (const [key, value] of map.entries()) {
  console.log(`${key}: ${value}`);
}
// 输出：
// name: 张三
// age: 25

JavaScript解构赋值ES6对象解构数组解构修改时间：2026-06-11 17:39:18