underscore 系列之内部函数 restArgs
partial
在《 JavaScript 专题之偏函数》中,我们写了一个 partial 函数,用来固定函数的部分参数,实现代码如下:
// 这是文章中的第一版
function partial(fn) {var args = [].slice.call(arguments, 1);return function() {var newArgs = args.concat([].slice.call(arguments));return fn.apply(this, newArgs);};
};
rest parameter
ES6 为我们提供了剩余参数(rest parameter)语法,允许我们将一个不定数量的参数表示为一个数组。
function fn(a, b, ...args) {console.log(args); // [3, 4, 5]
}fn(1, 2, 3, 4, 5)
我们可以利用这一特性简化 partial 实现的代码:
function partial(fn, ...args) {return function(...partialArgs) {var newArgs = args.concat(partialArgs);return fn.apply(this, newArgs);};
};
写个 demo,测试一下:
function add(a, b) {return a + b;
}var addOne = partial(add, 1);console.log(addOne(2)); // 3
restArgs
如果不使用 ... 拓展操作符,仅用 ES5 的内容,该怎么实现呢?
我们可以写一个 restArgs 函数,传入一个函数,使用函数的最后一个参数储存剩下的函数参数,使用效果如下:
var func = restArgs(function(a, b, c){console.log(c); // [3, 4, 5]
})func(1, 2, 3, 4, 5)
我们来写一版:
// 第一版
function restArgs(func) {return function(){// startIndex 表示使用哪个位置的参数用于储存剩余的参数var startIndex = func.length - 1;var length = arguments.length - startIndex;var rest = Array(length)var index = 0;// 使用一个数组储存剩余的参数// 以上面的例子为例,结果为:// rest [3, 4, 5]for (; index < length; index++) {rest[index] = arguments[index + startIndex]}// args [1, 2, undefined]var args = Array(startIndex + 1);for (index = 0; index < startIndex; index++) {args[index] = arguments[index]}// args [1, 2, [3, 4, 5]]args[startIndex] = rest;return func.apply(this, args)}
}
优化
我们默认使用传入的函数的最后一个参数储存剩余的参数,为了更加灵活,我们可以再增加一个参数,用来指定 startIndex,如果没有指定,就默认使用最后一个参数。
此外,注意,我们使用 Array(length) 创建数组,而 length 的计算方式是 arguments.length - startIndex,这个值有可能是负数!比如:
var func = restArgs(function(a, b, c, d){console.log(c) // 报错
})func(1, 2)
所以我们再写一版:
// 第二版
function restArgs(func, startIndex) {startIndex = startIndex == null ? func.length - 1 : +startIndex;return function(){var length = Math.max(arguments.length - startIndex, 0);var rest = Array(length)var index = 0;for (; index < length; index++) {rest[index] = arguments[index + startIndex]}var args = Array(startIndex + 1);for (index = 0; index < startIndex; index++) {args[index] = arguments[index]}args[startIndex] = rest;return func.apply(this, args)}
}
性能优化
如果是正常写业务,可能写到这里就结束了,然而 underscore 考虑的更多,鉴于 call 的性能要高于 apply,所以 underscore 做了一个优化:
// 第三版
var restArgs = function(func, startIndex) {startIndex = startIndex == null ? func.length - 1 : +startIndex;return function() {var length = Math.max(arguments.length - startIndex, 0),rest = Array(length),index = 0;for (; index < length; index++) {rest[index] = arguments[index + startIndex];}// 增加的部分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);}var args = Array(startIndex + 1);for (index = 0; index < startIndex; index++) {args[index] = arguments[index];}args[startIndex] = rest;return func.apply(this, args);};
};
至此,restArgs 函数就完成了,underscore 很多函数比如 invoke、without、union、difference、bind、partial、bindAll、delay 都用到了 restArgs 函数。
当使用 underscore 的时候,我们可以以 _.restArgs 的形式调用该函数。
restArgs 与 partial
最后,使用我们的写的 restArgs 函数重写下 partial 函数:
var partial = restArgs(function(fn, args){return restArgs(function(partialArgs) {var newArgs = args.concat(partialArgs);return fn.apply(this, newArgs);})
})function add(a, b, c) {return a + b + c;
}var addOne = partial(add, 1);
console.log(addOne(2, 3)); // 6
underscore 系列
underscore 系列目录地址:https://github.com/mqyqingfeng/Blog。
underscore 系列预计写八篇左右,重点介绍 underscore 中的代码架构、链式调用、内部函数、模板引擎等内容,旨在帮助大家阅读源码,以及写出自己的 undercore。
如果有错误或者不严谨的地方,请务必给予指正,十分感谢。如果喜欢或者有所启发,欢迎 star,对作者也是一种鼓励。
underscore 系列之内部函数 restArgs相关推荐
- underscore 系列之防冲突与 Utility Functions
防冲突 underscore 使用 _ 作为函数的挂载对象,如果页面中已经存在了 _ 对象,underscore 就会覆盖该对象,举个例子: var _ = {value: 1 }// 引入 unde ...
- 打造属于自己的underscore系列(五)- 偏函数和函数柯里化
这一节的内容,主要针对javascript函数式编程的两个重要概念,偏函数(partial application) 和函数柯里化(curry)进行介绍.着重讲解underscore中对于偏函数应用的 ...
- underscore 系列之字符实体与 _.escape
前言 underscore 提供了 _.escape 函数,用于转义 HTML 字符串,替换 &, <, >, ", ', 和 ` 字符为字符实体. _.escape(' ...
- 打造属于自己的underscore系列 ( 一 ) - 框架设计
underscore作为开发中比较常用的一个javascript工具库,提供了一套丰富的函数式编程功能,该库并没有拓展原有的javascript原生对象,而是在自定义的_对象上,提供了100多个方法函 ...
- 打造属于自己的underscore系列 ( 一 )
underscore作为开发中比较常用的一个javascript工具库,提供了一套丰富的函数式编程功能,该库并没有拓展原有的javascript原生对象,而是在自定义的_对象上,提供了100多个方法函 ...
- ‘underscore系列之throttle“‘
underscore函数节流 前言 在说underscore函数节流之前, 还是明确概念, 什么是函数节流.函数节流简单来说就是'开源节流', 什么意思呢?就是减少某个函数调用的太频繁, 降低频次.一 ...
- 学习underscore源码整体架构,打造属于自己的函数式编程类库
前言 上一篇文章写了 jQuery整体架构,学习 jQuery 源码整体架构,打造属于自己的 js 类库 虽然看过挺多 underscore.js分析类的文章,但总感觉少点什么.这也许就是纸上得来终觉 ...
- GitHub 热点速览 Vol.14:周获 2k+ Vim³ 掀起三维编程风
作者:HelloGitHub-小鱼干 摘要:寓教于乐,应该是上周 Trending 的主题了,无论是被多人转发推荐的三维 Vim 项目 Vim³ 或者是流体运动的 WebGL Fluid Simula ...
- 前端开发实战技巧汇总
参考资料 原生 js 系列 01-冴羽大佬 JavaScript 深入系列 ES6 系列 JavaScript 专题系列 underscore 系列 TypeScript 系列 02-完全熟练掌握 e ...
- 2017下半年掘金日报优质文章合集:前端篇
在掘金微信群里的小伙伴应该都有看每日小报吧!这是小饼每天为大家精选的优质掘金文章(大家都很爱学习,我已经跟不上了QAQ..)小饼已经被N位群友连续几周催着出小报合集了,2017年马上就要结束了,拖延症 ...
最新文章
- java spring框架 注解_史上最全的java spring注解
- 头号任务:CIO面临的十大挑战预测
- 华为(苏州)人工智能创新中心正式揭牌
- Luogu P4859「已经没有什么好害怕的了」
- window,windowManager --《android 艺术探索读书》笔记
- 我在微信上大学:如何正确理解指针和结构体指针?
- Codeforces Round #664 (Div. 2)
- lucene计分公式详解
- SQL语句取得最大件数(MSSQL ORACLE Postgre,top rownum,limit)
- oracle select机制_Oracle优化 漫谈排序
- 我们终将死去,这难道不够美好吗?
- 这“⼀⼝”和那“一口”有什么不同,关于unicode一个小知识
- 计算机图形图像项目教程素材,计算机图形图像应用教程
- Found existing installation:xxxx
- 莫名其妙出现各种syntax error的解决方案
- PageAdmin Cms V2.0 getshell 0day
- C语言基础之32个关键字
- 培养你的逻辑思维能力
- 南方基金-系统开发工程师-一面二面
- Guava-RateLimiter秒杀限流技术详解
热门文章
- 游戏设计规则探秘之宾语
- 设置内核的运行环境之隔离的应用程序
- 03矩阵02——初等变换与高斯消元法、行阶梯形矩阵、行简化阶梯形矩阵、行阶梯形状与方程组解的关系、相抵
- python类:描述器Descriptors和元类MetaClasses
- 使用fiddler抓取安卓模拟器包
- ajax动态的给表格添加数据,jQuery+ajax实现动态添加表格tr td功能示例
- 软件测试总结--01基础
- Android【报错】java.lang.ClassCastException: android.widget.TextView cannot be cast to android.widget.Bu
- React.js 小书 Lesson10 - 组件的 state 和 setState
- jquer同时选择多个不同的id执行同意操作