JavaScript运算符（展开运算符）

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

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

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

2.6.1 数据解构

其实就是把数组的每个数据拆开然后放进去。

{
let[u,...y]= ['tom','rlva','lili']
console.log(u)
console.log(y)

}

2.6.2 数据构造

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

{  
    // 
    // 把数组 展开 放置存储到 一个大的数组中去
    let x = [100,20,500]
    let y=['lili','小马过河']
    let r=[...x,...y]
    console.log(r)
}

 

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

{
    let arr1 = ['a','b']
    let arr2 = ['c','d']
    // 将两个数组里面的每个数据项 分别展开 
    let arr = [...arr1,...arr2]
    console.log(arr)
}

 

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

 // 数组加上对象返回新的数组
   let x=[
       {
           uname:'lili'
       }
   ];
   let y={
       sex:'女'
   }
   // 注意：y前不要写展开运算符，否则会报bug
   let arr =[...x,y]
   console.log(arr)
}

 

类数组对象变成数组

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

{
    window.onload = function(){
        let list = document.getElementsByTagName('div')
        console.log(list)
        let arr = [...list]
        console.log(arr)
    }
}
//list是类数组对象，而我们通过使用展开运算符可以使之将其变成数组。

 打印预览：

（4）数组+字符串。

{
    // 数组+字符串
    let x = ['tom','小许']
    let y = 'elva'
    let z = [...x,y] //将tom和小许，这两个数据 展开 放在 这个数组中
    console.log(z)
}

 

（5）两数组+对象。

let x = {
    name:['tom','elva'],
    age:18
}
let y = {
    ...x,
    age:18,
   arr:[...x.name]
}
console.log(y)