js解构赋值

解构赋值

形式

• let [变量1:值1,变量2:值2……] = 数组
• let [变量1,变量2……] = 数组
• let {变量1:属性1,变量2:属性2……} = 对象
• let {变量1,变量2……} = 对象

要求右边的变量或对象含有左边的变量名字，否则就为undefined

解构赋值例子

结构默认值

let [a, b, c = 1] = [1,2];
//a : 1,b : 2,c : 3

let {n, a} = {n:"泡泡龙404",a:18};
//n:'泡泡龙404',a:18

数组的解构赋值

let [a, b, c] = [1, 2];
//a:1,b:2,c:undefined

let [a, b] = [1, [2, 3]];
//a:1,b:[2, 3]

let [a,b] = [0,[1,2,3],[4,5]][2]
//相当于[a,b] = [4,5]   a:4,b:5

let [a,[b,[c,d]]] = [1,[2,[3,4]]]
//a:1,b:2,c:3,d:4

let [a,b,c,d] = "123";
//a:'1',b:'2',c:'3',d:undefined

//当值为undefined时，会用到默认值
let [a = 1,b = 2,c = 3] = [4,5,undefined];
//a:4,b:5,c:3

对象的解构赋值

let {n:name,a:age} = {n:"泡泡龙404",a:10};
//name:'泡泡龙404',age:10

//当属性和值都采取相同命名时可以只写如下形式
let {n,a} = {n:"泡泡龙404",a:10};//同{n:n,a:a}
//n:'泡泡龙404',a:10
let{a:age,n:name} = {n:"泡泡龙404",a:10};
//反过来写结果也相同，name:'泡泡龙404',age:10

let {abs,random} = Math;
//abs,random都是Math对象中的函数，具体可查看Math的内容

函数参数的解构赋值

function add([a = 3,b = 4]){
    console.log(a + b);
}
add([1,2]);//3
add();//报错
add([])//7


function outPut(obj){
    console.log(`我${obj.age}岁了！`);
}
outPut({age:200});//我200岁了

function outPut({name,age,sex}){
    console.log(`我是${name},性别${sex},今年${age}岁`);
}
outPut({name:"泡泡龙404",age:100,sex:"男"});
//我是泡泡龙404,性别男,今年100岁

function outPut({name,age,sex = "女"}){
    console.log(`我是${name},性别${sex},今年${age}岁`);
}
outPut({name:"泡泡龙404",age:100});
//我是泡泡龙404,性别女,今年100岁


function show({a, b} = {a:1, b:2}){
    console.log(a,b);
}
show();//1 2
show({});//undefined undefined
show({b:1});//undefined 1

function show({a = 3, b = 4} = {a:1, b:2}){
    console.log(a,b);
}
show();//1 2
show({});//3 4
show({b:1});//3 1