reduce实现filter,map 数组扁平化等
2023-09-27 14:29:04 时间
map
函数接收一个函数作为参数,作为参数的函数接收三个参数值,分别是遍历数组的每一项元素,元素的索引和数组本身。这三个参数刚好和reduce函数接收的第一个函数参数的第2、3、4个参数是对应的。这是实现的核心
实现思路是,将每次遍历的元素,作为传入的函数的参数,并将函数执行的结果放入新的数组中。
reduce实现map
Array.prototype._map = function (callback) {
if(typeof callback === 'function') {
return this.reduce((prev,item,index,arr) => {
prev.push(callback(item, index, arr))
return prev
}, [])
} else {
console.log(new Error('callback is not function'))
}
}
let val = [1, 5, 6]._map(item => item+ 1)
console.log(val); // [2, 6, 7]
复制代码
实现filter
的思路和实现map
是一致的,只不过前者是一股脑的把执行结果全放入数组中,而filter需要做一个判断:如果filter函数传入的参数(参数是一个函数)执行后有返回值,即经过了检验,才将遍历的当前元素放入数组中,如果没有返回值,就忽略
reduce实现filter
Array.prototype._filter = function (callback) {
if(typeof callback === 'function') {
return this.reduce((prev,item,index,arr) => {
callback(item, index, arr) ? prev.push(item) : null
return prev
}, [])
} else {
console.log(new Error('callback is not function'))
}
}
let val = [1, 5, 6]._filter(item => item > 2)
console.log(val); // [5, 6]
复制代码
求最大值/最小值
let arr = [1, 2, 3, 4, 5]
console.log(arr.reduce((prev, cur) => Math.max(prev, cur))); // 5
console.log(arr.reduce((prev, cur) => Math.min(prev, cur))); // 1
复制代码
数组去重
let arr = [1, 2, 3, 1, 1, 2, 3, 3, 4, 3, 4, 5]
let result = arr.reduce((prev, item, index, arr) => {
!prev.includes(item) && prev.push(item);
return prev
}, [])
console.log(result); //[1, 2, 3, 4, 5]
复制代码
数组扁平化
let arr = [1, 2, '3js', [4, 5, [6], [7, 8, [9, 10, 11], null, 'abc'], {age: 58}, [13, 14]], '[]', null];
function f(arr) {
if(Array.isArray(arr)) {
return arr.reduce((prev, item) => {
return Array.isArray(item) ? prev.concat(f(item)) : prev.concat(item)
}, [])
} else {
throw new Error("arr + ' is not array'")
}
}
复制代码
结果:
作者:nanfeiyan
链接:https://juejin.im/post/5cc80c6e6fb9a0324936c0d9
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
相关文章
- Google Earth Engine(GEE)——两种方式进行数据的遍历map和iterate的使用
- JSON数组形式字符串转换为Map数组(转为其他的Bean的话,请参考自行变形)
- map vs hash_map
- javascript中数组的map方法
- [转]jdk8中map新增的merge方法
- [转] golang中struct、json、map互相转化
- Map和Reduce函数
- jquery---调用静态方法-each--map-数组与伪数组的差别
- 结构体为下标(map实现)
- flutter开发之必须掌握的dart知识点:list,set,map
- 深入理解ES6读书笔记6:Set和Map
- Java中的集合总结List,Set,Vector,Map,HashMap等(包含底层源码分析)
- 原生js源码之Array数组map方法