用数组的reduce方法实现map方法

article/2025/8/5 9:43:33

what

首先我们需要理解reduce这个方法的语法:

arr.reduce(callback,init)
//详细写法
arr.reduce((prev,cur,index,arr)={...
},[])* callback (执行数组中每个值的函数,包含四个参数)1、previousValue (上一次调用回调返回的值,或者是提供的初始值(initialValue))2、currentValue (数组中当前被处理的元素)3、index (当前元素在数组中的索引)4、array (调用 reduce 的数组)
* init  (作为第一次调用 callback 的第一个参数。)

其中:
callback:reduce为数组中每一个元素依稀执行回调函数,不包括数组中被删除或从未赋值的元素。
callback 接受四个参数:prev初始值(或者上一次回调函数的返回值),cur当前索引值,index当前索引,arr调用reduce的数组。

实现:

简单方法

reduce进行数组求和

var arr = [1,2,3,4];
var sum = arr.reduce((prev,cur)=>{return prev + cur;
},0)
console.log(sum)  //10

reduce求数组项的最大值

var arr = [1,2,3,4,6];
var max = arr.reduce((prev,cur)=>{return Math.max(prev,cur)
},0)
console.log(max)  //6

进阶:

数组去重 使用includes判断数组是否包含当前元素

var arr = [1,2,3,4,6,1,2,3];
var newArr = arr.reduce((prev,cur)=>{if(!prev.includes(cur)){return prev.concat(cur)}else{return prev}
},[])
console.log(newArr) //[1,2,3,4,6]

计算数组中每个元素出现的个数

这里我们用了in 关键字,来判断对象是否包含某个属性,会返回 true/false
也可以使用hasOwnProperty该方法会返回一个布尔值,指示对象自身属性中是否具有指定的属性,会返回 true/false

let names = ['Alice', 'Bob','Alice', 'Tiff', 'Bruce', 'Alice'];
var result = names.reduce((prev,cur)=>{if(cur in prev){prev[cur]++}else{prev[cur] = 1}return prev
},{})
console.log(result) //{Alice: 3, Bob: 1, Tiff: 1, Bruce: 1}

reduce 实现扁平化

(当然我们也可以使用ES6 的 flat 实现数组扁平化,不过面试的时候面试官说不定会让你手写哦)

//二维
let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre,cur)=>{return pre.concat(cur)
},[])
console.log(newArr)
//多维
let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
function fn(arr){return arr.reduce((prev,cur)=>{return prev.concat(Array.isArray(cur) ? fn(cur) : cur)},[])
}
console.log(fn(arr))

面试题

了解并熟练掌握reduce的使用,我们来看一下今天最终要实现的 map

题目:用数组的reduce方法实现map方法

面试题目,用数组的reduce方法实现map方法,是需要使用reduce来达到模拟map效果,那么也应该满足map这个方法里面参数问题

而下面这个题目的意思则是需要写出来一个函数,使得函数实现一个map功能, 仅此而已

题目
arr = [1,2,3]
a.xmap(i => i *2) // [2,4,6 ]

map相关概念: 遍历数组的每一项,并执行回调函数的操作,返回一个对每一项进行操作后的新数组

let array = arr.map(function callback(currentValue, index, array) { ...
}[, thisArg])

参数含义:
1、callback
生成新数组元素的函数,使用三个参数:

  • currentValue :数组中正在处理的当前元素
  • index :数组中正在处理的当前元素的索引
  • array:map方法被调用的数组

2、thisArg
可选的。执行 callback 函数时 使用的this 值。

const xmap = function(arr,fn){return arr.reduce((pre,cur)=>{return [...pre,fn(cur)]},[])
}
const arr = [1,2,3]
console.log(xmap(arr,i=>i*2))

在这里插入图片描述
然后我们来看上面两个题对应的解答:

一、使用reduce实现数组map方法

原生map方法的特点:
1、map不会对原数组产生影响
2、map返回的是一个新数组
3、一个数组一旦调用map方法,每一个元素都会执行map中的回调函数。
4、map方法会跳过被delete删除或者未定义的元素

