ES6 解构赋值详解

解构赋值是JavaScript ES6中引入的一种语法，它允许你从数组或对象中提取数据，并将这些数据赋值给一系列变量。这种语法可以使代码更加简洁和易于管理。

1. 数组解构赋值

（a）数组解构赋值使用方括号[]包围变量名，并与待解构的数组相对应。例如：

const arr = [1, 2, 3];
const [a, b, c] = arr;
console.log(a); // 输出 1
console.log(b); // 输出 2
console.log(c); // 输出 3

（b）如果解构的变量数量少于数组中的元素，未指定的元素将被忽略：

const [x, y] = [1, 2, 3, 4];
console.log(x); // 输出 1
console.log(y); // 输出 2

（c）你还可以设置默认值，以防解构的变量在数组中不存在：

const [x = 10, y = 20] = [1, 2];
console.log(x); // 输出 1
console.log(y); // 输出 2

（d）使用剩余参数...可以捕获数组中未指定的其余元素：

const [x, y, ...rest] = [1, 2, 3, 4, 5];
console.log(x); // 输出 1
console.log(y); // 输出 2
console.log(rest); // 输出 [3, 4, 5]

（e）数组套数组的时候，可以使用同样的结构对应原数组，解构出对应的值：

let [a, [b, c, d]] = [1, [3, 4, 5]]
console.log(a, b, c, d) // 输出 1, 3, 4, 5

2. 对象解构赋值

• 对象的解构不看顺序，和顺序无关
• 对象的解构，保证   【变量名 === 对象的键】   即可实现解构

（a）对象解构赋值使用花括号{}包围变量名和它们对应的属性名。例如：

const obj = { name: 'Alice', age: 25 };
const { name, age } = obj;
console.log(name); // 输出 Alice
console.log(age); // 输出 25

（b）你也可以为解构的属性设置别名：

const { name: userName, age: userAge } = obj;
console.log(userName); // 输出 Alice
console.log(userAge); // 输出 25

（c）对象解构赋值同样支持默认值和剩余属性：

const { address = 'Unknown', ...otherInfo } = obj;
console.log(address); // 输出 Unknown
console.log(otherInfo); // 输出 { age: 25 }

（d）对象包含对象的时候，可以通过 属性名:{} 获取对应的属性值：

let person = {
  uname: 'zs',
  age: 34,
  dog: {
    name: '汪仔',
    age: 3
  },
  cat: {
    name: '小花',
    age: 2
  }
}

let { uname, cat: { name } } = person
console.log(uname, name) // 输出 zs, 小花

 （e）传递参数时，可以通过 {属性名} 筛选想要传递的值：

let obj = {
  uname: 'aa',
  age: 20,
  sex: '男'
}

function fn({ sex }) {
  // 函数中，只需要sex
  console.log(sex)
}
fn(obj)