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 相关文章推荐
B/S模式项目中常用的javascript汇总
Dec 17 Javascript
JavaScript实现数据类型的相互转换
Mar 06 Javascript
JS实现保留n位小数的四舍五入问题示例
Aug 03 Javascript
select2 ajax 设置默认值,初始值的方法
Aug 09 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
Sep 12 Javascript
详解angular2 控制视图的封装模式
Dec 27 Javascript
vue 引用自定义ttf、otf、在线字体的方法
May 09 Javascript
vue读取本地的excel文件并显示在网页上方法示例
May 29 Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
Jun 06 Javascript
微信小程序基于Taro的分享图片功能实践详解
Jul 12 Javascript
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
详解JS ES6编码规范
May 07 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保留两位小数并且四舍五入及不四舍五入的方法
2013/09/22 PHP
php实现可用于mysql,mssql,pg数据库操作类
2014/12/13 PHP
PHP操作mysql数据库分表的方法
2016/06/09 PHP
PHP快速推送微信模板消息
2017/04/14 PHP
模拟jQuery ajax服务器端与客户端通信的代码
2011/03/28 Javascript
Jquery中删除元素的实现代码
2011/12/29 Javascript
javascript基本类型详解
2014/11/28 Javascript
jQuery实现弹出窗口弹出div层的实例代码
2017/01/09 Javascript
Angular2使用Augury来调试Angular2程序
2017/05/21 Javascript
利用C/C++编写node.js原生模块的方法教程
2017/07/07 Javascript
Vue中v-for的数据分组实例
2018/03/07 Javascript
使用vue-router为每个路由配置各自的title
2018/07/30 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
2019/09/11 Javascript
vue中英文切换实例代码
2020/01/21 Javascript
微信小程序实现电子签名并导出图片
2020/05/27 Javascript
详解vue3.0 diff算法的使用(超详细)
2020/07/01 Javascript
vue实现验证用户名是否可用
2021/01/20 Vue.js
JS获取一个字符串中指定字符串第n次出现的位置
2021/02/10 Javascript
[04:22]DOTA2上海特级锦标赛主赛事第四日TOP10
2016/03/06 DOTA
python获取目录下所有文件的方法
2015/06/01 Python
CentOS6.5设置Django开发环境
2016/10/13 Python
python处理Excel xlrd的简单使用
2017/09/12 Python
pip安装时ReadTimeoutError的解决方法
2018/06/12 Python
Python进程间通信Queue消息队列用法分析
2019/05/22 Python
Python 合并多个TXT文件并统计词频的实现
2019/08/23 Python
Python 共享变量加锁、释放详解
2019/08/28 Python
python的等深分箱实例
2019/11/22 Python
python 的numpy库中的mean()函数用法介绍
2020/03/03 Python
python将dict中的unicode打印成中文实例
2020/05/11 Python
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
SQL中where和having的区别
2012/06/17 面试题
TCP/IP中的TCP和IP分别承担什么责任
2012/04/21 面试题
事假请假条范文
2014/04/11 职场文书
党员干部一句话承诺
2014/05/30 职场文书
2016感恩父亲节主题广播稿
2015/12/18 职场文书