第一个参数:callback
map接收的第一个参数是一个回调函数,这个参数是必须传入的,callback中有三个可选参数,分别代表着元素,索引和调用map方法的数组,也就是(item,index,arr)。
第二个参数:thisArg(定义执行callback的this指向):可选
第二个参数表示的是callback的this指向。

//使用reduce实现map
//思路:1、判断传入的fn是否是一个函数,如果不是则抛出异常
//2、使用reduce进行拼接调用,最后返回
//3、this指向的是调用map的数组
Array.prototype.myMap = function(fn,thisArg = []){//如果fn传入的不是一个函数则抛出异常if(typeof fn != 'function'){throw new Error(`${fn} is not a function`);}return this.reduce((pre,cur,index,arr) => {return pre.concat(fn.call(thisArg,cur,index,arr));},[])
}
const arr = [2,3,1,5];
const temp = arr.myMap(item => item * 2);
console.log(temp);

二、简单实现处理数组功能

const xmap = function(arr,fn){return arr.reduce((pre,cur)=>{return [...pre,fn(cur)]},[])
}
const arr = [2,4,5,6]
console.log(xmap(arr,n => n * 2))

http://chatgpt.dhexx.cn/article/QkO1OEhT.shtml

相关文章

map的定义方法

map的定义方法 map的定义方法: map<数据类型&#xff0c;数据类型> 变量名字 举例: map<int,int> mymap; 第一个数据类型是key&#xff0c;是键 第二个数据类型是value&#xff0c;是值 另外map初始值会默认为0的 根据键和值是什么类型的&#xff0c;定义一个map …

Map基本介绍和Map方法

Map接口特点 Map接口特点(JDK8的Map接口特点) Map中key不可以重复&#xff0c;原因和HashSet一样,重复了后面添加的会覆盖前面添加的数据 Map中key可以为null,但只能有一个&#xff0c;因为后面添加的数据会覆盖前面添加的数据&#xff0c;value为null&#xff0c;可以有多个 …

map方法的常见使用

