ES6解构--数组解构,对象的解构,函数参数自动解构说明

解构：自动解析数组或对象中的值，并赋值给指定的变量。

在ES6中,可以使用解构从数组和对象提取值并赋值给独特的变量，即将数组或对象中的值，拆成一个一个变量。

根据类型的划分解构可以分为1.数组解构2.对象解构3.函数参数解构

数组解构  

将数组中的值取出来并一一赋值给不同的变量,我们来看下ES5的写法和ES6的区别

    //ES5
    var arr = [3,4,5];
    var a = arr[0];
    var b = arr[1];
    var c = arr[2];

    //ES6
    var [a, b, c] = arr;
    var [a, b, c] = [3,4,5];
    console.log(a, b, c);

ES6的写法明显简单粗暴,节省代码量

另外,变量的声明甚至可以跳过部分值，但是解构的变量 需要使用,占位

    var arr = [3,4,5,6,7];
    var [a,b,c,,e] = arr;
    console.log(a, b, c, e);  //3 4 5 7

对象的解构

对象解构  将对象中的属性值取出，并一一赋值给和属性名相同的变量

//ES5写法:
    var obj = {
        "age":30,
        "sex":"男",
        "say":function(){
            return "hello";
        }
    };
    var age = obj.age;
    var sex = obj.sex;
//ES6写法:
var {age,sex,say} = obj;

跳过某些值 直接不写解构变量

注意:变量名 必须和对象的成员名对应

var {age,say} = obj;
console.log(age, say);
console.log( say() );

函数参数自动解构

(1)函数参数使用解构数组或解构对象形式

1.函数形参，使用解构数组形式，调用函数时需要传递数组实参

function f1([x,y,z]){
    console.log(x,y,z);
}
var arr = [1,2,3];
f1(arr);

//相当于
/*
function f1(a){
    var [x,y,z] = a;
    console.log(x,y,z);
}
var arr = [1,2,3];
f1(arr);
*/

2.函数形参，使用解构对象形式，调用函数时需要传递对象实参

function f2({nickname,age,sex}){
    //变量名与对象成员名一致
    console.log(nickname,age,sex);
}
var obj = {"nickname":"zhangsan", "age":40, "sex":"男"};
f2(obj);

//相当于
/*
function f1(a){
    var {nickname, age, sex} = a;
    console.log(nickname,age,sex);
}
var obj = {"nickname":"zhangsan", "age":40, "sex":"男"};
f2(obj);
*/

(2)默认值与解构数组

函数参数使用解构数组 并设置默认值

1.函数参数使用解构数组，调用函数不传参数会报错

function fn([x, y, z]){
    console.log(x, y, z);
}
fn(); //会报错
</script>

2.函数参数使用解构数组，对整个数组设置默认值为空数组

function f1([x, y, z] = []){
    console.log(x, y, z);
}
f1(); //不报错  x y z 都是 undefined

3.函数参数使用解构数组，对整个数组设置默认值,数组中每个变量对应一个默认值

function f2([x, y, z] = [1,2,3]){
    console.log(x, y, z);
}
f2(); //不报错  x=1 y=2 z=3
f2([4,5,6]); // x=4 y=5 z=6

4.函数参数使用解构数组，对整个数组设置默认值为空数组, 在解构数组中对每个变量设置一个默认值

function f3([x=1, y=2, z=3]=[]){
    console.log(x, y, z);
}
f3(); //不报错  x=1 y=2 z=3
f3([4,5,6]); // x=4 y=5 z=6