es6的解构赋值

来源于技术胖的视频总结，FrontJS，大勺孙喜贵博主的文章总结
1.简单的数组结构
在以前我们为变量赋值的时候这样写

let a=1
let b=2
let c=3

现在我们可以这样写

let [a,b,c]=[1,2,3]
console.log(c,b,a)//3 2 1

这种写法属于模式匹配，只要等号两边的模式相同，左边的变量就会被赋予对应的值，再看几个例子

let [header,[main]]=['yellow',['blue']]
console.log(header,main)//yellow blue

以上都是完全解构，再看一个不完全解构的例子,不完全解构指的是等号左边的模式只匹配一部分等号右边的数据，这种情况依然解构成功

let [x,y]=[1,2,3]
console.log(x,y)//1 2

如果等号右边的不是数组或者说是不可遍历的结构，那么将会报错

let [x,y]=1
console.log(x,y)

2.默认值（解构赋值允许默认值）

let [x,y=5]=[2]
console.log(x,y)//2 5

当数组成员是undefined的时候，默认值任然会生效

let [x,y=33333333]=[2,undefined]
console.log(x,y)//2 33333333

如果一个数组成员是null,那么默认值就不会生效

let [x,y=33333333]=[2,null]
console.log(x,y)//2 null

3.对象的解构赋值
变量名和属性名一致的情况下

let {a,b}={a:'凡人枫',b:'凡人安'}
console.log(a,b)//凡人枫 凡人安

如果变量名和属性名不一致，访问的时候必须要这么写，也就是说，对象解构赋值的实质是先找到同名的属性，再赋值给对应的变量，真正被赋值的是后者，而不是前者

let{a:name,b:age}={a:'凡人枫',b:'18'}
console.log(name,age)

注意如果在解构之前就定义了变量，那么代码会报错，我们家一个()就可以了

let foo;
([x,y] = [1,2])
console.log(x,y);

4.字符串的解构

const[a,b,c,d]='凡人'
console.log(a,b,c,d)//凡 人 undefined undefined

5.解构赋值的作用
5.1交换变量的值
以前我们交换变量的值是比较麻烦的，就像下面这种需要找中间变量

let x=1;
let y=2;

let c=y
y=x
x=c
console.log(x,y)//2,1

在es6中我们可以这样写

let x=1;
let y=2;
[x,y]=[y,x]
console.log(x,y)//2 1

5.2从函数返回多个值
返回数组

function example(){
    return [1,2,3]
}
let [a,b,c,d]=example()
console.log([a,b,c,d])//[1, 2, 3, undefined]

返回对象

function example(){
    return{
        a:111,
        b:222
    }
}
let {a,b}=example()
console.log({a,b})//{a: 111, b: 222}

5.3提取json数据

let jsonData={
    id:42,
    status:'OK',
    data:[222,333]
}
let {id,status,data:number}=jsonData
console.log(id,status,number)//42 "OK" (2) [222, 333]

let jsonData={
  title:'boss',
  test:[{
    title:'test',
    desc:"hahhahh"
  }]
}

let {title:truetitle,test:[{title:cntest}]}=jsonData
console.log(truetitle,cntest)

5.3遍历map结构

const map = new Map()
map.set('first','hello')
map.set('second','world')

for(let [key,value] of map){
    console.log(key+' is '+value)
}

5.4输入模块的指定方法

const { SourceMapConsumer, SourceNode } = require("source-map");

5.5对象的函数解构

let json={
    name:'凡人枫',
    age:'23',
    sex:'femail'
}
var add=({name,age})=>{
    console.log(name,age)//凡人枫 23
}
add(json)

5.6数组的函数解构

let arr=['fanrenfeng','23']
var fun = (a,b)=>{
    console.log(a,b)//fanrenfeng 23
}
fun(...arr)