正文

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

IP云
IP云V管理员/3 阅读
11/28
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

扩展运算符的定义：
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:,

                sex:'nv'

            }

            b={...a,age:};

            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=[,,,,];

            let[b,c]=[...a];

            console.log('a',a);//[1,2,3,4,5]

            console.log('b',b);//

            console.log('c',c);//

        </script>

相关阅读

目录[+]