JZTXT

学习解构赋值

发布时间 2023-03-28 21:41:08作者: Himmelbleu

解构赋值

解构赋值可以将数组中的值或对象的属性取出，赋值给其他变量。

结构数组

1️⃣ 基础使用

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

2️⃣ 选择赋值

const [a, , , c] = [1, 2, 3, 4];
console.log(a, c); // 1 4

3️⃣ 结合扩展运算符，剩余元素组成新的数组

const [a, b, ...rest] = [1, 2, 3, 4];
console.log(a, b, rest); // 1 2 [3, 4]

4️⃣ 对扩展运算符组成的新数组再解构赋值

const [a, b, ...[c, d]] = [1, 2, 3, 4]
console.log(a, b, c, d); // 1 2 3 4

5️⃣ 提供默认值

const [a, b, c = 30, d = 40] = [1, 2];
console.log(a, b, c, d); // 1 2 30 40

结构对象

1️⃣ 基础使用

const { a, b } = { a: 1, b: { c: 2, d: 3 } };
console.log(a, b); // 1 {c: 2, d: 3}

2️⃣ 解构嵌套对象

解构嵌套对象与第一层解构是一样的，一直嵌套下去就行。需要注意的是，b 这个 key 不再可用了。

const {
  a,
  b: { c, d },
} = { a: 1, b: { c: 2, d: 3 } };
console.log(a, c, d); // 1 2 3

3️⃣ 解构对象不可以忽略属性值

和结构数组不同的是，解构对象的 key 不可以跳过，或者使用扩展运算符（...）接收剩余的 key。

// 正确的
const { a, ...rest } = { a: 1, b: 2, c: 3 };
console.log(a); // 1 {b: 2, c: 3}

// 错误的
const { a, ,c } = { a: 1, b: 2, c: 3 }; // error => 应为属性析构模式
console.log(a, c);

4️⃣ 重命名解构对象的 key

b、c 这两个结构出来的 key 不可再用，只能使用 d、e 这两个新的 key。但 d、e 与源对象的键（key）b、c 是引用关系。

const { a, b: d, c: e } = { a: 1, b: 2, c: 3 };
console.log(a, d, e); // 1 2 3

5️⃣ 提供默认值

和结构数组一样，可以提供一个默认值。

const { a, b, c: e = 30, d = 40 } = { a: 1, b: 2 }
console.log(a, b, e, d); // 1 2 30 40

总结

从两个点来理解解构赋值，即“解构”和“赋值”：

  1. 解构：如果是数组，解构的是元素本身这个值；如果是对象（key-value），解构的是这个对象的 key。
  2. 赋值：如果解构出来的是基础类型，是赋值给一个新的变量；如果解构出来的是对象的 key，就不是重新赋值，而是直接拿到对象的 key。

解构对象和数组的区别

  1. 结构要按照顺序，数组可以跳过元素，解构对象的 key 时不能跳过。
  2. 解构对象时可以对 key 进行重命名，即把 key 赋值给了一个新的变量，这个变量与 key 是引用关系。
const obj = { a: 1, b: {} };
const { b: c } = obj;
console.log(c === obj.b); // true