JavaScript 解构赋值

什么是解构赋值？

解构赋值是一种 JavaScript 表达式，允许我们从数组或对象中提取数据，并赋值给不同的变量。 解构赋值是 ES6 的强大特性，可以简化代码。

数组解构示例：

// 基本用法constarr=[1,2,3];const[a,b,c]=arr;console.log(a,b,c);// 1 2 3// 只解构部分元素const[first,second]=[10,20,30,40];console.log(first,second);// 10 20// 跳过某些元素const[x,,z]=[1,2,3];console.log(x,z);// 1 3// 设置默认值const[p=5,q=10]=[1];console.log(p,q);// 1 10（q使用默认值）// 剩余元素const[head,...tail]=[1,2,3,4,5];console.log(head);// 1console.log(tail);// [2, 3, 4, 5]// 变量交换（经典用法）letm=1,n=2;[m,n]=[n,m];console.log(m,n);// 2 1

对象解构示例

// 数组解构（按位置）const[a,b]=[1,2];// a=1, b=2// 对象解构（按键名）const{name,age}={name:'小明',age:20};// name='小明', age=20

嵌套解构

// 嵌套数组const[first,[second,third]]=[1,[2,3]];console.log(first,second,third);// 1 2 3// 在函数参数中functiongetUser([id,{name,age}]){console.log(`ID:${id}, 姓名:${name}, 年龄:${age}`);}getUser([1001,{name:'小明',age:20}]);// 输出: ID: 1001, 姓名: 小明, 年龄: 20

实际运用场景

如：一个函数返回多个值：

// 函数返回多个值functiongetMinMax(numbers){return[Math.min(...numbers),Math.max(...numbers)];}// 使用解构接收const[min,max]=getMinMax([5,2,8,1,9]);console.log(`最小值:${min}, 最大值:${max}`);

解构赋值其实仅仅是个语法糖。它并没有为 JavaScript 添加新功能，只是提供了一种更简洁、更直观的语法来实现已有的功能。