JavaScript面试题：Array.prototype.reduce()的使用场景

已于 2023-06-18 15:32:18 修改
阅读量928 收藏 1
点赞数
分类专栏： 大杂烩 文章标签： javascript 前端
于 2022-11-03 16:42:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lalala_dxf/article/details/127668917
版权

reduce()方法的使用场景

1、语法

array.reduce((previousValue,currentValue,currentIndex,array)=>{},initialValue)
对数组累计执行回调函数并返回最终结果
在这里插入图片描述
在这里插入图片描述

2、使用场景

2.1 数组元素累计求和

// 不设置初始值initialValue时
let result1 = arr.reduce((previousValue,currentValue,arr) => {
    console.log(previousValue,"previousValue ============");
    console.log(currentValue,"currentValue ============");
    return previousValue + currentValue
})

console.log(result1); // 15

// 设置初始值initialValue时
let initialValue = 0
let result2 = arr.reduce((previousValue,currentValue,arr) => {
    console.log(previousValue,"previousValue ============");
    console.log(currentValue,"currentValue ============");
    return previousValue + currentValue
},initialValue)
console.log(result2); // 15

2.2 二维数组扁平化

let arr = [
    [20,30,20,10,32],
    [21,20,24,19,92],
    [20,43,20,20,32],
    [70,30,29,10,12],
]

let result = arr.reduce((previousValue,currentValue) => {
    return previousValue.concat(currentValue)
},[])

console.log(result);

2.3 统计数组中元素出现的频数

const arr = [
    "a", "b", "a",, "a", "b", "a", "b", "a", "a", "a", "a", "a", "a", "b", "b", "b",
    "c", "c", "c", "c", "a", "b", "a", "b", "a"
]

const result = arr.reduce(
    (previousValue, currentValue) => {
        if(currentValue in previousValue){
            previousValue[currentValue] ++;
        }else{
            previousValue[currentValue] = 1;
        }
        return previousValue;
    }, 
    {}
)

console.log(result)

2.3 对数组中的对象元素分组分类

const arr = [
    { 年级: "2017级", 学院: "计算机学院", 专业: "物联网" },
    { 年级: "2017级", 学院: "计算机学院", 专业: "计算机科学" },
    { 年级: "2018级", 学院: "计算机学院", 专业: "软件工程" },
    { 年级: "2019级", 学院: "计算机学院", 专业: "软件工程" },
    { 年级: "2019级", 学院: "计算机学院", 专业: "物联网" },
    { 年级: "2020级", 学院: "计算机学院", 专业: "物联网" },
    { 年级: "2020级", 学院: "计算机学院", 专业: "计算机科学" },
    { 年级: "2020级", 学院: "计算机学院", 专业: "软件工程" },
    { 年级: "2017级", 学院: "电气学院", 专业: "自动化" },
    { 年级: "2018级", 学院: "电气学院", 专业: "自动化" },
    { 年级: "2019级", 学院: "电气学院", 专业: "自动化" },
    { 年级: "2020级", 学院: "电气学院", 专业: "自动化" },
]


// 根据指定字段的指定值获取分组  
function getByTarget(arr, target, targetValue) {
    // 如果没有指定具体年级，例如： 按照年级分组 
    if (!targetValue) {
        const result = arr.reduce(
            (previousValue, currentValue) => {
                // 拿到当前要分组的条件
                // 例如，currentValue是{ 年级: "2017级", 学院: "计算机学院", 专业: "物联网" }这样一个对象
                // 那么，currentValue[target] 就是年级或者学院或者专业
                let currentTargetValue = currentValue[target]

                // 如果previousValue对象中没有值，则创建一个新数组
                if (!previousValue[currentTargetValue]) {
                    previousValue[currentTargetValue] = []
                }

                // 将符合条件的添加到previousValue[currentTargetValue]数组中
                previousValue[currentTargetValue].push(currentValue)
                return previousValue;
            },
            {}
        )
        return result;
    }

    // 如果还指定了具体年级
    let initObj = {}
    initObj[targetValue] = [];
    const result = arr.reduce(
        (previousValue, currentValue) => {

            // 不是目标值直接跳过
            if (currentValue[target] !== targetValue) {
                return previousValue;
            }

            // 符合要求则加入
            previousValue[targetValue].push(currentValue);

            return previousValue;
        },
        initObj
    )
    return result;
}


result05_01 = getByTarget(arr, "专业")
result05_02 = getByTarget(arr, "学院")
result05_03 = getByTarget(arr, "年级")

