js高阶函数之用reduce实现map

最新推荐文章于 2024-01-14 12:14:35 发布

CC_Together

最新推荐文章于 2024-01-14 12:14:35 发布

阅读量845

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript es6

本文链接：https://blog.youkuaiyun.com/CC_Together/article/details/105465600

javascript 专栏收录该内容

16 篇文章

订阅专栏

本文详细解析了JavaScript中的高阶函数reduce和map的工作原理及应用。reduce方法通过执行reducer函数将数组元素汇总为单一值，而map方法则用于创建新数组，其元素是原数组元素经函数处理后的结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

加深对高阶函数reduce和map实现原理的理解

高阶函数：
函数中可以传入另一个函数作为参数的函数

map介绍

map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一次提供的函数后的返回值。

语法：


var new_array = arr.map(function callback(currentValue, index, array) {},thisArg)

参数:
callback：生成新数组元素的函数，使用三个参数：
currentValue：callback 数组中正在处理的当前元素。
index(可选)：callback 数组中正在处理的当前元素的索引。
array(可选)：map方法调用的数组。
thisArg(可选)：执行 callback 函数时值被用作this。

map常见用法举例

const arr = [1, 4, 9, 16];

const map = arr.map(x => x * 2); //数组元素均乘2
console.log(map); // [2, 8, 18, 32]

reduce介绍

reduce方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

语法：


const result = arr.reduce(func(pre, curr, index, array) {}, initialValue)

参数:
func: 执行数组中每个值 (如果没有提供 initialValue则第一个值除外)的函数
pre: 累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue(初始值)。
curr: 数组中正在处理的元素。
index(可选): 数组中正在处理的当前元素的索引。如果提供了initialValue，则起始索引号为0，否则从索引1起始。
array(可选): 调用reduce()的数组
initialValue(可选): 作为第一次调用 callback函数时的第一个参数(pre)的值。如果没有提供初始值，则将使用数组中的第一个元素。

reduce常见用法举例：

const arr = [1, 4, 9, 16];

const reduce = arr.reduce((pre,curr) => pre+curr); //求和
console.log(reduce); // 1+4+9+16 = 30
/*执行情况
1.pre = 1，curr = 4; (没有提供初始值initialValue,pre = arr[0])
2.pre = 5, curr = 9;
3.pre = 14, curr = 16;
4.pre = 30；(最终return的值)

用reduce实现map：

Array.prototype.myMap = function(fn, thisArg) {
	var res = [];
	thisArg = thisValue || [];
	return this.reduce(function(pre, cur, index, arr) {
	    return res.push(fn.call(thisArg, cur, index, arr));
	}, []);
	return res;
}