11 # 手写 reduce 方法

简介: 11 # 手写 reduce 方法

reduce 使用

reduce() 方法对数组中的每个元素按序执行一个提供的 reducer 函数,每一次运行 reducer 会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值。

第一次执行回调函数时,不存在“上一次的计算结果”。如果需要回调函数从数组索引为 0 的元素开始执行,则需要传递初始值。否则,数组索引为 0 的元素将被用作初始值,迭代器将从第二个元素开始执行(即从索引为 1 而不是 0 的位置开始)。

callbackfn 函数

  • accumulator:上一次调用 callbackFn 的结果。在第一次调用时,如果指定了 initialValue 则为指定的值,否则为 array[0] 的值。
  • currentValue:当前元素的值。在第一次调用时,如果指定了 initialValue,则为 array[0] 的值,否则为 array[1]
  • currentIndex:currentValue 在数组中的索引位置。在第一次调用时,如果指定了 initialValue 则为 0,否则为 1。
  • array:调用了 reduce() 的数组本身。

initialValue(可选):第一次调用回调时初始化 accumulator 的值。如果指定了 initialValue,则 callbackFn 从数组中的第一个值作为 currentValue 开始执行。如果没有指定 initialValue,则 accumulator 初始化为数组中的第一个值,并且 callbackFn 从数组中的第二个值作为

currentValue 开始执行。在这种情况下,如果数组为空(没有第一个值可以作为 accumulator 返回),则会抛出错误(Uncaught TypeError: Reduce of empty array with no initial value)。

<script>
    var arr = [1, 2, 3, 4];
    var result = arr.reduce(function (accumulator, currentValue, currentIndex, array) {
        console.log("accumulator----->", accumulator);
        console.log("currentValue----->", currentValue);
        console.log("currentIndex----->", currentIndex);
        console.log("array----->", array);
        return accumulator + currentValue;
    }, -3);
    console.warn("result----->", result);
</script>

手写 reduce

<script>
    Array.prototype.kaimoReduce = function (callbackfn, initialValue) {
        let hasInitialValue = initialValue !== undefined;
        if (this.length === 0) {
            if (hasInitialValue) {
                return initialValue;
            } else {
                throw TypeError("Reduce of empty array with no initial value");
            }
        }
        let accumulator = hasInitialValue ? initialValue : this[0];
        let i = hasInitialValue ? 0 : 1;
        for (i; i < this.length; i++) {
            accumulator = callbackfn(accumulator, this[i], i, this);
        }
        return accumulator;
    };
    var result2 = arr.kaimoReduce(function (accumulator, currentValue, currentIndex, array) {
        console.log("accumulator---kaimoReduce-->", accumulator);
        console.log("currentValue---kaimoReduce-->", currentValue);
        console.log("currentIndex---kaimoReduce-->", currentIndex);
        console.log("array---kaimoReduce-->", array);
        return accumulator + currentValue;
    }, -3);
    console.warn("result2---kaimoReduce-->", result2);
</script>



数组为空数组以及没有初始值的时候,就直接报错提示



目录
相关文章
|
存储 前端开发 JavaScript
第六章(原理篇) 微前端间的通信机制
第六章(原理篇) 微前端间的通信机制
462 0
|
JavaScript 搜索推荐 前端开发
Vue的SSR 是什么,优缺点分析
Vue的服务器端渲染(SSR)是一种将Vue组件在服务器上执行,并生成完整的HTML页面的技术,这个HTML页面随后被发送至客户端的浏览器进行展示。
|
2月前
|
数据采集 人工智能 物联网
国产AI封神!炒股狂赚40%碾压对手 教你微调Qwen3打造专属金融分析师
国产AI在实盘炒股中大放异彩,DeepSeek与Qwen3收益率最高超60%,碾压国际大模型。本文教你用LLaMA Factory平台微调Qwen3-VL-30B,打造专属多模态金融分析师,实现趋势研判、财报分析等专业能力,赋能投资决策。
700 155
国产AI封神!炒股狂赚40%碾压对手 教你微调Qwen3打造专属金融分析师
|
安全 网络安全 Windows
电脑插上U盘不显示怎么回事?怎么解决?
平时使用电脑的时候经常会使用U盘来传输数据或是备份文件,有时候会遇到一个令头疼的问题,比如,将U盘插入电脑的USB口后,设备却显示不出来。电脑上插入U盘后却不显示会影响我们的正常工作。接下来,我们一起分析一下故障的原因和常见的解决方法。
|
设计模式 Java 关系型数据库
面试官:说说你的项目亮点?
面试官:说说你的项目亮点?
408 0
面试官:说说你的项目亮点?
|
前端开发 JavaScript 架构师
Webpack模块联邦:微前端架构的新选择
Webpack的模块联邦是Webpack 5引入的革命性特性,革新了微前端架构。它允许独立的Web应用在运行时动态共享代码,无需传统打包过程。基本概念包括容器应用(负责加载协调)和远程应用(独立应用,可暴露模块)。实现步骤涉及容器和远程应用的`ModuleFederationPlugin`配置,以及在应用间导入和使用远程模块。模块联邦的优势在于独立开发、按需加载、版本管理和易于维护。通过实战案例展示了如何构建微前端应用,包括创建容器和远程应用,以及消费远程组件。高级用法涉及动态加载、路由集成、状态管理和错误处理。
387 3
|
移动开发
移动端H5不能自由选中文本进行复制的问题
移动端H5不能自由选中文本进行复制的问题
515 0
|
XML JSON 网络协议
JSON和Protobuf序列化
因为像TCP和UDP这种底层协议只能发送字节流,因此当我们在开发一些远程过程调用(RPC)的程序时,需要将应用层的Java POJO对象序列化成字节流,数据接收端再反序列化成Java POJO对象。序列化一定会设计编码和格式化,目前常见的编码方式有: