JavaScript ES6 变量解构赋值

一、数组解构赋值

1.基本格式

/**基本形式**/
let [a,b,c] = [1,2,3]
// a=1,b=2,c=3
/**嵌套解构**/
let [a,[b,[c]]] = [1,[2,[3]]];
// a=1,b=2,c=3
let [,,a] = [1,2,3];
// a=3
let [a,,b] = [1,2,3];
// a=1,b=3
let [a,...b] = [1,2,3,4];
// a=1,b=[2,3,4]
let [a,b,...c] = [1]
// a=1,b=undefined,c=[]

ps.如果解构不成功，变量的值就等于undefined，如果等号两边的数据类型不相同，会解构失败，如let [foo] = 1,let [foo] = false;

2.默认值

在对变量进行结构赋值的时候允许指定默认值

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

ps.如果一个数组成员!==undefined，默认值是不会生效的。

二、对象解构赋值

1.基本格式

let {a,b} = {a=1,b=2};
// a=1,b=2
/** 变量名和属性名不同 **/
let {a:s} = {a=1};
// s=1
/** 嵌套解构 **/
let obj = {
    p:[
        'Hello',
        {y:'World'}    
    ]
};
let {p,p:[x,{y}]} = obj;
// p=['Hello',{y:'World'}]
// x='Hello'
// y='World'
/** 默认值 **/
let {a=1} = {}
// a=1

三、字符串解构赋值

let [a,b,c,d,e] = "hello"
// a='h'
// b='e'
// c='l'
// d='l'
// e='o'

四、变量解构赋值的作用

1.交换变量的值

let x = 1, y = 2;
[x,y] = [y,x];
// x=2,y=1

2.从函数返回多个值

function func1() {
    return [1,2,3];
}
let [a,b,c] = func1();

function func2() {
    return {
        x:1,
        y:2    
    };
}
let {x,y} = func2();

3.函数参数的定义

function f([x,y,z]) {}
f([1,2,3]);
function(x,y,z) {}
f({z:3,x:1,y:2})

4.提取JSON数据

let josnData = {
    id:42,
    status:'OK',
    data:[123,456],
}
let {id,status,data:number} = jsonData;
// id=42,status='OK',number=[123,456]