js的对象解构

对象解构（Object Destructuring）时，有几个重要的概念需要了解：

1. 基本对象解构：
   • 使用花括号（{}）来定义解构模式。
   • 解构模式根据属性名将对象中的属性值分配给对应的变量。
   • 解构是基于属性名的匹配，变量的顺序与对象中的属性顺序无关。

const person = {
    
     name: 'Alice', age: 25 };

const {
    
     name, age } = person;

console.log(name); // 输出：Alice
console.log(age); // 输出：25

2. 默认值：
   • 可以为解构的变量指定默认值，以防止解构时对应的值为 undefined。

const person = {
    
     name: 'Alice', age: 25 };

const {
    
     name, age, occupation = 'Unknown' } = person;

console.log(name); // 输出：Alice
console.log(age); // 输出：25
console.log(occupation); // 输出：Unknown

3. 别名：
   • 可以使用别名（Alias）为解构的变量指定不同的名称。

const person = {
    
     name: 'Alice', age: 25 };

const {
    
     name: fullName, age: years } = person;

console.log(fullName); // 输出：Alice
console.log(years); // 输出：25

4. 多级对象解构：
   • 可以使用嵌套的解构模式来解构多级嵌套的对象。

const person = {
    
    
  name: 'Alice',
  age: 25,
  address: {
    
    
    city: 'New York',
    country: 'USA'
  }
};

const {
    
     name, address: {
    
     city, country } } = person;

console.log(name); // 输出：Alice
console.log(city); // 输出：New York
console.log(country); // 输出：USA

5. 对象数组解构
   • 在解构模式中结合数组和对象的语法，从数组中提取对象的属性值
   • 解构模式中的属性名和变量名需要与对象的属性名相匹配，并且数组索引需要与要解构的对象在数组中的位置对应

const data = [
  {
    
     name: 'Alice', age: 25 },
  {
    
     name: 'Bob', age: 30 },
  {
    
     name: 'Charlie', age: 35 }
];

const [{
    
     name: firstPersonName, age: firstPersonAge }, , {
    
     name: thirdPersonName, age: thirdPersonAge }] = data;

console.log(firstPersonName); // 输出：Alice
console.log(firstPersonAge); // 输出：25
console.log(thirdPersonName); // 输出：Charlie
console.log(thirdPersonAge); // 输出：35