underscore 系列之内部函数 restArgs

简介: 如果不使用 ... 拓展操作符,仅用 ES5 的内容,该怎么实现呢?我们可以写一个 restArgs 函数,传入一个函数,使用函数的最后一个参数储存剩下的函数参数

1.png


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 系列目录地址:github.com/mqyqingfeng…


underscore 系列预计写八篇左右,重点介绍 underscore 中的代码架构、链式调用、内部函数、模板引擎等内容,旨在帮助大家阅读源码,以及写出自己的 undercore。


如果有错误或者不严谨的地方,请务必给予指正,十分感谢。如果喜欢或者有所启发,欢迎 star,对作者也是一种鼓励。




目录
相关文章
|
4天前
|
弹性计算 关系型数据库 微服务
基于 Docker 与 Kubernetes(K3s)的微服务:阿里云生产环境扩容实践
在微服务架构中,如何实现“稳定扩容”与“成本可控”是企业面临的核心挑战。本文结合 Python FastAPI 微服务实战,详解如何基于阿里云基础设施,利用 Docker 封装服务、K3s 实现容器编排,构建生产级微服务架构。内容涵盖容器构建、集群部署、自动扩缩容、可观测性等关键环节,适配阿里云资源特性与服务生态,助力企业打造低成本、高可靠、易扩展的微服务解决方案。
1106 0
|
3天前
|
机器学习/深度学习 人工智能 前端开发
通义DeepResearch全面开源!同步分享可落地的高阶Agent构建方法论
通义研究团队开源发布通义 DeepResearch —— 首个在性能上可与 OpenAI DeepResearch 相媲美、并在多项权威基准测试中取得领先表现的全开源 Web Agent。
518 10
|
13天前
|
人工智能 运维 安全
|
12天前
|
人工智能 测试技术 API
智能体(AI Agent)搭建全攻略:从概念到实践的终极指南
在人工智能浪潮中,智能体(AI Agent)正成为变革性技术。它们具备自主决策、环境感知、任务执行等能力,广泛应用于日常任务与商业流程。本文详解智能体概念、架构及七步搭建指南,助你打造专属智能体,迎接智能自动化新时代。
|
4天前
|
弹性计算 Kubernetes jenkins
如何在 ECS/EKS 集群中有效使用 Jenkins
本文探讨了如何将 Jenkins 与 AWS ECS 和 EKS 集群集成,以构建高效、灵活且具备自动扩缩容能力的 CI/CD 流水线,提升软件交付效率并优化资源成本。
301 0
|
11天前
|
人工智能 异构计算
敬请锁定《C位面对面》,洞察通用计算如何在AI时代持续赋能企业创新,助力业务发展!
敬请锁定《C位面对面》,洞察通用计算如何在AI时代持续赋能企业创新,助力业务发展!
|
12天前
|
机器学习/深度学习 人工智能 自然语言处理
B站开源IndexTTS2,用极致表现力颠覆听觉体验
在语音合成技术不断演进的背景下,早期版本的IndexTTS虽然在多场景应用中展现出良好的表现,但在情感表达的细腻度与时长控制的精准性方面仍存在提升空间。为了解决这些问题,并进一步推动零样本语音合成在实际场景中的落地能力,B站语音团队对模型架构与训练策略进行了深度优化,推出了全新一代语音合成模型——IndexTTS2 。
806 23
|
4天前
|
缓存 供应链 监控
VVIC seller_search 排行榜搜索接口深度分析及 Python 实现
VVIC搜款网seller_search接口提供服装批发市场的商品及商家排行榜数据,涵盖热销榜、销量排名、类目趋势等,支持多维度筛选与数据分析,助力选品决策、竞品分析与市场预测,为服装供应链提供有力数据支撑。
|
4天前
|
缓存 监控 API
Amazon item_review 商品评论接口深度分析及 Python 实现
亚马逊商品评论接口(item_review)可获取用户评分、评论内容及时间等数据,支持多维度筛选与分页调用,结合Python实现情感分析、关键词提取与可视化,助力竞品分析、产品优化与市场决策。