ES6 解构赋值

解构赋值

 
 定义：ES6允许按照一定模式从数组和对象中提取值，然后对变量进行赋值，该操作即为解构( Destructuring ) 。
 

数组解构

 数组的元素是按次序排列的，变量的取值是由它的位置决定。

{
    let [r,s,t] = [1,2,3]
    console.log(r,s,t)//1 2 3
}

 数组解构时会严格按照顺序进行赋值，如果解构不成功，变量的值就等于undefined。

{
    let [r,s,t] = [2,3]
    console.log(r,s,t)//2 3 undefined
}

 只有当变量严格等于undefined时，默认值才会生效

 交换两变量值，不借助中间变量 😃

{
    let a = 2
    let b = 3
    [a,b] = [b,a]
    console.log(a,b)//3 2
}

 结合剩余参量 😃

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

 

对象解构

 对象的属性没有次序，变量必须与属性同名才能取到正确的值

{
    let{age:a,name:n} = {name:"Ann",age:20}
    // console.log(age,name)//报错
    console.log(n,a)//Ann 20
}

 此处name和age是匹配模式，真正的变量是a,n

{
    let {age,name} = {name:"Ann",age:20}//等价于下一行代码
    //let {age:age,name:name} = {name:"Ann",age:20}
    console.log(age,name)//20 Ann
}

 对已经声明的对象进行解构时需要加上( )将解构赋值整个看作表达式，添加( )

let obj = {}
let arr = [];
({p1 : obj.data,p2 : arr[0]} = {p1:123,p2:true});
console.log(obj,arr)// { data: 123 } [ true ]

 

字符串解构

 将字符串看作一个类似于数组的对象。

const [a,b] = 'qwe'
console.log(a,b)//q w

 类似于数组的对象都有一个length属性，因此还可以对这个属性进行解构

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

函数参数的解构赋值

 函数调用时，会将实参传递给形参，其过程是实参复制给形参。因此，也可以使用解构赋值。
 
 采用数组解构赋值：

function add([x,y = 10]){
    return x+y
}
let r = add([1])//将1赋给x
console.log(r)// 11

 采用对象解构赋值：

function add({x,y=10}){
    return x+y
}
let r = add({x:20})//将20赋给x
console.log(r)//30