const a [{ num: 张无忌, price: 123 },{ num: 周芷若, price: 666 },]console.log(a.map((item) > item.num))console.log(map方法a,a是不变的&#xff0c;要有人接受他才行)console.log(a)let b []b a.map((item) > item.num)console.log(b) ----------------------…

JS数组的map方法

map方法 不支持IE6、7 、8 array1.map(fn) array1.map(fn[,thisArg]) 注意&#xff1a; fn 必须是函数&#xff0c;如果不是函数则会报错 TypeError: undefined is not a function4 map()不会对空数组进行检测。map()不会改变原是数组 1 .理解 &#xff08;官方&#xff1…

数组的Map方法详解

作用 map()&#xff1a;创建一个新数组&#xff0c;这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。 语法 arr.map(callback(currentValue [, index [, array]]){ // Return element for new_array }[, thisArg]) callback&#xff1a;生成新数组元素…

javascript 中的map()方法

Vue全套学习免费视频&#xff1a;B站 小胖梅-的个人空间_哔哩哔哩_Bilibili 个人微信&#xff1a;renxm2023&#xff08;有前端技术群 提供技术问答 &#xff09; 接口数据映射 从接口得到数据 res: let r res.map(item > {return {title: item.name,sex: item.sex 1…

详解map(一)—— map的常用方法

前言 map是语言中常用的一个数据结构&#xff0c;其在不同语言中有着不同的实现的&#xff0c;现在我们看下在go中的底层实现。 更多内容分享&#xff0c;欢迎关注公众号&#xff1a;Go开发笔记 map源码 map的底层实现的源码位于runtime/map.go中&#xff0c;其相关方法的调…

Hive 分支判断 case函数 if函数

文章目录 CASE函数1.含义&#xff1a;2.示例&#xff1a; IF函数1.含义&#xff1a;2.示例&#xff1a; CASE函数 1.含义&#xff1a; CASE a WHEN b THEN c [WHEN d THEN e]* [ELSE f] END当a b,返回 c; 当 a d, 返回 e; 否则 返回 f 2.示例&#xff1a; emp_sex 表数据…

SQL语句--CASE函数写法的简单举例,及应用

SQL语句–CASE函数写法的简单举例&#xff0c;及应用 ---case函数的基本结构&#xff1a;case when...then...else... ----可以写也可以不写&#xff0c;按实际需求end【举个栗子_1】 eg1&#xff1a; --我想实现的效果&#xff1a; --当ID为1时&#xff0c;输出结果显示“…

MySQL:case函数和if函数的select用法(超详细)

case在select语句中的第一种用法&#xff1a; 这种写法只是针对某一个单一属性的具体值来做判断select id,name,(case sex when 0 then 男 when 1 then 女 else 未知 end)性别 from user; case在select语句中的第二种用法&#xff1a; case后面的判别依据关键字sex&#xff0c;…

oracle之case函数(case when then else end)用法

在写项目时&#xff0c;会遇到有字典项的业务&#xff0c;例如数字1代表男&#xff0c;数字2代表女&#xff0c;用做展示的时候&#xff0c;遇到对应数字就展示中文对应的男or女。 现在数据库创建一张表(message_mid)&#xff0c;字典项的字段是state&#xff1a;0代表办结&…

sql中的case函数的使用

以下内容首发于我的个人博客网站&#xff1a; http://riun.xyz/ 参考连接&#xff1a; https://www.cnblogs.com/HDK2016/p/8134802.html 一、分组时不同情况的处理 现有如下表&#xff1a; 需要按照大洲进行分组&#xff0c;最终得出如下结果&#xff1a; 可以使用case进行…

sql round函数(case函数)

注意&#xff1a;关于SELECT语句拼写注意事项 先列再纵&#xff0c;即&#xff1a;select 列 from tablename group by 纵 1. round(parm1,int parm2)&#xff1a;对parm1进行四舍五入操作&#xff0c;parm2为保留小数的有效位数&#xff1b; parm1 通常为double类型&#x…

sql中的case函数

在sql中case是一个控制流语句;类似于if语句 Case语句有两种形式:简单case语句与搜索case语句; 简单的case语句:可以检查表达式的值与一组唯一值的匹配: 语法: Case expression When value1 then returnvaluse1 When value2 then returnvaluse2 Else defaultvalue End Ca…

CASE函数

CASE函数 是一种多分支的函数&#xff0c;可以根据条件列表的值返回多个可能的结果表达式中的一个。 可用在任何允许使用表达式的地方&#xff0c;但不能单独作为一个语句执行。 分为&#xff1a; 简单CASE函数 搜索CASE函数 简单 CASE函数 1 2 3 4 5 6 CASE 测试表达式 WHE…

sql语句之case函数的用法

简单case函数语法&#xff1a; 是一种多分支的函数&#xff0c;可以根据条件列表的值返回多个可能的结果表达式中的一个。&#xff08;类似于if,else&#xff09; 简单 CASE函数&#xff1a; 计算测试表达式&#xff0c;按从上到下的书写顺序将测试表达式的值与每个WHEN子句的…

【MYSQL快速入门】case函数

case函数&#xff1a; 是一种多分支的函数&#xff0c;可以根据条件列表的值返回多个可能的结果表达式中的一个。 简单case函数&#xff1a; case 测试表达式 when 简单表达式1 then 结果表达式1 when 简单表达式2 then 结果表达式2.. when 简单表达式3 then 结果表达式n [e…

三分钟搞懂SQL的Case函数

文章标题 前言一: 使用语法作用一: 结合分组统计数据作用二: 分条件更新字段值作用三: 检查表中字段值是否一致作用四: 行转列(重点-面试常见)五:普通case函数和搜索case函数的区别六:总结 温馨提示: 本文大约1832字,阅读完大概需要2-3分钟,希望您能耐心看完,倘若你对该知识点已…

域名泛解析设置方法

域名泛解析是指&#xff1a;利用 *&#xff08;星号&#xff09;来做次级域名以实现所有的次级域名均指向同一 IP 地址。 例如你的域名是 a.com,设置泛解析&#xff08;.a.com&#xff09;后&#xff0c;所有该域名下的次级域名&#xff08;如 b.a.com&#xff09;都将指向与 a…