一次性掌握解构

Source: Dev.to

解构的含义

解构是 JavaScript 的一种表达式，能够以简洁的方式从数组、对象、Map 和 Set 中提取值。无需逐个访问属性或元素，就可以在一条语句中一次性获取多个值。

对象解构

const person = {
  name: "kunal",
  bio: "like this blog",
  twitter: "@kunalmadoliya"
};

// Traditional way
const name = person.name;
const twitter = person.twitter;
console.log(name, twitter); // kunal @kunalmadoliya

// Destructuring
const { name, twitter } = person;
console.log(name, twitter); // kunal @kunalmadoliya

{ name, twitter } = person 这行代码告诉 JavaScript 创建变量 name 和 twitter，并将它们分别赋值为 person 中对应的属性值。

嵌套对象解构

const user = {
  id: 1,
  name: "Kunal",
  contact: {
    email: "kunal@example.com",
    phone: {
      countryCode: "+91",
      number: "9876543210"
    }
  },
  skills: ["JavaScript", "React", "Node.js"]
};

// Extracting nested values
const {
  contact: {
    phone: { countryCode, number: phoneNumber }
  }
} = user;

console.log(countryCode, phoneNumber); // +91 9876543210

这在一条可读性强的语句中提取了深层属性。

数组解构

const arr = ["kunal", "@kunalmadoliya", "like this blog"];

// Traditional way
const first = arr[0];
const second = arr[1];
const third = arr[2];
console.log(first, second, third); // kunal @kunalmadoliya like this blog

// Destructuring
const [first, second, third] = arr;
console.log(first, second, third); // kunal @kunalmadoliya like this blog

数组解构根据元素的位置将每个值分配给对应的变量。

默认值

可以为可能缺失的属性提供后备值：

const { name, age, bio = "Unknown" } = person;
console.log(bio); // Output: Unknown (if `bio` is not defined)

如果源对象中没有 bio，则默认使用 "Unknown"。

解构的好处

• 更简洁的语法 – 避免冗长的属性访问链。
• 可读性提升 – 代码一眼就能看懂。
• 减少重复 – 不需要为每个属性重复对象名称。
• 一行提取多个值 – 同时解构多个变量。
• 支持嵌套数据 – 直接访问深层属性，无需中间变量。

祝编码愉快！