什么是解构赋值？javascript中如何提取数据？

解构赋值是javascript ES6引入的重要语法特性，它允许我们按照一定模式，从数组或对象中提取值，然后直接赋值给对应的变量，不需要像传统方式那样逐个访问属性或下标来获取数据，让代码更加简洁易读。

解构赋值的核心作用

在没有解构赋值之前，我们从数组或对象中提取数据需要写很多重复的代码，比如从对象中获取多个属性时，要逐个写变量赋值语句。而解构赋值可以把这些操作浓缩成一行代码，同时支持设置默认值、处理嵌套结构等，适配更多复杂的数据提取场景。

数组解构的基本用法

数组解构按照数组的元素顺序，把对应位置的值赋值给变量，基本语法是用方括号包裹变量名，放在赋值运算符左侧，右侧是要解构的数组。

// 传统方式获取数组元素
const arr = [10, 20, 30];
const a = arr[0];
const b = arr[1];
const c = arr[2];

// 使用数组解构赋值
const [x, y, z] = [10, 20, 30];
console.log(x); // 输出10
console.log(y); // 输出20
console.log(z); // 输出30

数组解构的进阶用法

数组解构还支持跳过部分元素、剩余元素收集、设置默认值等场景：

// 跳过部分元素
const [first, , third] = [1, 2, 3, 4];
console.log(first); // 输出1
console.log(third); // 输出3

// 剩余元素收集，用...语法把剩余元素放到新数组中
const [head, ...rest] = [1, 2, 3, 4, 5];
console.log(head); // 输出1
console.log(rest); // 输出[2,3,4,5]

// 设置默认值，当解构的元素为undefined时，使用默认值
const [num1, num2 = 100] = [50];
console.log(num1); // 输出50
console.log(num2); // 输出100，因为右侧数组只有一个元素，num2对应的值是undefined

对象解构的基本用法

对象解构是按照属性名匹配的方式提取数据，左侧用花括号包裹变量名，变量名需要和对象的属性名一致，才能正确获取到对应的值。

// 传统方式获取对象属性
const user = {
  name: '张三',
  age: 25,
  city: '北京'
};
const name = user.name;
const age = user.age;

// 使用对象解构赋值
const { name: userName, age: userAge } = user;
console.log(userName); // 输出张三
console.log(userAge); // 输出25

对象解构的变量重命名与默认值

如果希望解构出来的变量名和对象属性名不同，可以给变量重命名，同时也可以给对象解构的变量设置默认值：

const product = {
  id: 1001,
  title: '笔记本电脑'
};

// 变量重命名，把title属性的值赋值给productName变量
const { id, title: productName } = product;
console.log(id); // 输出1001
console.log(productName); // 输出笔记本电脑

// 设置默认值，当对象没有对应属性时，使用默认值
const { id, price = 4999 } = product;
console.log(price); // 输出4999，因为product对象没有price属性

嵌套结构的解构

如果数组或对象存在嵌套结构，解构赋值也支持对应的嵌套写法，按照数据的嵌套层级来写解构模式即可：

// 嵌套对象解构
const student = {
  name: '李四',
  score: {
    math: 90,
    english: 85
  }
};
const { name, score: { math, english } } = student;
console.log(name); // 输出李四
console.log(math); // 输出90
console.log(english); // 输出85

// 嵌套数组解构
const nestedArr = [1, [2, 3], 4];
const [one, [two, three], four] = nestedArr;
console.log(one); // 输出1
console.log(two); // 输出2
console.log(three); // 输出3
console.log(four); // 输出4

解构赋值的常见使用场景

解构赋值在日常开发中有很多实用的场景，比如函数参数解构、交换变量值、从函数返回多个值等：

// 场景1：交换两个变量的值，不需要临时变量
let m = 10;
let n = 20;
[m, n] = [n, m];
console.log(m); // 输出20
console.log(n); // 输出10

// 场景2：函数参数解构，直接提取参数对象的属性
function printUser({ name, age, city = '未知' }) {
  console.log(`姓名：${name}，年龄：${age}，城市：${city}`);
}
printUser({ name: '王五', age: 28 }); // 输出姓名：王五，年龄：28，城市：未知

// 场景3：从函数返回多个值，返回数组或对象后用解构获取
function getSize() {
  return [1920, 1080];
}
const [width, height] = getSize();
console.log(width); // 输出1920
console.log(height); // 输出1080

需要注意的是，解构赋值右侧如果不是可迭代对象（比如对undefined或者null使用解构），会直接抛出错误，使用前要确保解构的目标是有值的，或者配合默认值来处理空值情况。另外，解构赋值只是语法层面的简化，不会改变原数组或对象的结构，也不会产生额外的性能开销，可以放心在项目中大量使用。

解构赋值javascript数据提取数组解构对象解构修改时间：2026-06-24 03:33:32