js中’...‘符号的作用

...符号让js许多...写法变得简便。

1.在js解构赋值的运用

如代码

let obj={

name:'tom',

age:18,

id:'123456'

}

let {name,...others}=obj;

name//tom

others//{age:18,id:'123456'}

2.解包可迭代对象

合并数组

let a1=[1,2];

let a2=[3,4];

al.push(...a2);//合并两个数组

复制数组

如果直接把一个数组变量赋值给另一个，是将引用地址赋值 即

let a=[1,2] 
let b=a; 
b.push(3)//[1,2,3]
a//[1,2,3]

但如果我们只想复制它的值可以这样

 let a=[1,2]
 let b=[...a];
 b.push(5)//b的值[1,2,5]
 a//a的值[1,2]

合并对象

let obj1={a:1,b:'',c:20}
let obj2={a:2,c:0,d:'123'}
console.log({...obj1,...obj2})//{a: 2, b: '', c: 0, d: '123'}
console.log({obj1,...obj2})//{obj1: {…}, a: 2, c: 0, d: '123'}

可以自己在浏览器控制台试试哦

3.为 JavaScript 函数定义 Rest 参数

如果一个 JavaScript 函数需要接受可变数量的参数，我们就可以使用这三个点来定义一个rest参数：

function sum_arr(...input){
let ret = 0;
for(const i of input){
ret+=i;
}
return ret;
}
sum_arr(1,2,3,4)
10
sum_arr(1,2077)
2078

如上所示，这三个点使函数能接收可变量参数，并将它存储在一个数组中。这个特性使得 Javascript 函数更灵活更强大。

这里需要注意的是，rest 参数是收集所有剩余参数，所以它必须是函数的最后一个参数，如果我们把它放在中间，则会引发错误：

function test(a1,...a2,a3){
return;
}
Uncaught SyntaxError: Rest parameter must be last formal parameter