听闰土大话前端之解构赋值

前言

今天闰土要大话前端的主角儿是ES6中的解构赋值，首先咱们应该先明白一个问题，什么叫解构？其实很简单，解构就是把某个东西拆了，类似于小时候淘气的你把家里的电视机拆了，这就叫解构。

接下来，正文从这儿开始~

先来看一下它的概念：解构赋值语法是一个 Javascript 表达式，这使得可以将值从数组或属性从对象提取到不同的变量中。

身为前端码农的我们可以想到，在前端开发中，我们仅仅想从简单对象中获取相应的数据，对需要写很多重复的代码，如果我们仅仅只是想从更复杂的数据结构中获取某一个数据的话，那么可能会需要大量的遍历操作才能够完成。

也正是基于此，es6为我们推出了解构赋值这个特性。我们可以更简单的获取对象或者数组中的数据。

在正式说解构赋值之前，我先来说三件事情，之后大家就明白了。

1.左右两边结构必须一样。

2.右边必须是个东西。

3.声明和赋值不能分开（必须在一句话里面完成）。

接下来，我给大家举个例子：

let arr = [1,2,3];

let a = arr[0];

let b = arr[1];

let c = arr[2];

console.log(a, b, c);

以前是这么写的，说实话结果倒是能出来，就是太麻烦了。

有了解构赋值之后，就可以这么写了：

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

console.log(a,b,c);

然后去浏览器里面看一下，结果就出来了：1，2，3 。妥妥的没毛病。

其实就是左右两边一一对应，有种丁是丁卯是卯的感觉。

除了数组可以玩解构赋值，json同样也可以。json是咱们前端开发中常见的一种数据存储格式。

同样来举个例子：

let = ;

console.log(a,b,c);

当然，现在咱们玩的都是最基础的，如果你想玩的再热闹一些也没问题，只要合理即可。

来，我们举个生动活泼点的例子：

let [, [n1, n2, n3], num, str] = [, [12,5,8], 8, 'runtu'];

console.log(a,b,n1,n2,n3,num,str);

然后去浏览器的控制台里看看打印出来的结果，妥妥的12 5 12 5 8 8 "runtu"。

所以说，解构赋值这个概念听起来新鲜，其实也并不复杂，只要两边一样就行。

当然，在这个过程当中，你可以拆成你想要的粒度。

比如说，还是刚才的例子，我想要一个单独的json。我可以这么写：

let [json, [n1, n2, n3], num, str] = [, [12,5,8], 8, 'runtu'];

然后浏览器的console里自信地打印出了你想要的结果：

Object 12 5 8 8 "runtu".

然后你还想再调皮一下，也不想分数组，照样是可以的：

let [json, arr, num, str] = [, [12,5,8], 8, 'runtu'];

然后console里面打印出来的内容是：

Object, (3)[12, 5, 8] 8 "runtu".

是吧，这对于解构赋值来说都不叫事儿。

那么，接下里我要说点注意的事项。

比如说，咱们在举一个例子：

var [a,b] =

console.log(a,b);

结果浏览器里就报错了：

Uncaught TypeError: undefined is not a function.

看看报错的信息，说什么undefined不是一个函数什么的，都乱套了。这时你发现，左右两边结构其实不一样的，左边是一个数组，右边是一个json数据。这么玩就不合适了，连浏览器都被你搞懵逼了。所以说，左右两边必须都一样。

接下来要说第二个注意事项了，照样举个例子：

var = ;

console.log(a,b);

结果浏览器里又报错了，提示说：

Uncaught SyntaxError: Unexpected token,

报错的信息说未预期的token，编译没通过。这时，你会发现，右边不是一个东西，既不是数组又不是json，四不像。所以，右边必须是一个合法的东西。

最后一个需要注意的事项是，依旧举个例子说明：

let [a,b];

[a,b] = [12,5];

console.log(a,b);

然后你勇敢地按了一下键盘上的F12切换到了浏览器的控制台，发现又报错了：

Uncaught SyntaxError: Missing initializer in destructuring declarat.

报错信息是什么意思呢？说白了就是在你的解构赋值里缺少初始化。

这是解构赋值的一种特有的写法，既然是解构赋值，你只声明了未赋值，当然就是你的不对了。此时，浏览器不高兴了，给你抛出个错误。所以，这就是我文章开头说的，解构和赋值不能分开，必须在一句话里。分开的话就不叫解构赋值了，就叫瞎搞了。

所以解构赋值并不复杂，后面会有很多地方用到它，有很多的应用。比如说在咱们缓存promise里面摘东西，就特别多的用到它。

后记

所以，童鞋们在前端开发中要用ES6的解构赋值，只需记住文章开头的三要素即可。哪三要素呢？

1.左右两边结构必须一样。

2.右边必须是个东西。

3.声明和赋值不能分开（必须在一句话里面完成）。

重要的事情说三遍，只要在ES6的规矩里面办事，就不会犯错。

最后，ES6的解构赋值给JavaScript的语法带来了更多的现代化。它在减少了代码量的同时，增加了代码的可读性和表现力。

大话前端系列文章较长，未完待续。