解构赋值

为什么使用解构赋值？

在拿到一个对象或数组时，我通常习惯用解构的方式来进行赋值：

const { aa, bb, cc } = obj || {};
const [dd, ee, ff] = arr || [];

这样做有以下几个好处:

1. 代码整体较为简洁，逻辑清晰

2. 容错性较好，无需加入一些难看的容错判断

3. 可以进行批量赋值

如果不实用结构赋值的方式，上面的两行代码可能会是这样：

const aa = obj && obj.aa;
const bb = obj && obj.bb;
const cc = obj && obj.cc;
const dd = isArray(arr) && arr[0];
const ee = isArray(arr) && arr[1];
const ff = isArray(arr) && arr[2];

这么一对比，是不是更为明显了呢？

解构赋值默认值生效的问题

在实际使用过程中，尤其是被解构的对象和数组是通过异步请求的方式从后端获取的，我们无法确定返回值是否符合需求，这个时候就需要我们设置解构赋值的默认值，类似这样：

const { aa = 1 } = obj || {};
const [bb = 1] = arr || [];

这样，当 obj 中没有字段 aa 或 aa 字段值为 undefined 时， aa 将使用默认值 1。

注意：当 obj 中 aa 字段为 null, '', false 或 0 时，默认值不会生效，例如：

const { aa = 1 } = {};                  // 1
const { aa = 1 } = { aa: undefined };   // 1
const { aa = 1 } = { aa: null };        // null
const { aa = 1 } = { aa: '' };          // ''
const { aa = 1 } = { aa: false };       // false
const { aa = 1 } = { aa: 0 };           // 0

数组的情况与之类似，我此前就犯了个错，误认为

const { aa = 1 } = { aa: null };

时，aa 值会使用默认值 1，造成了 bug，希望大家不要再犯同样的错～