ES6扩展运算符和Rest运算符实例解析

本文通过具体实例介绍ES6中扩展运算符和Rest运算符的使用方式，供读者参考学习。

这两种运算符能有效处理参数数量及对象数组不确定的编程场景，使代码更加简洁健壮。

主要包含两种形式：对象扩展运算符与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运算符。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

ES6扩展运算符与Rest运算符用法详解