// 这里是为了确保函数返回值是一个map而不是数组（统一返回格式） 重在思路
result05_04 = getByTarget(arr, "年级", "2017级")["2017级"]
result05_05 = getByTarget(arr, "学院", "计算机学院")["计算机学院"]
result05_06 = getByTarget(arr, "专业", "自动化")["自动化"]

console.log("按专业分类");
console.log(result05_01)
console.log("按学院分类");
console.log(result05_02)
console.log("按年级分类");
console.log(result05_03)
console.log("取2017级");
console.log(result05_04)
console.log("取计算机学院");
console.log(result05_05)
console.log("取自动化专业");
console.log(result05_06)

结果：

按专业分类
{
‘物联网’: [
{ ‘年级’: ‘2017级’, ‘学院’: ‘计算机学院’, ‘专业’: ‘物联网’ },
{ ‘年级’: ‘2019级’, ‘学院’: ‘计算机学院’, ‘专业’: ‘物联网’ },
{ ‘年级’: ‘2020级’, ‘学院’: ‘计算机学院’, ‘专业’: ‘物联网’ }
],
‘计算机科学’: [
{ ‘年级’: ‘2017级’, ‘学院’: ‘计算机学院’, ‘专业’: ‘计算机科学’ },
{ ‘年级’: ‘2020级’, ‘学院’: ‘计算机学院’, ‘专业’: ‘计算机科学’ }
],
‘软件工程’: [
{ ‘年级’: ‘2018级’, ‘学院’: ‘计算机学院’, ‘专业’: ‘软件工程’ },
{ ‘年级’: ‘2019级’, ‘学院’: ‘计算机学院’, ‘专业’: ‘软件工程’ },
{ ‘年级’: ‘2020级’, ‘学院’: ‘计算机学院’, ‘专业’: ‘软件工程’ }
],
‘自动化’: [
{ ‘年级’: ‘2017级’, ‘学院’: ‘电气学院’, ‘专业’: ‘自动化’ },
{ ‘年级’: ‘2018级’, ‘学院’: ‘电气学院’, ‘专业’: ‘自动化’ },
{ ‘年级’: ‘2019级’, ‘学院’: ‘电气学院’, ‘专业’: ‘自动化’ },
{ ‘年级’: ‘2020级’, ‘学院’: ‘电气学院’, ‘专业’: ‘自动化’ }
]
}
按学院分类
{
‘计算机学院’: [
{ ‘年级’: ‘2017级’, ‘学院’: ‘计算机学院’, ‘专业’: ‘物联网’ },
{ ‘年级’: ‘2017级’, ‘学院’: ‘计算机学院’, ‘专业’: ‘计算机科学’ },
{ ‘年级’: ‘2018级’, ‘学院’: ‘计算机学院’, ‘专业’: ‘软件工程’ },
{ ‘年级’: ‘2019级’, ‘学院’: ‘计算机学院’, ‘专业’: ‘软件工程’ },
{ ‘年级’: ‘2019级’, ‘学院’: ‘计算机学院’, ‘专业’: ‘物联网’ },
{ ‘年级’: ‘2020级’, ‘学院’: ‘计算机学院’, ‘专业’: ‘物联网’ },
{ ‘年级’: ‘2020级’, ‘学院’: ‘计算机学院’, ‘专业’: ‘计算机科学’ },
{ ‘年级’: ‘2020级’, ‘学院’: ‘计算机学院’, ‘专业’: ‘软件工程’ }
],
‘电气学院’: [
{ ‘年级’: ‘2017级’, ‘学院’: ‘电气学院’, ‘专业’: ‘自动化’ },
{ ‘年级’: ‘2018级’, ‘学院’: ‘电气学院’, ‘专业’: ‘自动化’ },
{ ‘年级’: ‘2019级’, ‘学院’: ‘电气学院’, ‘专业’: ‘自动化’ },
{ ‘年级’: ‘2020级’, ‘学院’: ‘电气学院’, ‘专业’: ‘自动化’ }
]
}
按年级分类
{
‘2017级’: [
{ ‘年级’: ‘2017级’, ‘学院’: ‘计算机学院’, ‘专业’: ‘物联网’ },
{ ‘年级’: ‘2017级’, ‘学院’: ‘计算机学院’, ‘专业’: ‘计算机科学’ },
{ ‘年级’: ‘2017级’, ‘学院’: ‘电气学院’, ‘专业’: ‘自动化’ }
],
‘2018级’: [
{ ‘年级’: ‘2018级’, ‘学院’: ‘计算机学院’, ‘专业’: ‘软件工程’ },
{ ‘年级’: ‘2018级’, ‘学院’: ‘电气学院’, ‘专业’: ‘自动化’ }
],
‘2019级’: [
{ ‘年级’: ‘2019级’, ‘学院’: ‘计算机学院’, ‘专业’: ‘软件工程’ },
{ ‘年级’: ‘2019级’, ‘学院’: ‘计算机学院’, ‘专业’: ‘物联网’ },
{ ‘年级’: ‘2019级’, ‘学院’: ‘电气学院’, ‘专业’: ‘自动化’ }
],
‘2020级’: [
{ ‘年级’: ‘2020级’, ‘学院’: ‘计算机学院’, ‘专业’: ‘物联网’ },
{ ‘年级’: ‘2020级’, ‘学院’: ‘计算机学院’, ‘专业’: ‘计算机科学’ },
{ ‘年级’: ‘2020级’, ‘学院’: ‘计算机学院’, ‘专业’: ‘软件工程’ },
{ ‘年级’: ‘2020级’, ‘学院’: ‘电气学院’, ‘专业’: ‘自动化’ }
]
}
取2017级
[
{ ‘年级’: ‘2017级’, ‘学院’: ‘计算机学院’, ‘专业’: ‘物联网’ },
{ ‘年级’: ‘2017级’, ‘学院’: ‘计算机学院’, ‘专业’: ‘计算机科学’ },
{ ‘年级’: ‘2017级’, ‘学院’: ‘电气学院’, ‘专业’: ‘自动化’ }
]
取计算机学院
[
{ ‘年级’: ‘2017级’, ‘学院’: ‘计算机学院’, ‘专业’: ‘物联网’ },
{ ‘年级’: ‘2017级’, ‘学院’: ‘计算机学院’, ‘专业’: ‘计算机科学’ },
{ ‘年级’: ‘2018级’, ‘学院’: ‘计算机学院’, ‘专业’: ‘软件工程’ },
{ ‘年级’: ‘2019级’, ‘学院’: ‘计算机学院’, ‘专业’: ‘软件工程’ },
{ ‘年级’: ‘2019级’, ‘学院’: ‘计算机学院’, ‘专业’: ‘物联网’ },
{ ‘年级’: ‘2020级’, ‘学院’: ‘计算机学院’, ‘专业’: ‘物联网’ },
{ ‘年级’: ‘2020级’, ‘学院’: ‘计算机学院’, ‘专业’: ‘计算机科学’ },
{ ‘年级’: ‘2020级’, ‘学院’: ‘计算机学院’, ‘专业’: ‘软件工程’ }
]
取自动化专业
[
{ ‘年级’: ‘2017级’, ‘学院’: ‘电气学院’, ‘专业’: ‘自动化’ },
{ ‘年级’: ‘2018级’, ‘学院’: ‘电气学院’, ‘专业’: ‘自动化’ },
{ ‘年级’: ‘2019级’, ‘学院’: ‘电气学院’, ‘专业’: ‘自动化’ },
{ ‘年级’: ‘2020级’, ‘学院’: ‘电气学院’, ‘专业’: ‘自动化’ }
]

