解锁 JavaScript 解构赋值的 5 个隐藏技巧

解构赋值是我们日常开发中的常用语法，但除了基本的对象和数组取值，它还有一些鲜为人知的妙用。今天分享几个能提升代码质量的实用技巧。

1. 重命名与默认值同时使用

当从 API 获取数据时，我们经常需要重命名属性并设置默认值：

const userData = {
    name: '张三' };
const {
    name: userName = '匿名用户' } = userData;
console.log(userName); // 输出：'张三'

2. 嵌套对象的深度解构

处理复杂数据结构时，可以一路解构到底：

const response = {
   
  data: {
    user: {
    profile: {
    email: 'test@example.com' } } }
};
const {
    data: {
    user: {
    profile: {
    email } } } } = response;

3. 在函数参数中直接解构

让函数签名更清晰，同时设置默认值：

function createUser({
    name = '新用户', age = 18, email = '未设置' } = {
   }) {
   
  console.log(`创建用户：${
     name}，年龄：${
     age}`);
}
createUser({
    name: '李四' }); // 年龄使用默认值 18

4. 交换变量的优雅方式

不再需要临时变量：

let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b); // 2, 1

5. 选择性提取属性

从大对象中提取需要的属性，同时收集剩余部分：

const person = {
    name: '王五', age: 28, city: '北京', job: '工程师' };
const {
    name, age, ...rest } = person;
console.log(rest); // { city: '北京', job: '工程师' }

这些技巧能让你的代码更简洁、更易维护。下次写 JavaScript 时，不妨尝试用起来！