JavaScript剩余操作符Rest Operator详解
前端  /  管理员 发布于 4年前   199
剩余操作符
之前这篇文章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 // 1second // 2others // { 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]
剩余操作符和展开操作符
某种程度上,可以任务剩余操作符是展开操作符的相反操作。展开操作符会”展开“数组编程多个元素,剩余操作符会把多个元素压缩成一个单一的元素。
122 在
学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号