这是我参与2022首次更文挑战的第26天，活动详情查看：2022首次更文挑战

前言

这一章我讲一讲ES6结构赋值的基本用法，结构赋值用的好可以让我们的代码整洁而且逼格高一点，让大家眼前一亮，我们一起来看一看吧。

赋值解构

解构赋值就是ES6 允许按照一定模式, 从数组和对象中提取值, 对变量进行赋值

本质上, 这种写法属于“模式匹配”, 只要等号两边的模式相同, 左边的变量就会被赋予对应的值

Ⅰ-概括总结

0. 字符串解构: const [a, b, c, d, e] = "hello"

1. 数值解构: const { toString: s } = 123

2. 布尔解构: const { toString: b } = true

3. 对象解构

• 形式: const { x, y } = { x: 1, y: 2 }

• 默认: const { x, y = 2 } = { x: 1 }

• 改名: const { x, y: z } = { x: 1, y: 2 }

0. 数组解构

• 规则: 数据结构具有Iterator接口可采用数组形式的解构赋值

• 形式: const [x, y] = [1, 2]

• 默认: const [x, y = 2] = [1]

0. 函数参数解构

• 数组解构: function Func([x = 0, y = 1]) {}

• 对象解构: function Func({ x = 0, y = 1 } = {}) {}

应用场景

• 交换变量值: [x, y] = [y, x]

• 返回函数多个值: const [x, y, z] = Func()

• 定义函数参数: Func([1, 2])

• 提取JSON数据: const { name, version } = packageJson

• 定义函数参数默认值: function Func({ x = 1, y = 2 } = {}) {}

• 遍历Map结构: for (let [k, v] of Map) {}

• 输入模块指定属性和方法: const { readFile, writeFile } = require("fs")

** 重点难点 **

• 匹配模式: 只要等号两边的模式相同, 左边的变量就会被赋予对应的值
• 解构赋值规则: 只要等号右边的值不是对象或数组, 就先将其转为对象
• 解构默认值生效条件: 属性值严格等于 undefined
• 解构遵循匹配模式
• 解构不成功时变量的值等于 undefined
• undefined 和 null 无法转为对象, 因此无法进行解构

Ⅱ-基本用法

① 基本用法举例

以前, 为变量赋值, 只能直接指定值.

let a = 1;
let b = 2;
let c = 3;

ES6 允许写成下面这样.

let [a, b, c] = [1, 2, 3];

上面代码表示, 可以从数组中提取值, 按照对应位置, 对变量赋值.

本质上, 这种写法属于“模式匹配”, 只要等号两边的模式相同, 左边的变量就会被赋予对应的值. 下面是一些使用嵌套数组进行解构的栗子.

let [foo, [[bar], baz]] = [1, [[2], 3]];//foo : 1 bar : 2 baz : 3
​
let [ , , third] = ["foo", "bar", "baz"];//third : "baz"
​
let [x, , y] = [1, 2, 3];//x : 1 y : 3
​
let [head, ...tail] = [1, 2, 3, 4];//head : 1 tail : [2, 3, 4]
​
let [x, y, ...z] = ['a'];//x : "a" y : undefined z : []

如果解构不成功, 变量的值就等于 undefined .

let [foo] = [];
let [bar, foo] = [1];

以上两种情况都属于解构不成功, foo的值都会等于 undefined .

另一种情况是不完全解构, 即等号左边的模式, 只匹配一部分的等号右边的数组. 这种情况下, 解构依然可以成功.

let [x, y] = [1, 2, 3];//x : 1  y : 2 
let [a, [b], d] = [1, [2, 3], 4];//a : 1 b : 2 d : 4

上面两个栗子, 都属于不完全解构, 但是可以成功.

如果等号的右边不是数组（或者严格地说, 不是可遍历的结构, 参见《Iterator》一章）, 那么将会报错.

// 报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

上面的语句都会报错, 因为等号右边的值, 要么转为对象以后不具备 Iterator 接口（前五个表达式）, 要么本身就不具备 Iterator 接口（最后一个表达式）.

对于 Set 结构, 也可以使用数组的解构赋值.

let [x, y, z] = new Set(['a', 'b', 'c']);
x // "a"

事实上, 只要某种数据结构具有 Iterator 接口, 都可以采用数组形式的解构赋值.

function* fibs() {
let a = 0;
let b = 1;
while (true) {
yield a;
[a, b] = [b, a + b];
}
}
​
let [first, second, third, fourth, fifth, sixth] = fibs();
sixth // 5

上面代码中, fibs是一个 Generator 函数（详见《Generator 函数》）, 原生具有 Iterator 接口. 解构赋值会依次从这个接口获取值.

② 默认值

解构赋值允许指定默认值.

let [foo = true] = [];//foo = true
let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

注意 , ES6 内部使用严格相等运算符（===）, 判断一个位置是否有值. 所以, 只有当一个数组成员严格等于 undefined , 默认值才会生效.

let [x = 1] = [undefined];//x = 1
let [x = 1] = [null];//x = null

上面代码中, 如果一个数组成员是 null , 默认值就不会生效, 因为 null 不严格等于 undefined .

如果默认值是一个表达式, 那么这个表达式是惰性求值的, 即只有在用到的时候, 才会求值.

function f() { console.log('aaa');}
let [x = f()] = [1];

上面代码中, 因为x能取到值, 所以函数 [ f ] 根本不会执行. 上面的代码其实等价于下面的代码.

let x;
if ([1] === undefined) { x = f()} 
else { x = [1]; }

默认值可以引用解构赋值的其他变量, 但该变量必须已经声明.

let [x = 1, y = x] = [];     // x=1; y=1
let [x = 1, y = x] = [2];    // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = [];     // ReferenceError: y is not defined

上面最后一个表达式之所以会报错, 是因为x用y做默认值时, y还没有声明.

③ ES6小知识点:连续赋值解构+重命名

此写法也是本人常用写法,挺好用的

let obj = {a:{b:1}}
const {a} = obj; //传统解构赋值
const {a:{b}} = obj; //连续解构赋值
const {a:{b:value}} = obj; //连续解构赋值+重命名

总结:这一章讲的主要是解构赋值的基本用法，我下一章准备完整的一章对象的解构赋值，有兴趣的可以去了解一下。