解构赋值的用法。

按照必定模式，从数组和对象中提取，对变量进行赋值，称为解构 
经过解构咱们可让赋值更优雅便捷

// 通常赋值 var a = 1, b = 2, c = 3;

//解构赋值 var [a, b, c] = [1, 2, 3];

固然不单单是var，let和const也能够

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

语法本质

实质上这个语法就是一种模式匹配 
若是等号两边模式相同 
左边变量就会被赋予相应值 
因此下面的形式也能够正常赋值

var [a, [b, [c, d]]] = [1, [2, [3, 4]]]; console.log(a, b, c, d);//1 2 3 4

不过咱们彻底没有必要写这么复杂

特殊用法

解构赋值还能够和“…”配合使用 
若是“…”在等号左边 
那么就会把剩余的值合并为一个数组 
这个操做符只能写在最后一个变量前面

var [left, ...right] = [1, 2, 3, 4, 5]; console.log(left, right);//1 [2,3,4,5]

---

若是“…”在等号右边 
就是把数组展开再赋值

var arr = [2, 3, 4]; var [a, b, c, d] = [1, ...arr]; console.log(a, b, c, d);//1 2 3 4

（“…”叫作展开操做符，之后我还会细讲）

解构失败与不彻底解构

若是没有在匹配中没有对应值，那么它的值就是undefined 
也就是解构失败 
等号右边少值

var [a, b, c] = [1, 2]; console.log(a, b, c);//1 2 undefined

---

与它相对的就是不彻底解构 
等号左边少值

var [a, b] = [1, 2, 3]; console.log(a, b);//1 2

错误解构

若是等号右边不是数组（不是可遍历解构） 
就会报错 
好比说这些状况是不能赋值解构的

var [foo] = 1/true/NaN/undefined/null/{};

 

下面的状况也是不能够的

var [a, [b]] = [1, 2];

它能够拆成var a = 1;和var [b] = 2; 
第二个一样不能解构赋值因此会报错

默认赋值

能够使用下面这种语法实现默认的赋值

var [foo = 1] = []; console.log(foo); //1

---

只有当右侧的值严格等于undefined才会使用默认赋值

var [foo = 1] = [null]; console.log(foo); //null

因为 null ！== undefined 
因此这里foo被赋予null

惰性赋值

惰性赋值说的是默认赋值的机制 
只有在须要使用默认值的时候 
才会去求值

function foo(){ alert(' '); return 123; }

var [a = foo()] = [1]; //不弹窗 console.log(a); //1

 

var [a = foo()] = []; //弹窗 console.log(a); //123

解构顺序

解构赋值首先会看右边有没有与之对应的值 
没有的话从左向右解析

var [a = 1, b = a] = []; console.log(a, b); //1 1

 

这段代码就至关于

var a = 1; var b = a;

 

---

var [a = b, b = 1] = []; console.log(a, b); //undefined 1

注意 
若是这里var 换成let就不同了

let [a = b, b = 1] = []; console.log(a, b); //报错

这段代码能够当作

let a = b; let b = 1;

因为let声明没有变量提高 
因此此时b还未声明就会报错

---

能够看看这道题

var [x1 = 1, y1 = x1] = []; var [x2 = 1, y2 = x2] = [2]; var [x3 = 1, y3 = x3] = [1,2]; var [x4 = y4, y4 = 1] = []; console.log(x1,y1);//1 1 console.log(x2,y2);//2 2 console.log(x3,y3);//1 2 console.log(x4,y4);//undefined 1

同理若是上面的第四行的var换成let会报错

对象解构

上面咱们经过数组的形式了解了解构赋值 
其实解构赋值不单单能够用数组 
对象也能够 
它们相似的地方就再也不赘述了

基本用法

对象的解构赋值是按照属性名（键）决定的 
若是没有找到对应的属性，那就赋予undefined

var {foo, bar, foobar} = { foo: 1, bar: 2 } console.log(foo, bar, foobar);//1 2 undefined

 

对于已经声明过的变量要注意

var a; {a} = {a: 1}; //错误

 

浏览器会报错 
由于js引擎把它理解成了代码块 
而内部的代码它不认识 
解决办法就是加上括号 
这样浏览器就能够知道这是一个表达式

var a; ({a} = {a: 1});

 

---

可是若是咱们想要声明的变量与属性名不一样怎么办呢 
咱们能够使用另外一种模式

var {foo: a, bar: b, foobar: c = 100} = { foo: 1, bar: 2 } console.log(a, b, c);//1 2 100

 

这至关于声明了a和b变量 
一样能够使用默认赋值

字符串解构赋值

var [a, b, c, d, e] = 'hello'; console.log(a, b, c, d, e); //h e l l o

 

字符串被转化为基本包装对象（类数组对象） 
因此能够实现

var {length : len} = 'hello'; console.log(len); //5

 

同理这个类数组对象中有length属性

基本值解构赋值

若是等号右边是数字或者布尔值 
也一样会转化为包装对象

let {toString: a} = 123; let {toString: b} = true; console.log( a === Number.prototype.toString); //true console.log( b === Boolean.prototype.toString); //true

 

---

但注意null和undefined没有封装对象 
下面的代码会报错

let {toString: x } = undefined; //错误

let {toString: y } = null; //错误

函数参数的结构赋值

function add([x, y]) { return x + y; } console.log(add([1, 2]));

 

函数参数表面上是一个数组 
但在传入参数时，数组参数就被结构成变量 x 和 y 
至关于var [x, y] = [1, 2]

---

function foo({x = 0, y = 0} = {}){ console.log([x, y]); } foo({x: 1,y: 2}); //[1, 2] foo({x: 1}); //[1, 0] foo({}); //[0, 0] foo(); //[0, 0]

 

function bar({x, y} = {x: 0, y: 0}){ console.log([x, y]); } bar({x: 1,y: 2}); //[1, 2] bar({x: 1}); //[1, undefined] bar({}); //[undefined, undefined] bar(); //[0, 0]

 

解构赋值的应用

除了交换变量之外 
解构赋值还有不少用途

函数多值返回

function demo(){ return [1, 2, 3]; } var [a, b, c] = demo();

 

函数定义参数

function demo({a, b, c}){ ... } demo({a: 1, b: 2, c: 3});

 

提取JSON数据

var jsonData= { id: 66, status: 'OK', data: [123, 456] } let {id, status, data:number} = jsonData;

 

转载：https://blog.csdn.net/q1056843325/article/details/53728836