一.JavaScript是ECMAScript的实现和扩展，ES6标准的制定也为JavaScript加⼊了许多新特性。本⽂主要记录展开运算符。

二.使用场景与注意点:

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

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

三.代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        /* 
        1.展开运算符:  ...
            相当于对象遍历的简写
        2.应用 
            2.1 连接两个数组
            2.2 求数组最大值
        */

        /* let arr1 = [10,20,30]
        let arr2 = [40,50,60]

        //ES5 :  concat()
        // let arr = arr1.concat(arr2)
        // arr.push(70)
        //ES6
        let arr = [...arr1,...arr2,70]
        console.log( arr )

        //求数组最大值

        let max = Math.max(...arr1,...arr2)
        console.log( max ) */

        // 展开运算符:...
        // 作用:类似于对象遍历
        // 场景:
        // (1)用于连接数组/对象
        // (2)用于求数组最大值

        // 1.连接数组
        let arr1 = [10, 20, 30]
        let arr2 = [40, 50, 60]
        // ES5:arr.concat()
        // let arr = arr1.concat(arr2)
        // console.log(arr)
        // ES6: arr1.push(...arr2)
        arr1.push(...arr2)
        console.log(arr1)

        // 2.连接对象
        let student = {
            score:45,
            sex:'男'
        }
        let obj = {
            name:'张三',
            age:56,
            ...student
        }
        console.log(obj)

        // 3.求数组最大值
        let newArr = [34,56,4,5,6]
        console.log(Math.max(...newArr))
    </script>
</body>

</html>

四.效果

五.用法一:数组字⾯量中使⽤展开运算符

在ES6的世界中，我们可以直接加⼀个数组直接合并到另外⼀个数组当中：

var arr1=['a','b','c'];

var arr2=[...arr1,'d','e']; //['a','b','c','d','e']

展开运算符也可以⽤在push函数中，可以不⽤再⽤apply()函数来合并两个数组：

var arr1=['a','b','c'];

var arr2=['d','e'];

arr1.push(...arr2); //['a','b','c','d','e']

六.用法二:⽤于解构赋值

解构赋值也是ES6中的⼀个特性，⽽这个展开运算符可以⽤于部分情景：

let [arg1,arg2,...arg3] = [1, 2, 3, 4];

arg1 //1

arg2 //2

arg3 //['3','4']

展开运算符在解构赋值中的作⽤跟之前的作⽤看上去是相反的，将多个数组项组合成了⼀个新数组。

不过要注意，解构赋值中展开运算符只能⽤在最后：

let [arg1,...arg2,arg3] = [1, 2, 3, 4]; //报错

七.用法三:ES7草案中的对象展开运算符

ES7中的对象展开运算符可以让我们更快捷地操作对象：

let {x,y,...z}={x:1,y:2,a:3,b:4};

x; //1

y; //2

z; //{a:3,b:4}

如上，我们可以将⼀个对象当中的对象的⼀部分取出来成为⼀个新对象赋值给展开运算符的参数。

同时，我们也可以像数组插⼊那样将⼀个对象插⼊到另外⼀个对象当中：

let z={a:3,b:4};

let n={x:1,y:2,...z};

n; //{x:1,y:2,a:3,b:4}

另外还有很多⽤处，⽐如可以合并两个对象：

let a={x:1,y:2};

let b={z:3};

let ab={...a,...b};

ab //{x:1,y:2,z:3}

八.构造字面量对象使用展开语法

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 10-构造字面量对象使用展开语法
        let person = {name:'tom',age:18}
        let person2 = {...person}
        // console.log(...person);//报错,展开运算符不能展开元素
        person.name = 'jerry'
        console.log(person2);
        console.log(person);
        // 合并
        let person3 = {...person,name:'jack',address:'地球'}
        console.log(person3);
    </script>
</body>
</html>

效果:

九.总结

展开运算符在工作中还是可以经常看到它的身影的,它的作用是在调用函数、数组构造时将数组表达式或字符串在语法层面进行展开; 构建字面量的对象时以键值对的形式进行展开。

JavaScript中展开运算符的使用方式