或者更简单点如下：

const arr = [
    { 年级: "2017级", 学院: "计算机学院", 专业: "物联网" },
    { 年级: "2017级", 学院: "计算机学院", 专业: "计算机科学" },
    { 年级: "2018级", 学院: "计算机学院", 专业: "软件工程" },
    { 年级: "2019级", 学院: "计算机学院", 专业: "软件工程" },
    { 年级: "2019级", 学院: "计算机学院", 专业: "物联网" },
    { 年级: "2020级", 学院: "计算机学院", 专业: "物联网" },
    { 年级: "2020级", 学院: "计算机学院", 专业: "计算机科学" },
    { 年级: "2020级", 学院: "计算机学院", 专业: "软件工程" },
    { 年级: "2017级", 学院: "电气学院", 专业: "自动化" },
    { 年级: "2018级", 学院: "电气学院", 专业: "自动化" },
    { 年级: "2019级", 学院: "电气学院", 专业: "自动化" },
    { 年级: "2020级", 学院: "电气学院", 专业: "自动化" },
]


// 根据指定字段的指定值获取分组  
function getByTarget(arr, target) {
    // 如果没有指定具体年级，例如： 按照年级分组 
        const result = arr.reduce(
            (previousValue, currentValue) => {
                // 拿到当前要分组的条件
                // 例如，currentValue是{ 年级: "2017级", 学院: "计算机学院", 专业: "物联网" }这样一个对象
                // 那么，currentValue[target] 就是年级或者学院或者专业
                let currentTargetValue = currentValue[target]

                // 如果previousValue对象中没有值，则创建一个新数组
                if (!previousValue[currentTargetValue]) {
                    previousValue[currentTargetValue] = []
                }

                // 将符合条件的添加到previousValue[currentTargetValue]数组中
                previousValue[currentTargetValue].push(currentValue)
                return previousValue;
            },
            {}
        )
        return result;
}

