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

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))