运算符可以很好的为我们解决参数和对象数组未知情况下的编程, 让我们的代码更健壮和简洁.
运算符有两种: 对象扩展运算符与 REST 运算符.
1. 对象扩展 ( spread) 运算符(...)
(1)解决参数个数问题
以前我们编程是传递的参数一般是确定, 否则将会报错或者异常, 如下:
- function test(a,b,c,d) {
- console.log(a)
- console.log(b)
- console.log(c)
- console.log(d)
- console.log(e)//e is not defined
- }
- test(1,2,3,4)
参数固定, 多余的参数会出错.
但我们又想传递多个参数, 但是不确定参数的个数, 这时候可以使用对象扩展运算符来作参数.
- function test1(...arg) {
- console.log(arg[0]);//1
- console.log(arg[1]);//2
- console.log(arg[2]);//3
- console.log(arg[3])//4
- console.log(arg[4])//5
- console.log(arg[5])//undefined
- }
- test1(1,2,3,4,5)
这时候程序是不会报错的, 多余取值返回的结果是 undefined. 这说明是可以传入多个值, 并且就算方法中引用多了也不会报错.
(2)解决数组赋值问题
我们先用一个例子说明, 我们声明两个数组 arr1 和 arr2, 然后我们把 arr1 赋值给 arr2, 然后我们改变 arr2 的值, 你会发现 arr1 的值也改变了, 因为我们这是对内存堆栈的引用, 而不是真正的赋值.
- let arr1=['i','love','you'];
- let arr2=arr1;
- console.log("arr2====",arr2);
- arr2.push('too');
- console.log("arr1====>",arr1);
控制台输出的结果为:
- ["i", "love", "you"]
- ["i", "love", "you", "too"]
这是我们不想看到的, 可以利用对象扩展运算符简单的解决这个问题, 现在我们对代码进行改造.
- let arr1=['i','love','you'];
- let arr2=[...arr1];
- console.log(arr2);
- arr2.push('too');
- console.log(arr1);
最终可以看到我们的 arr1 并没有改变, 简单的扩展运算符就解决了这个问题.
2.REST 运算符
(1)含义
REST 参数作用: 将多余的逗号分隔的参数序列转换为数组参数
注意: REST 参数必须是最后一个参数, 否则报错.
REST 运算符与对象扩展运算符有很多类似之处, 它也用...(三个点)来表示, 比如:
- function test(first,...arg){
- console.log("first==>",first)//0
- console.log("arg=====>",arg)
- }
- test(0,1,2,3,4,5,6,7);
输出结果为:
- first==> 0
- arg=====>[1, 2, 3, 4, 5, 6, 7]
(2)如何循环输出 REST 运算符
用 for...of 循环来进行打印出 arg 的值
- function test(first,...arg){
- for(let val of arg){
- console.log(val)
- }
- }
- test(0,1,2,3,4,5,6,7);
结果为: 1,2,3,4,5,6,7
最后总结:
扩展运算符用三个点号表示, 功能是把数组或类数组对象展开成一系列用逗号隔开的值
REST 运算符也是三个点号, 不过其功能与扩展运算符恰好相反, 把逗号隔开的值序列组合成一个数组
当三个点 (...) 在等号左边, 或者放在形参上. 为 REST 运算符
当三个在等号右边, 或者放在实参上, 是 spread 运算符
或者说: 放在被赋值一方是 REST 运算符. 放在赋值一方式 spread 运算符.
来源: http://www.bubuko.com/infodetail-2869512.html