扩展运算符和rest运算符

扩展运算符和rest运算符都是三个点…,可以当做没什么区别,但各有各的用处。


扩展运算符

  1. 第一个用处就是在定义函数时不知道有几个参数,这个时候扩展运算符就可以登场了,下面的arg只是表示参数的意思,可以改成其他字符
1
2
3
4
5
6
7
function func(...arg){
console.log(arg[0]);
console.log(arg[1]);
console.log(arg[2]);
console.log(arg[3]);
}
func(1,2,3);

输出的结果是1,2,3,undefined。

看看转换成的ES5语法,真的为我们简化了很多东西

1
2
3
4
5
6
7
function func() {
console.log(arguments.length <= 0 ? undefined : arguments[0]);
console.log(arguments.length <= 1 ? undefined : arguments[1]);
console.log(arguments.length <= 2 ? undefined : arguments[2]);
console.log(arguments.length <= 3 ? undefined : arguments[3]);
}
func(1, 2, 3);

而且我们可以看到他考虑到了undefned,就不会引起报错,如果我们用常规的ES5写,像下面这样,就会引发报错

1
2
3
4
5
6
7
function func(a, b, c) {
console.log(a);
console.log(b);
console.log(c);
console.log(d);
}
func(1, 2, 3);
  1. 第二个用处就是在赋值数组的时候,其实在ES5中我们以为的赋值数组并不是赋值,他没有分配新的内存空间,可以理解为C++中的引用,当我们改变被赋值的数组,实际上我们不希望原来的数组也被改变,但是他会被改变,而用了ES6的对象扩展运算符就能很好的解决这个问题。
1
2
3
4
5
let arr1 = [1,2,3];
let arr2 = [...arr1];
arr2.push(4);
console.log(arr2);
console.log(arr1);

这时打印结果就是我们想看到的。而如果用ES5的方法(arr2 = arr1),arr1也会被改变,因此使用扩展运算符避免了很多麻烦,不报错的逻辑问题才是最可怕的。

rest运算符

rest是剩下的意思,那他的用途跟扩展运算符不太一样的就是当参数你已知前面的几个后面不知道的时候就是rest上场的时候

1
2
3
4
5
6
7
function func(first,...arg){
console.log(arg.length);
for(let val of arg){
console.log(val);
}
}
func(1,2,3,4,5);

这样我就能得到我除了已知的剩下的有几个参数,分别是什么。

-------------本文结束感谢您的阅读-------------