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 Array.prototype.slice使用说明
Oct 11 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
Mar 25 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
Nov 26 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
Jun 07 Javascript
jQuery表格(Table)基本操作实例分析
Mar 10 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
Apr 13 Javascript
js 只比较时间大小的实例
Oct 26 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
Jan 16 Javascript
javascript中undefined的本质解析
Jul 31 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
Sep 05 Javascript
详解vue中多个有顺序要求的异步操作处理
Oct 29 Javascript
解决vuex数据页面刷新后初始化操作
Jul 26 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
PHP 面向对象 PHP5 中的常量
2010/05/05 PHP
PHP--用万网的接口实现域名查询功能
2012/12/13 PHP
php使用fgetcsv读取csv文件出现乱码的解决方法
2014/11/08 PHP
php输出xml属性的方法
2015/03/19 PHP
PHP中遇到的时区问题解决方法
2015/07/23 PHP
PHP开发中常用的十个代码样例
2016/02/02 PHP
CI框架支持$_GET的两种实现方法
2016/05/18 PHP
PHP中静态变量的使用方法实例分析
2016/12/01 PHP
Ubuntu中支持PHP5与PHP7双版本的简单实现
2018/08/19 PHP
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
2013/05/24 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
2015/10/27 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
2017/04/27 Javascript
Express进阶之log4js实用入门指南
2018/02/10 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
2018/07/30 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
2019/09/06 Javascript
Vue 嵌套路由使用总结(推荐)
2020/01/13 Javascript
python实现的jpg格式图片修复代码
2015/04/21 Python
Python读写Json涉及到中文的处理方法
2016/09/12 Python
python实现求最长回文子串长度
2018/01/22 Python
Python读取stdin方法实例
2019/05/24 Python
django页面跳转问题及注意事项
2019/07/18 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
Python实现分数序列求和
2020/02/25 Python
Python基础类继承重写实现原理解析
2020/04/03 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
CSS3 3D旋转rotate效果实例介绍
2016/05/03 HTML / CSS
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
Prototype如何实现页面局部定时刷新
2013/08/06 面试题
办公室副主任岗位职责
2013/11/25 职场文书
清明节网上祭英烈活动总结
2014/04/30 职场文书
热门专业求职信
2014/05/24 职场文书
法律系毕业生求职信
2014/05/28 职场文书
公司合并协议书范本
2014/09/30 职场文书
写给领导的感谢信
2015/01/22 职场文书
工程催款通知书
2015/04/17 职场文书
2020优秀员工演讲稿(三篇)
2019/10/17 职场文书