ES6中剩余参数的案例分析-创新互联

这篇文章主要介绍了ES6中剩余参数的案例分析，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

创新互联专业成都网站制作、成都做网站、外贸营销网站建设，集网站策划、网站设计、网站制作于一体，网站seo、网站优化、网站营销、软文营销等专业人才根据搜索规律编程设计，让网站在运行后，在搜索中有好的表现，专业设计制作为您带来效益的网站！让网站建设为您创造效益。概述

剩余参数将没有对应形参的参数聚合成一个数组

语法

function(a, b, ...theArgs) {
}

只聚合未对应形参参数

剩余参数只会将没有对应形参的参数聚合成一个数组, 而arguments则是包含了所有的参数。

function add(a, b, ...theArgs) {
    return {rest: theArgs, arguments}
}
add() 
// {rest: [undefined, undefined, []], arguments: Arguments(0)}
add(1) 
// {rest: [1, undefined, []], arguments: Arguments(1)}
add(1, 2) 
// {rest: [1, 2, []], arguments: Arguments(2)}
add(1, 2, 3, 4, 5) 
// {rest: [1, 2, [3, 4, 5]], arguments: Arguments(5)}

剩余参数是数组

剩余参数始终是一个数组，而不像arguments是一个伪数组

function add(...theArgs) {
    console.log(Array.isArray(theArgs))
    theArgs.forEach((a)=>console.log(a))
    console.log(Array.isArray(arguments))
    Array.prototype.slice.call(arguments, add.length).forEach((a)=>console.log(a)) // 转化成数组
}
add(1,2,3) // true 1 2 3 false 1, 2, 3, 4

解构剩余参数

function add(...[a, b, c]){
    return a + b +c
}
add(1, 2, 3) // 6
add(1, 2, 3) // 6

使用babel翻译

function add(...num){
  return num.reduce((n1,n2)=>n1+n2)
}

翻译后

function add() {
  for (var _len = arguments.length, num = Array(_len), _key = 0; _key < _len; _key++) {
    num[_key] = arguments[_key];
  }

  return num.reduce(function (n1, n2) {
    return n1 + n2;
  });
}

感谢你能够认真阅读完这篇文章，希望小编分享ES6中剩余参数的案例分析内容对大家有帮助，同时也希望大家多多支持创新互联建站，关注创新互联网站制作公司行业资讯频道，遇到问题就找创新互联建站，详细的解决方法等着你来学习!

文章标题：ES6中剩余参数的案例分析-创新互联
分享路径：http://cdxtjz.cn/article/djdsop.html