ES6新特性-解构赋值

Spread / Rest 操作符

Spread / Rest 操作符 ：Spread / Rest 操作符指的是 '...'，具体是 Spread 还是 Rest 需要看上下文语境。

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

spread运算符常常用于数组的解析与构造：

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

(2)当被用于函数传参时，是一个 Rest 操作符：当被用于函数传参时，是一个 Rest 操作符：

function foo(...args) {
              console.log(args);
            }
            foo( 1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

数组的解构

(1)在ES5标准中赋值多个变量采用的方法是：

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

ES6提供了更简洁的解构赋值来实现上述变量的定义：

            let [a,b,c] = [10,20,30];
            console.log(a);
            console.log(b);
            console.log(c);

等号右边的值会按照顺序依次赋值给左边的变量。

(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)在ES6中可以通过解构赋值来互换变量

        let a = 10;
        let b = 20;
        [a,b] = [b,a];
        console.log(a,b)

对象的解构

(1)对象解构的写法与数组解构类似

  let obj = {
            name: '张三',
            age: 20,
            height: '178com'
        }

        let { name,age,height } = obj; //变量的名称必须和对象的属性名相同
        console.log(name,age,height);

(2)也可以解构多层对象

let person = {
    name: '张三',
    age: 20,
    family: {
        father: '张武',
        mother: '李燕'
    }
}
let { name,age,family: {father,mother }} = person
console.log(name,father)

(3)在解构对象时也可以自定义变量名称：

   let obj = {
           name: '张三',
           ge: 20
      }
   let { name:myname,age:myage } = obj;
   console.log(myname,myage);

默认值和参数的解构

(1)不管是数组的解构赋值,还是对象的解构赋值都可以添加默认参数。

   let obj = {
       name: '李四',
       age: 20
    }

   let { name,age,height="178com" } = obj;
   console.log(height); //178com

(2)在函数参数中使用解构,参数解构也可以给默认参数

  function fun({name,age,height="178com"} = {}){
                console.log(name,age); //张三,20
            }
            let obj = {
                name: '张三',
                age: 20
            }
     fun(obj)