reduce函数的用法

这是一个考察面试者对reduce函数用途的js面试题。下面我们看一下reduce函数的函数介绍: reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。reduce() 对于空数组是不会执行回调函数的。参数如下: 参数说明 可以看到这是一个求和,或者统计有关的函数,那么可以得出以下用途。 基础数据: const baseData = [ {age: 10, name: '小明'}, {age: 15, name: '小黄'}, {age: 18, name: '小王'}, {age: 18, name: '小白'}, {age: 21, name: '小陈'} ] 1. 数组求和 求出数组中所有年龄的和: // 方法一 baseData.reduce((total, currentValue) => total + currentValue.age, 0); // 方法二 baseData.reduce((previousValue, currentValue, index) => { console.log(index) if(typeof previousValue === 'number') { return previousValue + currentValue.age } else { return previousValue.age + currentValue.age } }) 运行截图: 运行结果 上面求和有2种写法,我们重点看一下第二种写法,可以看到第二种方式没有传第二个参数,这就导致previousValue变量可能是返回结果的和,也可能是函数的第一项,所以需要特殊判断一下。而且遍历开始的index也是从1开始的。2种方式来看,第一种更简便,第二种会少一次循环。 2. 数组去重 去掉数组中年龄重复的数据 let resultArr = baseData.reduce((result, currentValue, index) => { if (!result.find(item => item.age === currentValue.age)) { result.push(currentValue) } return result }, []) console.log(resultArr, 'result') 3. 统计个数 找出年龄小于18岁的数据 baseData.reduce((result, currentValue) => currentValue.age < 18 ? ++result : result, 0); // 2 4. 多维数组转换为一维数组 let arr = [[0, 1], [2, 3], [4,[5,6,7]]] const newArr = function(arr){ return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[]) } console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7] 5. 统计一个数组中每个元素出现的次数 const arraySum = (arr, val) => arr.reduce((acc, cur) => { return cur == val ? acc + 1 : acc + 0 }, 0); let arr = [ 0, 1, 3, 0, 2, 0, 2, 3 ] console.log(arraySum(arr, 0)) // 数组arr中 0 元素出现的次数为3 兼容性 1.png 可以看出除了特别老的浏览器,其他都支持了,放心使用。 总结 可以看到,reduce函数应用在数组求和,数组去重,统计,数组转换等方面。熟练掌握能减少你的代码量。使代码变更更简洁,提高开发效率。 线上体验地址:访问 所有的源码都可以在我的仓库地址:访问 学习如逆水行舟,不进则退,前端技术飞速发展,如果每天不坚持学习,就会跟不上,我会陪着大家,每天坚持推送博文,跟大家一同进步,希望大家能关注我,第一时间收到最新文章。 公众号前端每日面试: 公众号

本文章由javascript技术分享原创和收集

发表评论 (审核通过后显示评论):