数组的reduce的妙用之处

在前端开发过程、或者面试过程中,别人问你数组常用的操作,你也许立刻马上回答for循环、forEach、for..of、
map、some…reduce等方法。我相信前端开发的小伙伴,10个人中有8个对reduce仅仅是停留在数据累加上,
下面本人介绍一些reduce函数的妙用之处。

一、回顾下`reduce`函数的参数问题

1、reduce函数

Array.prototype.reduce(function(previousVal, currentVal, index, _this) {// 函数体
}, initVal);

2、理解上面的函数
- 1.reduce函数也是对数组迭代的过程
- 2.第一次循环的时候,previousVal==initVal的
- 3.从第二次开始,previousVal==reducer函数中的返回值了
- 4、index表示当前数组的序列化
- 5、_this表示当前的数组

二、自己手动实现一个`reduce`函数

1、自己扩展数组的方法

Array.prototype.myReduce = function(fn, initVal) {if (Object.prototype.toString.call(this) != '[object Array]') {throw new Error('当前是数组的方法,不能使用到别的上面');}let total;if (initVal != undefined) {total = initVal;} else {total = this[0];}if (initVal === undefined) {for (let i = 1; i < this.length; i++) {total = fn(total, this[i], i, this);}} else {for (let [index, val] of this.entries()) {total = fn(total, val, index, this);}}return total;
};

一、数据累加

1、数据原

let ary1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

2、数据叠加

const result = ary1.reduce((pre, cur) => pre + cur);
console.log(result);

二、将数组转换为对象

1、实现代码

const userList = [{id: 1,username: 'john',sex: 1,email: 'john@163.com'},{id: 2,username: 'jerry',sex: 1,email: 'jerry@163.com'},{id: 3,username: 'nancy',sex: 0,email: ''}
];let result = userList.reduce((pre, current) => {return {...pre, [current.id]: current};
}, {});console.log(result);

三、将大数组转换成小数组

1、实现代码

const fileLines = ['Inspector Algar,Inspector Bardle,Mr. Barker,Inspector Barton','Inspector Baynes,Inspector Bradstreet,Inspector Sam Brown','Monsieur Dubugue,Birdy Edwards,Inspector Forbes,Inspector Forrester','Inspector Gregory,Inspector Tobias Gregson,Inspector Hill','Inspector Stanley Hopkins,Inspector Athelney Jones'
];let result = fileLines.reduce((pre, current) => {return pre.concat(current.split(/,/g));
}, []);console.log(result);

四、将数组展开

1、实现代码

const arr = ["今天天气不错", "", "早上好"];const arr2 = arr.reduce((pre, cur) => {return pre.concat(cur.split(''));
}, []);
console.log(arr2);

五、求数组的最大值与最小值

1、实现代码

const readings = [0.3, 1.2, 3.4, 0.2, 3.2, 5.5, 0.4];let minValue = readings.reduce((x,y) => Math.min(x,y));
console.log(minValue);
let maxValue = readings.reduce((x,y) => Math.max(x,y));
console.log(maxValue);

六、使用`reduce`写一个工具方法,用来提取对象中的数据

1、后端返回的一个对象

let obj1 = {"result": {"report": {"contactInfo": {"callsNumber": 0,"contactsNumber": 0,"emergencyContactHasOverdue": "No","sameLiainson": {"isSame": "Yes","accounts": "aa"}}}}
};

2、使用reduce的工具方法

const objectGetVal = (obj, expr) => {if (!Object.is(Object.prototype.toString.call(obj), '[object Object]')) {throw new Error(`${obj}不是对象`);}if (!Object.is(Object.prototype.toString.call(expr), '[object String]')) {throw new Error(`${expr}必须是字符串`);}return expr.split('.').reduce((prev, next) => {if (prev) {return prev[next]} else {return undefined;}}, obj)
};
console.log(objectGetVal(obj1, 'result.report.contactInfo.emergencyContactHasOverdue'));
console.log(objectGetVal(obj1, 'result.report.emergencyContactHasOverdue'));
// 输出结果
// No
// undefined

七、使用`reduce`生成树型菜单参考

数组的reduce的妙用之处相关推荐

JavaScript 中数组方法 reduce 的妙用之处
Javascript数组方法中,相比map.filter.forEach等常用的迭代方法,reduce常常被我们所忽略,今天一起来探究一下reduce在我们实战开发当中,能有哪些妙用之处,下面从red ...
【JavaScript】查漏补缺 —数组中reduce()方法
[JavaScript]查漏补缺 -数组中reduce()方法
js中ES6新增的数组方法reduce()，和数组去重，降维。
js中ES6新增的数组方法reduce() js数组reduce()详解基本概念: reduce()方法接收一个函数作为累加器,数组中的每一值(从左到右)开始缩减,最后成为一个值 reduce()为 ...
数组的 reduce方法
数组的 reduce方法 reduce() 方法对数组中的每个元素按序执行一个由你提供的 reducer 函数,每次运行都会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值. 当第一 ...
几个关于js数组方法reduce的经典片段
以下是个人在工作中收藏总结的一些关于javascript数组方法reduce的相关代码片段,后续遇到其他使用这个函数的场景,将会陆续添加,这里作为备忘. javascript数组那么多方法,为什么我要 ...
数组求和-reduce方法
function sum(...numbers){return numbers.reduce((pre,current)=>{return pre + current}) } console.l ...
swift 数组 filter reduce sort 等方法
数组的常用方法 swift 数组有很多的操作方法,但是用的时候用常常想不起来,就列出来看看 map 和 flatMap 对数组中的元素进行变形操作 filter 主要对数组进行过滤 reduce 主要 ...
数组的reduce方法
reduce方法有两个参数,第一个参数是操作数组项的函数:第二个参数则是传入的初始值,reduce最常用的方法是叠加,以下例子可以看出,reduce函数根据初始值0,不断的叠加数组项: var ite ...
delphi7存储过程传入数组_js数组方法reduce
JS数组Reduce方法详解 reduce方法将会对数组元素从左到右依次执行reducer函数,然后返回一个累计的值. reduce函数的参数 reduce函数接收两个参数,第一个参数是回调函数red ...

数组的reduce的妙用之处

一、回顾下`reduce`函数的参数问题

二、自己手动实现一个`reduce`函数

一、数据累加

二、将数组转换为对象

三、将大数组转换成小数组

四、将数组展开

五、求数组的最大值与最小值

六、使用`reduce`写一个工具方法,用来提取对象中的数据

七、使用`reduce`生成树型菜单参考

数组的reduce的妙用之处相关推荐

最新文章

热门文章

数组的reduce的妙用之处

一、回顾下reduce函数的参数问题

二、自己手动实现一个reduce函数

一、数据累加

二、将数组转换为对象

三、将大数组转换成小数组

四、将数组展开

五、求数组的最大值与最小值

六、使用reduce写一个工具方法,用来提取对象中的数据

七、使用reduce生成树型菜单参考

数组的reduce的妙用之处相关推荐

最新文章

热门文章

一、回顾下`reduce`函数的参数问题

二、自己手动实现一个`reduce`函数

六、使用`reduce`写一个工具方法,用来提取对象中的数据

七、使用`reduce`生成树型菜单参考