JavaScript剩余操作符Rest Operator详解


Posted in Javascript onJuly 20, 2019

剩余操作符

之前这篇文章JavaScript展开操作符(Spread operator)介绍讲解过展开操作符。剩余操作符和展开操作符的表示方式一样,都是三个点 '…',但是他们的使用场景会不同。

剩余参数

定义函数的时候,如果函数的参数以… 为前缀,则改参数是剩余参数(rest parameter)。剩余参数表示参数个数不确定的参数列表。在函数被调用时,该形参会成为一个数组,数组中的元素都是传递给该函数的多出来的实参的值。

获取参数

剩余操作符可以用来方便地获取传进来的参数。

function sum(a,b,...args){
 console.log(args.length); // 传进来的参数的个数 3
 let s = a + b;
 if(args && args.length){
  args.forEach(i => {s += i});
 } 
 return s;
}
sum(1, 2, 3, 4, 5 ); // 传进来的参数的个数 3

其中第一个形参a对应的是1,第二个形参b对应的2,…args表示的就是[3, 4, 5]。

和arguments的差别

上面剩余参数args是一个数组,而函数的arguments是一个伪数组。应此剩余参数可以使用数组的相关方法sort,map,forEach,pop,而arguments不能。

arguments想要变成数组,可以通过Array.prototype.slice.call方法,使用剩余操作符可以避免将arguments转为数组的麻烦。

// 下面的代码模拟了剩余数组
function sum(a,b,){
 var args = Array.prototype.slice.call(arguments, sum.length); 
 console.log(args.length); // 传进来的参数的个数 3
 let s = a + b;
 args.forEach(i => {s += i});
 return s;
}
sum(1, 2, 3, 4, 5 );

而使用剩余操作符,则不需要转化,直接使用,更加方便。

剩余操作符与解构赋值

我们知道,ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。 比如如下代码:

let array = [1,2,3]
let [a,b,c] = array; // a 1, b 2, c 3

再比如如下代码:

let obj = {a:1,b:2,c:3}
let {a,b,c} = obj; // a 1, b 2, c 3

在解构赋值时,可以使用剩余操作符。剩余操作符所操作的变量会匹配在解构赋值中所有其他变量未匹配到的属性。
比如如下代码,others会匹配到first和second对于属性的余下的属性:

const { first, second, ...others } = {
 first: 1,
 second: 2,
 third: 3,
 fourth: 4,
 fifth: 5
}

first // 1
second // 2
others // { third: 3, fourth: 4, fifth: 5 }

对象中余下的属性值被打包起来构造一个新的对象赋值给了others。

数组也可以通过剩余操作符,把剩余的元素打包成一个新的数组赋值给剩余属性,代码如下:

let array = [1,2,3,4,5];
let [a,b,...c] = array; // a 1,b 2, c [3,4,5]

剩余操作符和展开操作符

某种程度上,可以任务剩余操作符是展开操作符的相反操作。展开操作符会”展开“数组编程多个元素,剩余操作符会把多个元素压缩成一个单一的元素。

Javascript 相关文章推荐
javascript下操作css的float属性的特殊写法
Aug 22 Javascript
JS随机生成不重复数据的实例方法
Jul 17 Javascript
利用jquery操作Radio方法小结
Oct 20 Javascript
使用正则表达式的格式化与高亮显示json字符串
Dec 03 Javascript
6种javascript显示当前系统时间代码
Dec 01 Javascript
JS图片定时翻滚效果实现方法
Jun 21 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
Jul 28 Javascript
Three.js学习之几何形状
Aug 01 Javascript
jQuery实现简单的手风琴效果
Apr 17 jQuery
如何使用JS在HTML中自定义字符串格式化
Jul 20 Javascript
JavaScript实现旋转轮播图
Aug 18 Javascript
一秒学会微信小程序制作table表格
Feb 14 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
Jul 20 #Javascript
基于vue 实现表单中password输入的显示与隐藏功能
Jul 19 #Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
Jul 19 #Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
Jul 19 #Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
Jul 19 #Javascript
Vue实战教程之仿肯德基宅急送App
Jul 19 #Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
Jul 19 #Javascript
You might like
Get或Post提交值的非法数据处理
2006/10/09 PHP
php 获取当前访问的url文件名的方法小结
2010/02/08 PHP
PHP imagegrabscreen和imagegrabwindow(截取网站缩略图)的实例代码
2013/11/07 PHP
PHP获取短链接跳转后的真实地址和响应头信息的方法
2014/07/25 PHP
php+ajax实现无刷新分页的方法
2014/11/04 PHP
一个经典的PHP验证码类分享
2014/11/18 PHP
document.getElementById介绍
2011/09/13 Javascript
jquery 获取自定义属性(attr和prop)的实现代码
2012/06/27 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
2017/01/19 Javascript
Vue filters过滤器的使用方法
2017/07/14 Javascript
node.js支持多用户web终端实现及安全方案
2017/11/29 Javascript
JS中获取 DOM 元素的绝对位置实例详解
2018/04/23 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
2018/05/17 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
2019/04/23 Javascript
vue实现图片按比例缩放问题操作
2020/08/11 Javascript
在vue项目中封装echarts的步骤
2020/12/25 Vue.js
[00:34]DOTA2上海特级锦标赛 Spirit战队宣传片
2016/03/04 DOTA
python使用multiprocessing模块实现带回调函数的异步调用方法
2015/04/18 Python
在IIS服务器上以CGI方式运行Python脚本的教程
2015/04/25 Python
Python脚本暴力破解栅栏密码
2015/10/19 Python
Python定时任务随机时间执行的实现方法
2019/08/14 Python
使用python远程操作linux过程解析
2019/12/04 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
Julep官网:美容产品和指甲油
2017/02/25 全球购物
美国电子产品折扣网站:Daily Steals
2017/05/20 全球购物
车间班组长的职责
2013/12/13 职场文书
高中毕业自我评价
2014/02/08 职场文书
董事长助理岗位职责
2014/02/18 职场文书
副职竞争上岗演讲稿
2014/05/12 职场文书
英语教师自荐信
2014/05/26 职场文书
会议欢迎标语
2014/06/30 职场文书
办公室个人总结
2015/02/28 职场文书
倡议书的格式写法
2015/04/28 职场文书
导游词之云南-元阳梯田
2019/10/08 职场文书
如何利用Python实现一个论文降重工具
2021/07/09 Python