展开运算符

(...)展开运算符又叫剩余运算符。

展开运算符（spread operator）允许一个表达式在某处展开。展开运算符在多个参数（用于函数调用）或多个元素（用于数组字面量）或者多个变量（用于解构赋值）的地方可以使用。

展开运算符不能用在对象当中，因为目前展开运算符只能在可遍历对象（iterables）可用。iterables的实现是依靠[Symbol.iterator]函数，而目前只有Array,Set,String内置[Symbol.iterator]方法，而Object尚未内置该方法，因此无法使用展开运算符。不过ES7草案当中已经加入了对象展开运算符特性。

数据构造

（1）两个对象连接返回新的对象。

     let x = {
                name:'tom'
            };
            let y = {
                age:19
            }
            let z = {...x,...y};
            console.log(z);

预览效果

（2）两两个数组连接返回新的数组。在ES6的世界中，我们可以直接加一个数组直接合并到另外一个数组当中。

  let x = [100,20,500]
            let y = ['lili','jerry']
            let z = [...x,...y]
            console.log(z);

 预览效果

（3）数组加上对象返回新的数组

 let x = [{
                uname:'lili'
            }];
            let y = {
                age:19
            };
            let z = [...x,y];
            console.log(z);

  预览效果

类数组对象变成数组

当你对dom中（页面中）标签元素进行抓取的时候，这些标签元素会形成一个集合，这个集合我们称之为类数组对象。

展开运算符可以将一个类数组对象变成一个真正的数组对象。

    
盒子1
    
盒子2
    

  预览效果

（4）数组+字符串

 let x = ['elva','tom',100,200];
        let y = 'lili';
        // 将x里面的内容，展开放置在 下面这个数组中
        let z = [...x,y];
        console.log(z);

  预览效果

（5）两数组+对象。

    {
       
        let x = {
            name: ['tom','elva'],
            age: 18
        }
        //(1) 把x这个对象，展开放置到y这个对象中
        // (2)将x对象中的name属性上的值，展开放置在y对象的arr属性上
        let y = {
            ...x,
            age: 20,
            arr: [...x.name],
        }
        console.log(y);
    }
    {
        let x = {
            name: ['tom','elva'],
            age: [18,30,29,18]
        }
        //(1) 把x这个对象，展开放置到y这个对象中
        // (2)将x对象中的name属性上的值，展开放置在y对象的arr属性上


        // 展开一定是一个集合，单个内容 不需要展开
        let y = {
            ...x,
            age: 20,
            arr: [...x.name,...x.age]
            // 把x对象中的age放进到y对象里面来
            //  arr: [...x,name,x.age]
        }
        console.log(y);
    }

   预览效果