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的单例模式 (singleton in Javascript)
Jun 11 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
Sep 28 Javascript
自制基于jQuery的智能提示插件一枚
Feb 18 Javascript
java与javascript之间json格式数据互转介绍
Oct 29 Javascript
jQuery对html元素取值与赋值的方法
Nov 20 Javascript
JS 作用域与作用域链详解
Apr 07 Javascript
JS实现DIV高度自适应窗口示例
Feb 16 Javascript
微信小程序之滚动视图容器的实现方法
Sep 26 Javascript
微信小程序实现团购或秒杀批量倒计时
Nov 01 Javascript
vuex存储token示例
Nov 11 Javascript
微信小程序实现列表左右滑动
Nov 19 Javascript
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
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中实现进程间通讯
2006/10/09 PHP
yii框架通过控制台命令创建定时任务示例
2014/04/30 PHP
Laravel使用Caching缓存数据减轻数据库查询压力的方法
2016/03/15 PHP
php curl简单采集图片生成base64编码(并附curl函数参数说明)
2019/02/15 PHP
PHP多进程简单实例小结
2019/11/09 PHP
javascript事件问题
2009/09/05 Javascript
js给dropdownlist添加选项的小例子
2013/03/04 Javascript
js实现商品抛物线加入购物车特效
2020/11/18 Javascript
jQuery ajaxForm()的应用
2016/10/14 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
2017/01/04 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
2017/01/09 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
JavaScript程序设计高级算法之动态规划实例分析
2017/11/24 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
2018/09/14 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
2019/07/24 Javascript
简单分析js中的this的原理
2019/08/31 Javascript
Python yield使用方法示例
2013/12/04 Python
Python中的lstrip()方法使用简介
2015/05/19 Python
Python编程中字符串和列表的基本知识讲解
2015/10/14 Python
python中logging库的使用总结
2017/10/18 Python
python 时间信息“2018-02-04 18:23:35“ 解析成字典形式的结果代码详解
2018/04/19 Python
连接pandas以及数组转pandas的方法
2019/06/28 Python
对python 调用类属性的方法详解
2019/07/02 Python
TensorBoard 计算图的查看方式
2020/02/15 Python
python扫描线填充算法详解
2020/02/19 Python
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
2016/04/26 HTML / CSS
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
联想新加坡官方网站:Lenovo Singapore
2017/10/24 全球购物
工程业务员工作职责
2013/12/07 职场文书
给小学生的新年寄语
2014/04/04 职场文书
电大毕业生自我鉴定
2014/04/10 职场文书
《天游峰的扫路人》教学反思
2014/04/25 职场文书
民主生活会对照检查材料范文
2014/10/01 职场文书
Python基础之pandas数据合并
2021/04/27 Python
MYSQL 的10大经典优化案例场景实战
2021/09/14 MySQL