js深度解构

深度解构（Deep Destructuring）是指在解构赋值中，解构对象或数组中的嵌套结构。它允许你从复杂的数据结构中直接提取所需的嵌套数据，使代码更加简洁明了。

对象：

const person = {
    name: 'John',
    address: {
        city: 'New York',
        street: {
            name: '5th Avenue',
            number: 123
        }
    }
};

const { address: { city, street: { name, number } } } = person;

console.log(city);    // 输出 'New York'
console.log(name);    // 输出 '5th Avenue'
console.log(number);  // 输出 123

在上面中不能获取到address和street。可以通过以下方式获取：

const { address, address: { city, street, street: { name, number } } } = person;

数组：

const colors = ['red', ['green', 'lightgreen'], 'blue'];

const [primary, [ , lightSecondary]] = colors;

console.log(primary);       // 输出 'red'
console.log(lightSecondary);// 输出 'lightgreen'

深度解构函数参数：

深度解构还可以在函数参数中使用，特别是当函数接收复杂的对象或数组作为参数时：

function displayPerson({ name, address: { city, street: { name: streetName, number } } }) {
    console.log(`${name} lives on ${streetName}, ${city}. Street number: ${number}`);
}

displayPerson(person); 
// 输出 'John lives on 5th Avenue, New York. Street number: 123'

拓展

交换变量值

let name1 = "张三";
let name2 = "李四";
[name2,name1] = [name1,name2];
console.log(name1,name2);     // 李四 张三

默认值

在解构中，无论是深度解构还是普通结构，都可以为解构的属性设置默认值，防止属性不存在时导致 undefined 或报错：

const person = {
    name: 'John',
    address: {
        city: 'New York',
    }
};

const { address: { city, street: { name = 'Unknown', number = 0 } = {} } } = person;

console.log(city);    // 输出 'New York'
console.log(name);    // 输出 'Unknown'
console.log(number);  // 输出 0

• name = ‘Unknown’ 和 number = 0 是两个具体的属性默认值。
• street: { name = ‘Unknown’, number = 0 } = {} 通过 ={} 这一部分确保了在 street 对象不存在时依然能够安全地解构 name 和 number

function fn({name='李四', age=30}) {
  console.log(name, age);
}

fn(); // 输出: 李四 30

具体来说，当你调用 fn() 时，相当于 fn(undefined)，而不是 fn({})。由于 undefined 不是一个对象，因此 JavaScript 无法对它进行解构赋值，这就导致了错误。

function fn({name='李四', age=30} = {}) {
  console.log(name, age);
}

fn(); // 输出: 李四 30

这里，{name=‘李四’, age=30} = {} 的意思是，如果没有传入参数或者传入的是 undefined，那么默认使用一个空对象 {} 进行解构，这样就不会出错。

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

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

console.log(name);  // 输出 'Alice'
console.log(age);   // 输出 30
console.log(city);  // 输出 'Unknown'

同名属性

通过在解构时给属性起一个新的名字（别名）来避免冲突。

const people = [
    { name: 'John', age: 30, address: { city: 'New York' } },
    { name: 'Alice', age: 28, address: { city: 'Los Angeles' } }
];

const [
    { name: name1, address: { city: city1 } },
    { name: name2, address: { city: city2 } }
] = people;

console.log(name1);  // 输出 'John'
console.log(city1);  // 输出 'New York'
console.log(name2);  // 输出 'Alice'
console.log(city2);  // 输出 'Los Angeles'