ES6学习笔记-扩展运算符(...)

扩展运算符的定义：

es6中引入扩展运算符（...），它用于把一个数组转化为用逗号分隔的参数序列。

它常用在不定参数个数时的函数调用，数组合并等情形。

用法一:不定参数个数时的函数调用

<script type="text/javascript">
        function test(arr,...items) {  
            for (var i = 0; i < items.length; i++) {
                arr.push(items[i]);
            }
        }  
        var arr=[1,2,3];
        test(arr,[44],[55],[66]);
        console.log(arr);//[1,2,3,[44],[55],[66]]
</script>

用法二:数组合并

<script type="text/javascript">
        var arr1=[1,2,3,4];
        var arr2=[5,6,7,8];
        var arr3=[...arr1,...arr2];
        console.log('arr1',arr1);//[1,2,3,4]
        console.log('arr2',arr2);//[5,6,7,8]
        console.log('arr3',arr3);//[1,2,3,4,5,6,7,8]
</script>

用法三:将字符串转为正在的数组

<script type="text/javascript">

var arr=[...'qwewrtrtyyuu'];
        console.log(arr);// ["q", "w", "e", "w", "r", "t", "r", "t", "y", "y", "u", "u"]

 </script>

扩展运算符可以将字符串转为数组，当要注意的是一定要在待转的字符串外面加上中括号[];

用法四:对象的浅拷贝

  <script>
            var  a={
                name:'dfdfd',
                age:34,
                sex:'nv'
            }
            b={...a,age:22};
            console.log('b',b);//{name:'dfdfd',age:22,sex:'nv'}

} </script>

可以看到对象b的结果为{name:'dfdfd',age:22,sex:'nv'}这说明了扩展运算符可以把a的属性扩展称参数列表后赋值给b， 当b的age属性为22 这说明后面赋值的同名属性会覆盖前面的值。

 

用法五:析构赋值

 <script>
            var a=[1,2,3,4,5];
            let[b,c]=[...a];
            console.log('a',a);//[1,2,3,4,5]
            console.log('b',b);//1
            console.log('c',c);//2
        </script>