解构赋值的模式与变量

前言

这是我重学ES6系列文章的第三篇。

也许大家对es6的结构与赋值都比较熟悉了，而且在项目里面都在使用，不过我今天在重新阅读es6文档的时候，还是发现了我之前没有真正理解的一些细节。

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

数组是按照顺序解构的，a、 b、c 分别对应数组的第一二三项：1，2，3.

正常我们用解构的情况，赋值变量 <= 被解构元素。类似于：

const [a, b, c] = [1,2,3,4]

这样也就是只对前三项赋值，第四项我们不关心。

那如果我们相对数组的第二项和第四项赋值呢？

答案是逗号占位。

const [, b, , c] = [1,2,3,4]

这样b,和c就分别是2，4。

如果我们数组只有四项，我们赋值给了五个变量，会怎么样呢？

const [a, b, c, d] = [1,2,3,4]

显然这时候d会匹配失败，我们打印d会发现返回undefined。

只有一层的数组或对象很容易理解，当数组或对象是多层嵌套的，解构赋值依然给力吗？

const [,[a],[b,[c,d]]] = [1, [2,3], [4, [5,6]], 7]

我们可以通过模仿数组嵌套的结构，赋值我们需要的数据。a=2， b=4, c=5,d=6 。

对象嵌套的情况可类比，对象好在是键值对的形式，所以不用像数组一样需要按顺序赋值，也不需要占位的操作。

这里就需要说到题目中提到的模式与变量了。

当我们解构一个普通对象：const { name } = { name: 'back_kk' }, 其实是两步操作：匹配 + 变量赋值。等价于下面这样 ` const { name: name } = { name: ‘back_kk’ } `

先匹配到name, 再将匹配结果赋值给name。赋值变量可任意命名，不一定要和原key值相同。取相同名字只是为了简写方便。

这在嵌套解构里面尤其明显：

let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};

let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"

这里的p就是匹配模式，而非变量，也就是p并非被解构出来。如果p也要作为变量赋值，可以写成下面这样。

let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};

let { p, p: [x, { y }] } = obj;
x // "Hello"
y // "World"
p // ["Hello", {y: "World"}]

其实数组里面也是类似的，只是匹配方式是索引值而已。

嵌套模式，如果匹配子对象所在的父属性不存在的话，会报错。

// 报错
let {foo: {bar}} = {baz: 'baz'};

此时匹配foo模式失败了，失败返回undefined,undefined解构赋值bar,自然是会报错的。

温故而知新，在重学ES6的过程中，总能找到之前没有吃透的知识点。希望大家能够持续关注本系列文章，一起重学ES6，夯实基础，快速成长。