ES6解构赋值总结未完待续...

对象解构赋值

基本用法

let obj = {
    name:'张三',
    age:23,
    like:'LOL'
}

let {name,age,like} = obj
console.log(name,age,like)  //输出: 张三 23 LOL

let obj = {
    name:'张三',
    age:23,
    like:'LOL'
}

let {age,name,like} = obj
console.log(name,age,like)  //输出: 张三 23 LOL

let obj = {
    name:'张三',
    age:23,
    like:'LOL'
}

let {age} = obj
console.log(age)  //输出: 23

let obj = {
    name:'张三',
    age:23,
    like:'LOL'
}
let obj2 = {
    name:'李四',
    age:18,
    like:'QQ飞车'
}

let {age,name,like} = obj
console.log(name,age,like)  //输出: 张三 23 LOL

let {age:age1,name:name1,like:like1} = obj2
console.log(age1,name1,like1)  //输出: 18 "李四" "QQ飞车"

Tip

左边{ }里包含属性名顺序和右边待解构的对象属性无关
左边{ }里数量和右边待解构的对象数量不需要一致
一般{ }里的名称和右边待解构的对象属性名一致，但是如果是多个对象,需要用新的属性名接收

带有默认值的解构

let obj = {
    name:'张三',
    age:23,
    like:'LOL'
}

let {age,like='敲代码'} = obj
console.log(age,like)  //输出: 23  "LOL"

let obj = {
    name:'张三',
    age:23,
    like:'LOL'
}

let {age,skill='一秒5行代码'} = obj
console.log(age,skill)  //输出: 23  "一秒5行代码"

结合...拓展运算符解构

let obj = {
    name:'张三',
    age:23,
    like:'LOL'
}

let {age,...rest} = obj
console.log(age,rest)  //输出: 23  {name: "张三", like: "LOL"}

复杂对象解构

let tree= {
    size:{
        width:100,
        height:200,
    },
    child:['span','a'],
    element:'div'
}
let { size:{width}, child:[child1] , element} = tree
console.log(width,child1) //输出: 100 "span" "div"

复杂对象解构小技巧：左边对象结构和右边对象结构保持一致

业务使用

函数参数解构赋值

function add({ x , y }){
    console.log(x+y)
}
add({x:1,y:2}) //输出: 3

function add({ x=3 , y }){
    console.log(x+y)
}
add({y:2}) //输出: 5

function add({ x=3 , y }={}){
    console.log(x,y)
}
add() //输出: 3 undefined

数组解构赋值

未完待续...