JavaScript剩余操作符Rest Operator详解
剩余操作符
之前这篇文章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]
剩余操作符和展开操作符
某种程度上，可以任务剩余操作符是展开操作符的相反操作。展开操作符会”展开“数组编程多个元素，剩余操作符会把多个元素压缩成一个单一的元素。
相关文章
这篇文章主要介绍了Bootstrap3制作搜索框样式的方法 的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-07-07
javascript 处理HTML元素必须避免使用的一种方法
我们在编写前台页面的时候，可能经常会用到“javascript+数据”生成页面元素的方法，但当我们要处理的数据量较大，导致页面需要展现过多的控件的时候，页面的响应速度也会直线下降2009-07-07
这篇文章主要介绍了JavaScript中new操作符的解析和实现，帮助大家更好的理解和学习JavaScript，感兴趣的朋友可以了解下2020-09-09
用该方法创建了 Event 对象以后，必须用上表中所示的初始化方法初始化对象。关于初始化方法的详细信息，请参阅 Event 对象参考。2010-08-08
这篇文章主要介绍了JavaScript中Number的对象解析，Number对象是数值对应的包装对象，可以作为构造函数使用，也可以作为工具函数使用，感兴趣的朋友可以参考一下下面文章内容2022-08-08
javascript根据时间生成m位随机数，最大13位随机数，并且不能保证首位不为0，实现代码如下，需要的朋友可以参考下2014-10-10
DOM元素都有一些标准事件，一般使用时只要使用onclick=function的方式就可以了，但是当需要为DOM元素添加多个事件，删除事件，或在用Javascript封装控件的时候，为封装的控件添加自定义事件的时候2012-05-05
我们在做uniapp的项目的时候经常需要用到各种插件,下面这篇文章主要给大家介绍了关于Uniapp接入插件的3种方式的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-05-05
这篇文章主要给大家介绍了关于ES6中箭头函数的定义与调用方式的相关资料，文中通过示例代码介绍的非常详细，相信会对大家的学习或者工作带来一定的帮助，需要的朋友们下面来一起看看吧。2017-06-06
这篇文章主要为大家详细介绍了小程序云开发教程，如何实现图片上传及发表文字，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
最新评论