Skip to main content

数组使用reduce实现数组扁平化、map、filter、去重

本来是要实现一个数组扁平化的,结果搜到一篇博客有reduce实现的方法,也使用reduce实现了map、filter、数组去重这些方法,在这里复现一下。#


数组扁平化#

给出如下数组:
var arr = [1,[2,[3,[4]]]], 输入的数组可能是数组中嵌套数组,经过扁平化之后希望得到一维数组。[1,2,3,4].

使用递归来实现#

function flatten(arr) {  var result = [];  for(let i=0; i<arr.length; i++) {    if(Array.isArray(arr[i])) {      result = result.concat(flatten(arr[i]));    } else {      result.push(arr[i]);    }  }  return result;}

使用reduce来实现#

Array.prototype.flatten = function() {  return this.reduce( (pre, item, index, arr)=> {    return pre.concat(Array.isArray(item)? item.flatten() : item);  }, [])}var arr = [1,[2,[3,[4,[5]]]]];arr.flatten();  //[1,2,3,4,5]

reduce是Array原型中的一个内置函数。需要两个参数:函数和初始值。reduce函数可以做一个累加器,对数组中的数据逐个进行操作,最后累积的操作在传入的对象中。


使用reduce实现map方法#

map方法是Array的原型的内置方法,此方法需要传入一个函数,map会对数组内的所以元素执行该函数。

Array.prototype._map = function(callback) {  if(typeof callback === 'function') {    return this.reduce( (pre, item, index, arr) => {      pre.push(callback(item, index, arr));      return pre;    }, [])  } else {    throw new Error("callback is not a function")  }}
var arr = [1,2,3,4];arr._map((num)=>num+1)  // [2,3,4,5]

切记!使用reduce时,函数必须有return,作为下一次迭代的pre
因为map方法的迭代的函数传入的三个参数依次是 当前项内容、索引、数组。与reduce的后三个一样,所以可以使用reduce来实现。


使用reduce实现filter方法#

实现filter方法与map类似,filter也是需要传入一个函数,遍历数组的元素,函数的返回值类型是布尔值,为true则留下当前项,为false则舍弃当前项。起到一个筛选的作用。

Array.prototype._filter = function(callback) {  if(typeof callback === 'function') {    return this.reduce( (pre, item, index, arr)=> {      callback(item, index, arr)? pre.push(item) : null;      return pre;    }, []);  } else {    throw new Error('callback is not a function')  }}var arr = [1,2,3,4];arr._filter( (num)=> num>2);  // [3,4]

数组去重#

数组去重也可以使用reduce来实现。因为有累积的效果,遍历的时候进行处理,如果已经存在就不放进去。

Array.prototype.unique = function() {  return this.reduce( (pre, item) => {    pre.includes(item)? null: pre.push(item);    return pre;  }, [])}
var arr = [1,2,3,4,3,2,1];arr.unique(); //[1,2,3,4]

总结#

以上就是reduce的一些用法,核心就是可以在使用相应的函数迭代数组中的元素时,可以记录(是在不知道怎么用词了,累积?)对象,将对象保存起来。函数中return的值就是下一次迭代的pre的值。
另外一点需要注意,这些方法全都不是在原来的数组中操作,都是返回了一个新的数组对象。(实际上就是reduce方法的第二个参数传入的那个对象,[])

2019.12.15
written by LRQ 对了,我有英文名了: Rain