解构赋值详解以及例子

以下是使用解构赋值的所有可能方式的示例代码：

1. 数组解构赋值

const array = [1, 2, 3];

// 基本形式
const [a, b, c] = array;
console.log(a); // 1

// 只获取部分值
const [, second] = array;
console.log(second); // 2

// 设置默认值
const [d, e, f, g = 4] = array;
console.log(g); // 4

// 剩余操作符
const [h, ...rest] = array;
console.log(rest); // [2, 3]

1. 对象解构赋值

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

// 基本形式
const { name, age } = person;
console.log(name); // Alice

// 重命名变量
const { name: personName, age: personAge } = person;
console.log(personName); // Alice

// 设置默认值
const { job = 'none' } = person;
console.log(job); // none

// 剩余操作符
const { name: pName, ...rest } = person;
console.log(rest); // { age: 25 }

1. 嵌套结构解构赋值

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

// 基本形式
const { name, job: { title } } = person;
console.log(title); // developer

// 剩余操作符
const { name: pName, ...rest } = person;
console.log(rest); // { age: 25, job: { title: 'developer' } }

// 深度嵌套
const { job: { title: jobTitle } = {} } = person;
console.log(jobTitle); // developer

1. 函数参数解构赋值

function f([a, b]) {
  console.log(a, b);
}

f([1, 2]); // 1 2

function g({ name }) {
  console.log(name);
}

g({ name: 'Alice', age: 25 }); // Alice