解构赋值是 JavaScript 中的一种特性，允许从对象或数组中提取数据并将其赋值给变量

• 对象解构赋值

  • 基本语法

const { 属性名1, 属性名2 } = Object;

属性名1 和 属性名2 是你想要提取的对象属性的名称。对象 是包含这些属性的对象。

• 示例

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

// 使用对象解构赋值提取属性值
const { name, age } = person;

console.log(name); // 输出 'John'
console.log(age);  // 输出 30

• 可以为属性指定默认值，以防属性不存在：

const person = { name: 'John' };

// 指定默认值
const { name, age = 25 } = person;

console.log(name); // 输出 'John'
console.log(age);  // 输出 25

• 可以为提取的属性指定别名：

const person = { firstName: 'John', lastName: 'Doe' };

// 使用别名提取属性值
const { firstName: fName, lastName: lName } = person;

console.log(fName); // 输出 'John'
console.log(lName); // 输出 'Doe'

• 数组解构赋值

  • 基本语法

const [元素1, 元素2] = Array;

元素1 和 元素2 是你想要提取的数组元素的位置。数组 是包含这些元素的数组。

• 示例

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

// 使用数组解构赋值提取元素值
const [firstColor, secondColor] = colors;

console.log(firstColor);  // 输出 'red'
console.log(secondColor); // 输出 'green'

• 可以使用逗号来忽略不需要的元素：

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

// 忽略第二个元素
const [firstColor, , thirdColor] = colors;

console.log(firstColor);  // 输出 'red'
console.log(thirdColor); // 输出 'blue'

• 可以使用剩余运算符 (...) 来获取余下的元素，并将它们存储在一个新数组中：

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

// 使用剩余元素获取剩下的颜色
const [firstColor, ...remainingColors] = colors;

console.log(firstColor);      // 输出 'red'
console.log(remainingColors); // 输出 ['green', 'blue']

• 可以在对象和数组上使用嵌套解构，以提取深层嵌套的数据。

• 示例

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

// 嵌套对象解构
const { name, address: { city, zip } } = person;

console.log(name);  // 输出 'John'
console.log(city);  // 输出 'New York'
console.log(zip);   // 输出 '10001'

const data = [1, [2, 3]];

• 嵌套数组解构

const [first, [second, third]] = data;

console.log(first);  // 输出 1
console.log(second); // 输出 2
console.log(third);  // 输出 3

解构赋值的基本用法和语法。通过解构赋值，可以更轻松地访问和操作对象和数组的数据