JS - 基础学习(6): reduce() 方法

在前后端数据交互的过程中,为了能够减少ajax请求次数,减轻带宽压力,后端往往会将当前接口所需的参数以对象的形式集体返回。这样就导致一个问题:对象内字段属性过多,而有些小组件功能又压根不需要这么一个大对象参数(主要是对象属性过多,难得理,也懒得找),这时就需要对这个大对象做再加工处理。

比如:将小组件所需的字段属性拎出来单独再封装成一个小对象。一般情况下我的写法是:

let retData = {a: 1,b: 2,c: 3,d: 4,e: 5,f: 6,g: 7,h: 8,j: 9,k: 10,m: 11,n: 12};
let tempData = {
    a: retData.a,c: retData.c,d: retData.d,g: retData.g,};

但是这种写法却很麻烦,要一个属性一个属性的添加,于是就突发奇想地想优化一下这种写法。苦思冥想该怎么玩,即要写起来简单,又要显得 big 高,所以就用到了reduce()方法。

function handlingObjectProperty(propertyList,obj) {
    return propertyList.reduce((iter,val) => {
        if (val in obj) {
            iter[val] = obj[val];
        }
        return iter;
    },{});
}

let retData = {a: 1,1)">};
let tempData = handlingObjectProperty(['a','c','f','k'],retData);

,同样得将所需的字段属性拎出来封装成一个小对象,这样就不需要一个属性一个属性地添加了,方便了很多,一行代码就搞定。

 

reduce方法的定义和用法

reduce() 方法接收一个回调函数作为处理器,数组中的每一个元素(从左到右)【不包括数组中被删除或从未被赋值的元素】依次执行该回调函数,并最终计算为一个值或一个对象。reduce() 可以作为一个高阶函数,用于函数的 compose。

reduce() 方法回调函数接受四个参数:提供的初始值(或上一次调用回调函数返回的值),当前被处理的元素,当前正被处理元素在数组中的索引,调用 reduce方法 的数组。

语法:

array.reduce((total,currentValue,currentIndex,arr),initialValue)
//
array.reduce(callback,[initialValue])

参数:

initialValue参数解析

  1、不传 initialValue参数

let testArr = [1,2,3,4];
let sum = testArr.reduce((prev,testArr) => {
    console.log(prev,currentIndex);
    return prev + currentValue;
});
console.log(`sum: ${sum}`);

 输出结果。

  从控制台打印结果可以看出:由于没有给 reduce方法传入 initialValue参数,所以 reduce方法的回调函数 total参数 以 testArr数组的第一个元素作为初始值,currentValue则从第二个元素开始,因而 currentIndex从1开始。所以,虽然 testArr数组的长度是4,但是 reduce方法只循环了 3次。

  2、传入 initialValue参数

let testArr = [1,1)"> currentValue;
},0);
console.log(`sum: ${sum}`);

输出结果。

  这次给 reduce方法 传入了 initialValue参数,所以 total参数以 initialValue参数 作为初始值,currentValue则自然而然从第一个元素开始,currentIndex也就从0开始。所以,testArr数组的长度是4,reduce方法也就循环了 4次。

  3、如果array数组是个空数组,且未传入 initialValue参数。此时代码执行会报错,回调函数也不会被执行。

let testArr = [];
let sum = testArr.reduce((prev,1)"> currentValue;
});
 index_reduce.js:18 Uncaught TypeError: Reduce of empty array with no initial value

  4、如果array数组是个空数组,但传入 initialValue参数。此时代码能顺利执行,回调函数也会执行,只是由于是空数组,没得结果而已。

let testArr =
let testArr = [1,cur) => {
     cur
},1)">);
console.log(`sum: ${sum}`);                             10

let pro = testArr.reduce((prev,1)">return prev * 求积时,initialValue不能初始化为0
console.log(`pro: ${pro}`);                           24

其他用法:

  1、计数数组中每个元素、字符串中每个字符出现的总次数

 获取数组内、字符串内某个元素、字符出现总次数
 getFrequency(parList) {
    return parList.reduce((pre,1)">if (cur  pre) {
            pre[cur]++
        } else {
            pre[cur] = 1
        }
         pre
    },{});
}

let iterators = ['reduce','map','for','forOf','forEach','reduce','for'];
let testStr = 'reducemapforforOfforEachreducefor';
console.log(getFrequency(iterators));                       {reduce: 2,map: 1,for: 2,forOf: 1,forEach: 1}
console.log(getFrequency(testStr.split('')));               {r: 6,e: 4,d: 2,u: 2, …}    注:字符串不能直接被reduce,所以先把字符串分割成字符数组

  2、数组,字符串字符去重

 数组去重、字符串内字符去重
 deduplication(parList) {
    if(!pre.includes(cur)){
             pre.concat(cur)
        }{
             pre
        }
    },[]);
}

let iterators = ['reduce',1)">;
console.log(deduplication(iterators));                      ["reduce","map","for","forOf","forEach"]
console.log(deduplication(testStr.split('')).join(''));     reducmapfoOEh    注:字符串不能直接被reduce,故先将字符串分割成字符数组,reduce完成后,再格式化成字符串

  3、数组降维(又名:数组的扁平化)

 下面 reduce回调函数内对 pre参数的操作,只能用concat方法不能用push方法。因为,push方法虽然也将 cur添加到了 pre末尾,但是返回的却是 pre当前的长度,而不是当前 pre的
 dimensionalityReduction(parList) {
    return pre.concat(Array.isArray(cur) ? dimensionalityReduction(cur) : cur)
    },[]);
}

let testArr = [[1,2],[3,[4]],[[5],6]];
console.log(dimensionalityReduction(testArr));              [1,4,5,6]

  4、根据需求对 对象属性的操作

  41:如本文开头所述的,从一个大对象内将所需的字段属性拎出来单独再封装成一个小对象;42:对 对象数组(后端返回的表格数据,一般都是对象数组) 内各个对象特定属性值进行特定处理:如根据状态值不同显示不同提示语、数据格式转换、数据逻辑处理等。

 42、数据逻辑处理
 processData(parList,attr) {
    return pre + cur[attr];
    },1)">);
}

let testArr = [
    {month: 1,sales: 85},{month: 2,sales: 30'sales')}万元`);         2020年第一季度销售总额: 155万元

  对于对象数组而言,reduce方法适用于 将每个对象元素内指定字段属性单独拿出来做处理,然后返回一个值或一个对象,如本文开头的字段属性重新封装,这里的数据累加等。而不是对这个数组本身的处理,对于这些对象数组本身的处理,for,forEach,map等方法更实用。

最后

  reduce方法可以实现的东西,很多时候for循环,forEach方法、甚至map方法都可以实现,那为啥要用reduce呢。个人觉得吧,这个无关啥逼格什么的,仅仅只是想让代码更简洁,功能逻辑简单化,同时也让代码多元化,不让之前学过的东西束之高阁,喂灰尘罢了。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)