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