每天十分钟学好ES6--关于解构赋值的彩虹屁

Posted 2021-06-26 桃子叔叔

解构赋值是es6中很简单实用的小语法，今天一定要给它吹一下彩虹屁。

说他简单，是因为在es6规范中，排位在第二，也就是let和const之后就是他了，语法篇章也不多，还没说多少就开始说应用，应用的部分又说的很精彩。

所以说解构赋值真的是既简单又好用，应用范围真的太广了，并且对于初识ES6的小伙伴真的很友好。

首先让我们先看一下解构赋值的语法：

let [a, b, c] = [1, 2, 3]
let [head, ...tail] = [1, 2, 3, 4]
let [x, y='1'] = [2]
let [m, n='1'] = [2, undefined]

上面这几行代码基本就包含了解构赋值大部分功能了，别看它简单，使用起来真的好用，下面让我们一起来看一下。

一、基本语法

解构赋值的基本语法很简单，简单到只需要了解两个部分：

• 数组的解构赋值
• 对象的解构赋值

解构赋值只包含这两部分吗？不是的，但是只看这两个就足够了

为什么？

原因很简单，

1. 字符串的解构赋值很鸡肋，你几乎不会使用到。
2. 数值和布尔的解构赋值也停留在理论上，了解就好。
3. 函数参数的解构赋值本质上与对象的解构赋值没有太大差别。

既然这样，废话不多少，我们分别看一下数组的解构赋值和对象的解构赋值。

1、数组的解构赋值

本文开篇的代码其实就是数组的解构赋值，现在我们一一来看一下

1.1 变量

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

这个的用处是很方便的定义三个变量a、b、c，
并且赋值，
结果是：

a = 1
b = 2
c = 3

这样一来省了很多代码

对的，没错，我是用es6就是为了节约代码

1.2 数组

let [head, ...tail] = [1, 2, 3, 4]

这里定义了两个变量head和tail

结果是：
head = 1
tail = [2, 3, 4]

我们稍微变换一下思路，可以用来拼接数组 ，如下：

let head = 1, tail = [2, 3, 4]
let newList = [head, ...tail]
// newList = [1, 2, 3, 4]

惊不惊喜，意不意外，是不是眼前一亮，是的！OK，那就好

1.3 默认值

let [x, y='1'] = [2]
let [m, n='1'] = [2, undefined]

这个呢，用到的就是解构赋值的默认值了

由于默认值生效的规则是，属性值严格等于undefined, 所以：

let [d = '1'] = [null]
console.log(d) // null
let [d2 = '1'] = []
console.log(d2) // 1

既然默认值生效的规则是，属性值===严格等于undefined，我们一起看一下es6是如何实现的：

var {z=3} = {}
// 代码转码后是这样的：
var _ref = {},
    _ref$z = _ref.z,
    z = _ref$z === void 0 ? 3 : _ref$z;

如果默认值是函数方法，函数是惰性求值，即如果能取到值，函数不会运行使用, 如下面的f()不会运行

function f() {console.log(1)}
let [fun = f()] = [11]

默认值的使用大大提高了解构赋值的实用性，在日常敲代码中真的是超级好用，啦啦啦啦啦～～～

2、对象的解构赋值

对象的解构赋值的原则是；先找到同名属性，赋值给对应变量，像下面这个就是赋值给后者，而不是前者

let {foo: faz} = {foo: '111', bar : '222'}
console.log(faz) // 111

上面的例子很简单，相当于定义一个变量faz，并且把对象中foo的value赋值给了刚定义的变量baz。下面有一个相对复杂的例子：

var node = {
	loc: {
        start: {
            line: 1,
            column: 5
        }
    }
}
var {loc, loc: {start}, loc: {start: {line}}} = node
console.log(loc) // {start: Object}
console.log(start) // {line: 1, column: 5}
console.log(line) // 1

上面进行了三次解构赋值，分别对loc、start、line三个属性解构赋值

最后一次line是变量，但是loc、start都是模式，line = node.loc.start.line

二、解构赋值的应用

我们开篇彩虹屁就吹过了，解构赋值简单且好用，日常代码中很多情况都能用到解构赋值，不信的话我们一起看一下解构赋值的应用场景：

1、数组拼接

这个我们在基本语法–数组的解构赋值就看到过了，代码也是很简单：

let head = [0, 1], 
    tail = [2, 3, 4]
let newList = [...head, ...tail]
// newList = [0, 1, 2, 3, 4]

2、交换变量

let x1 = 1, x2 = 2;
[x1, x2] = [x2, x1]
console.log(x1) // 2
console.log(x2) // 1

这个操作够骚气的吧，主要是他还很简单，简单到你都有点小开心了是不是。

3、提取JSON数据

作为前端工程师，每天都要和后端打交道，如何快速准确的处理json数据，是很重要很有用的，看看解构赋值做了哪些：

let jsonData = {
    id: 1,
    status: true,
    list: [1, 3, 5, 7]
}
let {id, status, list} = jsonData

是不是很棒，是的，但是不仅限于此，如果，我是说如果后端小伙伴不太靠谱，返回json数据不规范，比如jsonData中list没有的情况下，不返回空数组[]，而是直接list这个参数都没返回，之前怎么办？

let list = jsonData.list || []

是不是这样，但是解构赋值就方便多了

let {id, status, list=[]} = jsonData

这样是不是赏心悦目多了呢，是的！OK，非常好。

4、函数参数的默认值

上面我们刚说过了提取JSON数据时使用默认值，超级舒适，一样的小伙伴们，函数参数的默认值也超级牛逼的呢

let fn = (id=1, status = true, callback = ()=>{}) =>{
    函数内部逻辑代码
}

这样又好看又省了不少代码了吧。

5、输入模块的指定方法

在加载模块时，使用解构赋值可以直接指定输入的方法：

const {tool, request} = require('../util/index')

三、关于彩虹屁

一鼓作气看了这么多解构赋值的应用，是不是豁然开朗，是不是兴高采烈，对的，没错，解构赋值就是这么简单且实用，这波彩虹屁请查收～～～