学习笔记之ES6入门第二篇解构

首先要记录的是对数组的解构

对数组的解构  

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

这就是最简单数组的解构，相信你一眼就看懂了

接下来就是几个稍微变一下的，稍微理解一下 就会发现其实就是一一对应关系

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

let [ , , a] = [1, 2, 3]; // a = 3

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

当模式匹配不上时  匹配不上的变量的值就会变为 undefined

let [a] = []; // a = undefined
let [a, b] = [1] //a = 1, b = undefined 

看到下面这个模式匹配时,你可以想想这些变量的值分别是什么

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

其结果就是 a = 1, b = 2, c = undifined, d = 3 ; 其实也非常简单，你只要把[b, c]也理解为一个变量 其对应的值就是[2]

let [a, [b , c], d] = [1, 2, 3, 4]; // ERROR:[1,2,3,4] is not iterable

其道理是和上面的一样，[b, c] 对应的是 2，而2不是iterable结构(百度下吧) 所以报错了

在解构时，也可以给变量设置默认值，当变量对应右边的值不存在时 就是值等于undefined，变量的默认值才会生效

let [a, b = 2] = [1]; // a = 1, b = 2 

而数组的解构的作用：在数组的项不多的情况下可以用数组jie的方法对变量进行赋值

用途1 变量值的交换 

let x = 1, y = 2;
[x, y] = [y, x]; // x = 2, y = 1

对象的解构赋值

感觉对象的解构赋值就比数组方便不少, 数组的解构赋值，变量的位置必须和数组当中值的位置一一对应，而对象就只需要变量与属性名相同就可以解构

let { a, b } = { a: "1", b: "2" }; // a = 1, b = 2
let { b, a, c } = { a: "1", b: "2" }; // a = 1, b = 2, c = undefined

变量与属性名不同也可以解构获取到值,只要在变量前加上想要获取的属性的属性名 在 加一个冒号就好了

let {a: b} = { a: '1' }; // b = 1

我认为理解上面两个两个例子，其实已经足够在开发当中使用了。

当然对象的解构赋值也是可以赋予默认值的

let {x = 3, y = 5} = {x: 1}; // x = 1, y = 5

// 其实我对默认值的理解是这样的
let x = 3 , y = 5;
x = 1;

让变量默认值生效的唯一条件是 对象的属性值（与变量名相同）的值为undefined

有一点要特别注意的是当你用解构赋值的方法为一个已经声明的变量赋值 会有问题

let x;
{x} = {x: 1}; // ERROR: Unexpected token =

其原因就是  JavaScript 引擎会将{x}理解成一个代码块.而非是解构赋值的语法。解决方法是

let x;
({x} = {x: 1});

需要用小括号将整个对象解构包在一起。这样做的原因是 不然大括号出现在行首，因为大括号出现在行首会被理解为代码块

对象解构的作用：可以在非常多的地方使用到，可以方便的为变量赋值。例如可以解构后台的返回的对象。变量重对象拿值都可以用到对象解构

接下来我觉得只要了解下就行了，因为字符串、数值 和 布尔值用到的地方不多

字符串的解构赋值

字符串可以类似 数组 和 对象的形式解构 

const [a, b, c, d, e] = 'hello';  // a = 'h', b = 'b', c = 'l', d = 'l', e = 'o'
const {length: a} = 'hello'; // a = 5

数值和布尔值的解构赋值

let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true