不定参数

如何实现不定参数

使用过 underscore.js 的人,肯定都使用过以下几个方法:


_.without(array, *values) //返回一个删除所有values值后的array副本
_.union(*arrays) //返回传入的arrays(数组)并集
_.difference(array, *others)//返回来自array参数数组,并且不存在于other 数组
...

这些方法都有一个共同点,就是可以传入不定数量的参数,例如,我想删除掉 array 中的 value1,value2 ,可以这样使用 , _.without(array,value1,value2);

那么,这个需要怎样才能做到呢?

我们知道,js 中 function 里面,有一个 arguments 参数,它是一个类数组,里面包含着调用这个方法的所有参数,所以可以这样处理:


_.without = function() {
if (arguments.length > 0) {
var array = arguments[0];
var values = [];
for (var i = 1; i < arguments.length; i++) {
values.push(arguments[i]);
}
//这样得到了array,和values数组,便可以进一步处理了
}
};

上面只是打个比方,想要支持不定参数,我们要做的就是把固定参数和动态参数从 arguments 中分离出来。
但是,我们这样写的话,需要在每个支持不定参数的函数里,都 copy 这样一段代码,这样实在不是很优雅。所以需要封装成一个通用的函数。
我们直接看看 underscore 是封装的好了。

restArgs 源码


var restArgs = function(func, startIndex) {
//startIndex ,表示几个参数之后便是动态参数
startIndex = startIndex == null ? func.length - 1 : +startIndex;
return function() {
var length = Math.max(arguments.length - startIndex, 0);
//处理arguments,将动态参数保存进rest数组
var rest = Array(length);
for (var index = 0; index < length; index++) {
rest[index] = arguments[index + startIndex];
}
//处理0,1,2三种情况,这里要单独处理,是想优先使用call,因为,call的性能比apply要好一点
switch (startIndex) {
case 0:
return func.call(this, rest);
case 1:
return func.call(this, arguments[0], rest);
case 2:
return func.call(this, arguments[0], arguments[1], rest);
} //如果startIndex不是0,1,2三种情况,则使用apply调用方法,将args作为参数,args将为数组[固定参数 ,rest];
var args = Array(startIndex + 1);
for (index = 0; index < startIndex; index++) {
args[index] = arguments[index];
}
args[startIndex] = rest;
return func.apply(this, args);
};
}; //这里without主要的逻辑处理方法,作为参数,传给restArgs,在restArgs中处理完参数后,使用call或apply调用逻辑处理方法
// 这时候接受到参数otherArrays,已经是一个数组了,包含了之前的动态参数。
_.without = restArgs(function(array, otherArrays) {
//处理without具体事件
});

underscore.js 中利用 js 高级函数的特性,巧妙的实现了动态参数

如果要使某函数支持不定参数,只需要将该函数作为参数,传入 restArgs 中即可,例如:


function addByArray(values) {
var sum = 0;
for (var i = 0; i < values.length; i++) {
sum += values[i];
}
return sum;
}
var add = restArgs(addByArray);
//调用:
addByArray([2, 5, 3, 6]); //16
add(2, 5, 3, 6); //16

ES6 不定参数 (...)

ES6 引入了 rest 参数,(形式为"...变量名"),用于获取多余参数,这样就不需要使用 arguments 对象来实现了


function add(...values) {
let sum = 0;
for (var val of values) {
sum += val;
}
return sum;
}
add(2, 5, 3); // 10

总结

在 underscore 中,restArgs 只是为了支持不定参数。实际使用中,也许我们都是直接使用 ES6,或用 babel 将 ES6 转成 ES5 来支持不定参数

不过,如果是在非 es6 的环境下,知道有这么一种实现方式,也是挺好的。

:)

来源:https://segmentfault.com/a/1190000017467086

