3-2 解构赋值

概念：解构只是一个修饰，也就是赋值方式的一种，解构，左边一种结构，右边一种结构，对应一一赋值。

分类：数组解构、对象解构、字符串解构、布尔值解构、数字解构、函数解构

主要的两大类是数组解构、对象解构。

数组：

{let a,b,rest;  [a,b] = [1,2] ;console.log(a,b) } //输出1，2

{let a,b,rest;  [a,b,...rest] = [1,2,3,4,5,6] ;  console.log(a,b,rest) } //输出1，2 , [3,4,5,6]

{let a,b, {a,b}={a:1,b:2} ;  console.log(a,b) } //输出1，2

以上都是数组、对象解构赋值。

解构赋值，分为方法，默认值，使用场景

{let a,b,c,rest;  [a,b,c=3] = [1,2] ;  console.log(a,b,c) } //输出1，2 , 3

{let a,b,c,rest;  [a,b,c] = [1,2] ;  console.log(a,b,c) } //输出1，2 , undefined

没有配对的时候就是undefined，默认值就是用来解决这种情况的。

使用场景1、交换变量的值

{let a=1,b=2；[a,b] = [b,a] ;  console.log(a,b,c) } //输出2,1

如果是ES5中，就必须使用中间变量做交换的工具。

场景2、接受返回值

{ function f(){return [1,2]} ;let a, b; [a,b] = f() ; console.log(a,b)}  //1,2

场景3、选择性接受

{ function f(){return [1 , 2 ，3，4，5，6]} ;let a, b; [a , , ,b] = f() ; console.log(a,b)}  //1,4

场景4、我们只关心数组的第一个值的时候

{ function f(){return [1 , 2 ，3，4，5，6]} ;let a, b; [a , ...b] = f() ; console.log(a,b)}  //1,[2,3,4,5,6]

3、4也可以混合使用

{ function f(){return [1 , 2 ，3，4，5，6]} ;let a, b; [a , ， ...b] = f() ; console.log(a,b)}  //1,[3,4,5,6]

对象

{let o = {p:42 , q:true} ; let {p,q} = o ; console.log(p,q) } //142,ture

默认值

{ let  {p = 5, q = 3} ={ p = 4};  console.log(p,q) } //4,3

使用的一个场景：

前端和后端通信，使用的数据格式是json，json也是一个对象。

打印的就是abc和test。嵌套的对象和数组。