ES6变量的解构赋值--补充篇

目录

        字符串解构赋值

        函数参数的解构赋值

        圆括号问题

        使用情况

        不能使用情况

        变量解构赋值应用

---

字符串解构赋值

        字符串也可以进行解构赋值，这是因为字符串被转换成一个类似数组的对象

//字符串解构赋值
let [a,b,c] = 'string';
console.log(a);   //s
console.log(b);   //t 
console.log(c);   //r

        类似数组的对象都有一个length属性，故可以对这个属性进行解构赋值

let {length : len} = 'string';
console.log(len);   //6

函数参数的解构赋值

       函数参数也可以使用解构赋值，我们可以看看下面的例子：

function fun([a,b]){
    console.log(a+b);
}
fun([1,2]);   //3

        上例中，函数fun的参数不是数组，而是变量a、b。也就是说表面上参数是传入一个数组，实际上在传入参数时，数组参数是被结构成变量a、b。

        函数参数的解构也可以使用默认值：

function fun({a=1,b=2} = {}){
    return [a,b];
} 
console.log(fun({a:10,b:20}));  //[ 10, 20 ]
console.log(fun({a:10}));       //[ 10, 2 ]
console.log(fun({}));           //[ 1, 2 ]
console.log(fun());             //[ 1, 2 ]

        上例中，函数fun的参数是一个对象，对这个对象进行解构，得到变量a和b的值，如果结构失败，就赋予默认值。

        换一种写法，我们会发现我们得到不同的结果：

function fun({a,b} = {a:1,b:2}){
    return [a,b];
} 
console.log(fun({a:10,b:20}));  //[ 10, 20 ]
console.log(fun({a:10}));       //[ 10, undefined ]
console.log(fun({}));           //[ undefined, undefined ]
console.log(fun());             //[ 1, 2 ]

        上述代码之所以和之前不同，是因为我们是为函数fun的参数指定默认值，而不是为变量a和b指定默认值，也就是说实质上a和b是没有默认值的，故没有赋值就输出undefined。

圆括号问题

        解构赋值中的圆括号是一个易错点，在使用过程中一定要注意圆括号的使用场景

使用情况

        可以使用圆括号的情况只有一种：赋值语句的非模式部分。这种情况下可以使用圆括号。

[(a)] = [10];
console.log(a);   //10

({b:(c)} = {});
console.log(c);   //undefined

        上例可以正确执行，也就是可以使用的情况需要满足：①是赋值语句不是声明语句 ②圆括号不属于模式的一部分

不能使用情况

        有三种解构赋值情况不能使用圆括号

①变量声明语句

//报错
let [(a)] = [1];
let {x:(b)} = {};
let ({x:b}) = {};
let {(x:b)} = {};
let {(x):b} = {};
let {a:({b:b})} = {a:{b:10}};

        上述6种语句都会报错，因为这些都属于变量声明语句，模式中不能使用圆括号。

②函数参数

        函数参数属于变量声明，所以也不能使用圆括号

//报错
function fun([(a)]){
    return a;
}
function fun([a,(b)]){
    return b;
}

③赋值语句模式

//整个模式放在圆括号中--报错
({a:b}) = {a:10};
([a]) = [10];
//部分模式放在圆括号中--报错
[({a:b}),{c:d}] = [{},{}];

变量解构赋值应用

        变量的解构赋值在实际使用中能够带来许多便处

①交换变量值

        通过变量的解构赋值，进行交换我们就只需要一行代码，并且不需要创造额外的空空值变量在作为交换中介。

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

②从函数返回多个值

        我们知道，函数只能有一个return语句，所以在es5中只能返回一个值，但是在es6中我们通过解构赋值可以做到返回多个值。只需要将它们放在数组或者对象中返回，再进行解构赋值就可以做到。

//返回数组
function arr(){
    return [1,2,3];
}
let [a,b,c] = arr();
console.log(a,b,c);  //1 2 3
//返回对象
function obj(){
    return{
        aa:10,
        bb:20,
        cc:30
    };
}
let {aa,bb,cc} = obj();
console.log(aa,bb,cc);  //10 20 30

③提取对象属性值

let obj = {
    one:123,
    two:'abc',
    three:[1,2,3]
};
let {one,two,three:arr} = obj;
console.log(one,two,arr);   //123 abc [ 1, 2, 3 ]