不定参数(rest 参数 ...)的更多相关文章

  1. Python星号*与**用法分析 What does ** (double star/asterisk) and * (star/asterisk) do for parameters? 必选参数 默认参数 可变参数 关键字参数

    python中*号**的区别 - CSDN博客 https://blog.csdn.net/qq_26815677/article/details/78091452 定义可变参数和定义 list 或 ...

  2. C/C++多参数函数参数的计算顺序与压栈顺序

    一.前言 今天在看Thinking in C++这本书时,书中的一个例子引起了我的注意,具体是使用了下面这句 单看这条语句的语义会发现仅仅是使用一个简单的string的substr函数将所得子串pus ...

  3. 做参数可以读取参数 保存参数 用xml文件的方式

    做参数可以读取参数 保存参数 用xml文件的方式 好处:供不同用户保存适合自己使用的参数

  4. Dynamic CRM 2013学习笔记(二十六)报表设计:Reporting Service报表 动态参数、参数多选全选、动态列、动态显示行字体颜色

    上次介绍过CRM里开始报表的一些注意事项:Dynamic CRM 2013学习笔记(十五)报表入门.开发工具及注意事项,本文继续介绍报表里的一些动态效果:动态显示参数,参数是从数据库里查询出来的:参数 ...

  5. C#方法的六种参数,值参数、引用参数、输出参数、参数数组、命名参数、可选参数

    方法的参数有六种,分别是值参数.引用参数.输出参数.参数数组.命名参数.可选参数. 值参数 值参数是方法的默认类型,通过复制实参的值到形参的方式把数据传递到方法,方法被调用时,系统作两步操作: 在栈中 ...

  6. Swift语言中为外部参数设置默认值可变参数常量参数变量参数输入输出参数

    Swift语言中为外部参数设置默认值可变参数常量参数变量参数输入输出参数 7.4.4  为外部参数设置默认值 开发者也可以对外部参数设置默认值.这时,调用的时候,也可以省略参数传递本文选自Swift1 ...

  7. SQL Server 2008 表变量参数(表值参数)用法

    表值参数是 SQL Server 2008 中的新参数类型.表值参数是使用用户定义的表类型来声明的.使用表值参数,可以不必创建临时表或许多参数,即可向 Transact-SQL 语句或例程(如存储过程 ...

  8. (转)Java程序利用main函数中args参数实现参数的传递

    Java程序利用main函数中args参数实现参数的传递 1.运行Java程序的同时,可以通过输入参数给main函数中的接收参数数组args[],供程序内部使用!即当你在Java命令行后面带上参数,J ...

  9. C#分析URL参数获取参数和值得对应列表

    原文: C#分析URL参数获取参数和值得对应列表 /// <summary> /// 分析url链接,返回参数集合 /// </summary> /// <param n ...

  10. Python3基础 函数 收集参数+普通参数 的示例

    镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...

随机推荐

  1. day2 for,not,while,range

    >>> def str_len(s): ... l = len(s) ... if l > 3: ... print("3") ... elif l < ...

  2. layui js动态添加的面板不能折叠

    layui 动态添加dom后一般调用 layer.form.render()更新dom就可以了,但是我动态添加一个面板后form.render()就没有效果,要用layui.element.rende ...

  3. layui数据表格分页加载动画,自己定义加载动画,"加载中..."

    记录思路,仅供参考 在表格渲染完成后,在done回调函数中给分页动态加点击事件, 关闭"加载中..."动画也是在 done回调函数中关闭 这是我实现的思路,记录给大家参考. , d ...

  4. shimo

    shimo破解需要同意安装允许各个端安装

  5. PHP培训教程 php生成WAP页面

    WAP(无线通讯协议)是在数字移动电话.个人手持设备(PDA等)及计算机之间进行通讯的开放性全球标准.由于静态的WAP页面在很多方面不能满足用户个性化的服务请求,因此通过WAP服务器端语言产生动态的W ...

  6. php reset()函数 语法

    php reset()函数 语法 作用:将内部指针指向数组中的第一个元素,并输出.博智达 语法:reset(array) 参数: 参数 描述 array  必需.规定要使用的数组. 说明:若成功则返回 ...

  7. Linux内核设计与实现 总结笔记(第十三章)虚拟文件系统

    一.通用文件系统接口 Linux通过虚拟文件系统,使得用户可以直接使用open().read().write()访问文件系统,这种协作性和泛型存取成为可能. 不管文件系统是什么,也不管文件系统位于何种 ...

  8. 使用 Markdown 写博客

    后台设置(左侧边栏区找到-设置默认编辑器). 设置为 Markdown 后保存,即可在编辑新博客时生效.

  9. ionic框架+angular开发项目

    ionic框架组件地址:https://ionicframework.com/docs/api/tab ionic文档地址:https://ionicframework.com/docs/angula ...

  10. Android传感器系统架构【转】

    本文转载自:http://blog.csdn.net/qianjin0703/article/details/5942579 版权声明:本文为博主原创文章,未经博主允许不得转载. 1. 体系结构 2. ...