JavaScript剩余操作符Rest Operator详解

 更新时间:2019年07月20日 14:59:43   作者:ITman彪叔  
在本篇文章里小编给各位分享的是关于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]

剩余操作符和展开操作符

某种程度上,可以任务剩余操作符是展开操作符的相反操作。展开操作符会”展开“数组编程多个元素,剩余操作符会把多个元素压缩成一个单一的元素。

相关文章

  • JavaScript中的迭代器和生成器详解

    JavaScript中的迭代器和生成器详解

    这篇文章主要介绍了JavaScript中的迭代器和生成器详解,本文讲解了迭代器、声明自定义迭代器、生成器:一种更好的方式来构建迭代器、生成器高级特性等内容,需要的朋友可以参考下
    2014-10-10
  • 关于js datetime的那点事

    关于js datetime的那点事

    关于js datetime的一些使用经验分享,想要了解datetime日期操作的朋友可以参考下。
    2011-11-11
  • js+html5生成自动排列对话框实例

    js+html5生成自动排列对话框实例

    这篇文章主要介绍了js+html5生成自动排列对话框实例,弹出多个对话框,可以自动排列,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • JavaScript实现打字游戏

    JavaScript实现打字游戏

    这篇文章主要为大家详细介绍了JavaScript实现打字游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-02-02
  • js实现1,2,3,5数字按照概率生成

    js实现1,2,3,5数字按照概率生成

    这篇文章主要介绍了js实现1,2,3,5数字按照概率生成,需要的朋友可以参考下
    2017-09-09
  • JavaScript 图片放大镜(可拖放、缩放效果)

    JavaScript 图片放大镜(可拖放、缩放效果)

    背景:很久之前就在marry5.com看到这个效果,当时觉得很神奇,碍于水平有限,没做出来。
    2008-09-09
  • 使用微信小程序API,调用微信的各种内置能力。

    使用微信小程序API,调用微信的各种内置能力。

    微信小程序如何使用小程序API,去调用微信提供的各种内置能力(即微信API)。小程序开发框架提供丰富的微信原生API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等。
    2022-12-12
  • 前端常用的js函数方法

    前端常用的js函数方法

    这篇文章主要给大家分享的是常用的js函数的方法,告别搜索引擎的帮助,提高你的开发效率,,需要的朋友可以参考一下,希望对你的学习有所帮助
    2021-12-12
  • js日期、星座的级联显示代码

    js日期、星座的级联显示代码

    本篇文章主要是对js日期、星座的级联显示代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • echarts折线图月份数据不足自动补0和日期达到数据连续的效果(最新推荐)

    echarts折线图月份数据不足自动补0和日期达到数据连续的效果(最新推荐)

    这篇文章主要介绍了echarts折线图月份数据不足自动补0和日期达到数据连续的效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-03-03

最新评论