ES6（解构赋值）

Spread / Rest操作符

Spread / Rest操作符指的是"…"，具体是Spread还是Rest需要结合上下文语境。

（1）当被用于迭代器中时，它是一个Spread操作符：
迭代器（Iterator）是按照一定的顺序对一个或多个容器中的元素进行遍历的一种机制。

//传统做法

function fn(x,y,z){
    console.log(x,y,z);
}

var arr = [1,2,3];

fn(arr[0],arr[1],arr[2]);


//"..."操作符

function fn(x,y,z){
    console.log(x,y,z);
}

var arr = [1,2,3];

fn(...arr);

（2）当被用于函数传参时，是一个rest操作符：

function fn(...args){
    console.log(args);
}

fn(1,2,3,4,5);    //结果为[1,2,3,4,5]

数组的解构

1.变量的声明赋值

//ES5中变量的声明赋值

var a=10,b=20,c=30;

//ES6变量的声明赋值

let [a,b,c] = [10,20,30];

2.非一一对应关系的赋值

//非一一对应关系的赋值

let [a,b] = [10,20,30];

console.log(a,b);    //结果为10，20

let [a,b,c] = [10,20];

console.log(a);    //结果为10
console.log(b);    //结果为20
console.log(c);    //结果为undefined

3.通过"…"把特定的元素放在变量里

let [a,...arr] = [10,20,30];

console.log(a);    //结果为10
console.log(arr);    //结果为[20,30]

4.通过解构赋值来交换变量

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

console.log(a,b);

[a,b] = [b,a];    //交换a和b的值

console.log(a,b);    //结果为2，1

对象的解构

1.简单对象的解构

let obj = {
    name: "张三",
    age: 18,
    gender: "男"
}

let {name,age,gender} = obj;    //变量的名称必须和对象的属性名相同

console.log(name,age,gender);

2.多层对象的解构

let obj = {
    name: "张三",
    age: 18,
    gender: "男",
    friends: {
        friend1: "李四",
        friend2: "王五",
        friend3: "赵六",
    }
}

let {friends:{friend1,friend2}} = obj;

console.log(friend1,friend2);    //结果为李四，王五

3.在结构对象时也可以自定义变量名称

let obj = {
    name: "张三",
    age: 18,
    gender: "男"
}

let {name:myname,age:myage} = obj;

console.log(myname,myage);    //结果为张三，18

4.解构的默认值

不管时对象的解构赋值，还是对象的解构赋值都可以添加默认的参数。

let obj = {
    name: "张三",
    age: 18,
    gender: "男"
}

let {name,hobby="足球"} = obj;

console.log(name,hobby);    //结果为张三，足球

5.参数的解构

在函数参数中解构，也可以添加默认参数。

function fun({name,age,hobby="足球"} = {}){    //函数调用时相当于用obj替换{}

    console.log(name,age,hobby);    //输出结果为张三,18,足球
}

let obj = {
    name: "张三",
    age: 18,
}

fun(obj);