// 先进行总体分组
result05_01 = getByTarget(arr, "专业")
result05_02 = getByTarget(arr, "学院")
result05_03 = getByTarget(arr, "年级")

// 再进行具体分组，例如取出物联网专业
console.log(result05_01["物联网"]);

2.4 数组元素去重

let arr = ["a","b","c","d","a","b","e","c","d"]
let result = arr.reduce((previousValue,currentValue) => {
    if(previousValue.indexOf(currentValue) === -1){
        previousValue.push(currentValue)
    }
    return previousValue
},[])

console.log(result);

2.5 模拟实现map函数

Array.prototype.myMap = function(func, callbackThis){
    // 最终返回新的数组
    let res = [];

    // 定义回调函数的执行环境
    // call 第2个参数传入null 则this指向全部对象
    let cbThis = callbackThis || null;

    this.reduce(
        (prev, next, index, arr)=>{
            // 传入map回调函数拥有的参数
            // 把每一项的执行结果push进入res
            res.push(func.call(cbThis, next, index, arr));
            
        }, 
        null);
    
        return res;
}
let arr = [1,2,3,4,5,6,7,8]
let result = arr11.myMap(Math.sqrt)

console.log(result)

3、自定义实现reduce函数

/**
 * @description: 自定义数组的reduce方法
 * @params callback 回调函数
 * @params initialValue 初始值
 * @return 返回处理结果
 */
Array.prototype.myReduce = function (callback, initialValue) {
    if (this == null) {
        throw new TypeError('this is null or undefined');
    }

    if (typeof callback !== 'function') {
        throw new TypeError(`${callback} is not a function`);
    }

    console.log(this); // 传进来的数组对象
    const array = Object(this);
    const len = array.length >>> 0;
    let accumulator = initialValue;

    for (let i = 0; i < len; i++) {
        if (i in array) {
            accumulator = callback.call(undefined, accumulator, array[i], i, array);
        }
    }

    return accumulator;
};

// 使用
let array = [1,2,3,4]

let result = array.myReduce((pre,cur) => {
    pre.push(cur+1)
    return pre
},[])

console.log(result); // [2,3,4,5]

或者循环实现

var reduce = function (nums, fn, init) {
    if (nums.length === 0)
        return init

    nums.forEach((item, index) => {
        init = fn(init, item)
    })

    return init
};

// 被处理的数组
let nums = [1, 2, 3, 4]
// 初始值
let init = 100
// 回调函数
function sum(accum, curr) { return accum + curr * curr; }

console.log(reduce(nums, sum, init));
持久的棒棒君
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈javascript的Array.prototype.slice.call
10-23
发现大多人都用了Array.prototype.slice.call(argments,0)，一直不明白这句是干什么的。而昨天温习了slice()方法，再参考Function.call(thisArg[, arg1[, arg2[, ...]]])，还是不得而知（我脑筋转得慢:|）。
js面试题：Array.prototype.filter() , map(), forEach() , reduce()
weixin_46249441的博客
12-12 446
一、Array.prototype.filter() Array.prototype.filter = function(callback, thisArg) { if(this == undefined) { throw new TypeError('this is null or not underfined'); } if(typeof callback !== 'function'){ throw new TypeError(call.
Array.prototype方法
天空影
10-23 1514
参考地址：常用的几种Array.prototype方法
javascript常见场景的一题多解
QTFYING的博客
05-12 344
对象中能使用call或者applly方法吗 A: 当然可以了，只要有函数的地方就可以使用call或者apply，举个例子： var Study = { country: 'china', age: null, init: function (name, txt) { console.log(`${name}，特长是：${txt}`); }, detail: function (name, txt) { this.init.call(this, name, txt);
JS Array内置方法map, each, every, indexOf,reduce,some的等重构
shadowfall的博客
03-04 249
文章转载 1.重构js数组的map方法 // 重构js数组的map方法 Array.prototype.map = function (fn, context) { if (typeof fn != 'function') { throw new TypeError(`${fn} is not a function`); } let arr = this, temp = []; for (let i = 0; i < arr.length; i++) { let re
[Vue warn]: Error in render: "TypeError: data.reduce is not a function"报错详解
热门推荐
咕咕鸡的执着
03-29 4万+
报错：[Vue warn]: Error in render: "TypeError: data.reduce is not a function"详解 查看报错信息：[ Vue warn]: Error in render: "TypeError: data.reduce is not a function 问题分析：本文用的是elementUI框架的el-table组件来开发的。于是...
vue element 实现分页功能
s1ngle的博客
09-30 2305
最近在学分页功能，这里总结下前端如何实现分页 用的是element框架和el-pagination组件 效果图: template代码： <el-pagination :page-size="pageSize" // 设置每页显示多少条 @current-change="currentChangeHandle" // 当前页数改变时调用函数 :current-page="currentPage" // 当前第几页 layout="total
JavaScript--arr.reduce()
L_smwy的博客
11-01 451
arr.reduce()方法详解及高级技巧 简介 1.reduce()接受一个函数作为累加器，从数组第一个值开始缩减，直到最后一个值缩减完成。最终计算为一个值; 2.reduce()可做为高阶函数，用于函数的compose; 3.reduce()无法调用空数组，会报错。 语法 array.reduce(callback,[initialValue]) reduce为数组中每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数： callback(执行数组中每个值的函数，包括4个参数
带你手动实现数组reduce方法
少油少盐不要辣
06-30 2871
// 该方法存在构造函数的原型上，即数组实例的原型上。 Array.prototype.myReduce = function (fn, initValue) { if(initValue === undefined){ let result = this[0]; for (let i = 0;i <= this.length - 2;i++) { result = fn(result, this[i+1], i, this);
【js】Array.prototype.concat和Array.flat、Array.flatMap的关联使用
bbt953的博客
09-07 117
Array.prototype.concat和Array.flat、Array.flatMap的关联使用
Javascript面试经典套路reduce函数查重
10-20
reduce函数，是ECMAScript5规范中出现的数组方法.下面通过本文给大家分享Javascript面试经典套路reduce函数查重，需要的朋友参考下吧
Array.prototype.every:Array.prototype。每个符合规范的polyfill
05-01
符合ES5规范的Array.prototype.every / polyfill / replacement可以使用到ES3。 该软件包实现了接口。 它在ES3支持的环境中工作，并符合建议的。 因为Array.prototype.every取决于接收方（“ this”值），所以...
array-includes:Array.prototype。包括符合规范的polyfill
04-30
数组包含 符合ES7 / ES2016规范的Array.prototype.includes / polyfill / replacement可以使用到ES3。 该软件包实现了接口。 它在ES3支持的环境中工作，并符合建议的。 因为Array.prototype.includes依赖于接收方（ ...
plusArrays.js:Array.prototype 对象的扩展
06-17
Array.prototype 对象的扩展 介绍 该软件包可以通过 npm 轻松安装： npm install plus_arrays 要将自定义方法注册到“Array.prototype”对象，我们只需要包 require(plusArrays) 应用程序接口 .compare(arr) ...
array-smoosh:Array.prototype.smoosh和smooshMap全部可用！
05-02
特征在没有自己的地图实现的旧版浏览器上工作没有条件的猴子补丁，因此网络永远不会破坏您的网站 :face_screaming_in_fear: 原料药 Array.prototype.smoosh(level?): Array 平滑阵列。 如果未指定级别，则将以递归...
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 634
步骤很详细，直接上教程……
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
励志做最业余的专业博主，控件产品可以私我~
04-28 733
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
bpmn-js推荐几款常用的插件
最新发布
飞云先生
04-30 22
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
用Typescript写自动化工作流
联蔚盘云的博客
04-29 863
acao 的命令还有一些其他用法，比如指定执行某个 job 或者忽略依赖 通过命令行参数的方式注入等等，详细使用方式可以查看文档这个项目最近也在持续更新中，后续也会支持更多的预设，web ui 的操作方式也在计划中小伙伴想参与预设的开发也欢迎 pr 呀。
Array.prototype.reduce.call中的.reduce.call
07-12
`Array.prototype.reduce.call` 是一个高级的 JavaScript 技巧，用于在类数组对象上调用 `reduce` 方法。 首先，`Array.prototype.reduce` 是 JavaScript 数组的原型方法，用于对数组的每个元素进行迭代，并返回一...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值