这里再考虑一个场景,我这里生成一个随机数组
js
function randomArr(){
const arr = [];
for(let i = 0;i<10;i++){
arr.push(Math.random());
}
return arr;
}这个函数会返回 10 个随机数组成的数组
这里我有这样一个函数
js
function sum(...args){
return args.reduce(function(result,item){
return result + item;
});
}也就是说,我这个 sum 函数是不定参,我要把这个数组求和,就得把这个数组的每一项作为参数丢到 sum 中去。
这个问题看起来简单,但是我们是解决不了的,我如何将一个数组的每一项取出来作为参数传递到一个函数中去呢?ES 6 提供了一个新语法来解决这个问题,就是展开运算符。展开运算符可以将数组的每一项拿出来作为参数来传递,而不是把整个数组作为一个参数进行传递。
我们只需要传入参数的时候在前面加上三个点,就可以实现数组的展开。
js
function sum(a,b,c){
return a+b+c;
}
const arr = [1,2,3];
console.log(sum(...arr));//这样就相当于console.log(sum(1,2,3));可以看到,在传入参数的时候,在数组的前面加上三个点,就可以把数组里面的每一项展开为一个参数进行传递。
这里注意和剩余参数进行区分
实际上,我们应该意识到,展开运算符本质上是把数组的两个中括号给他干到,举个例子
js
const arr = [1,2,3,4,5];此时如果使用 ...arr,得到的其实就是 1,2,3,4,5,实际上就是把中括号去掉了,这个其实非常好理解,所以,展开运算符不止可以用在参数的传递。
js
const arr = [1,2,3,4,5];
const arr2 = [...arr,6,7];//得到[1,2,3,4,5,6,7]能懂吧,实际上 ...arr 本质上就是 1,2,3,4,5,所以第二行相当于就是 const arr2 = [1,2,3,4,5,6,7];,实际上,这种方式可以很方便的用来拷贝数组。
在 ES 7,还可以对对象进行展开,对数组展开是去掉两边的中括号,那么对象展开实际上就可以去掉两边的大括号。
js
const obj1 = {
name:"凌凌",
age:18
}
const obj2 = {
...obj1,
height:180
}...obj1 相当于就是 name:"凌凌",age:18
注意,这里说严谨一点,实际上上面
...obj1相当于name:obj1.name,age:obj1.age,所以实际上这种克隆属于浅克隆。
js
const obj1 = {
name:"凌凌",
age:18
}
const obj2 = {
...obj1,
name:"云云"
}在这个例子中,obj2 中先展开了 obj1,然后给 obj2 中赋值了一个 name 属性,由于对象具有不可重复的特点,所以,obj2 实际上就是把 obj1 复制过来,然后修改了 name 属性。
展开运算符在对象和数组的克隆是非常常见的,也是非常好用的。