reduce实现filter,map 数组扁平化等

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
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
您好,针对您的问题,我理解的意思是您想在 Vue 中将一个包含父子级关系的数据列表中的数据按照某个字段分成不同的数组,是这样吗? 如果是这样的话,您可以使用递归函数和数组的 reduce 方法来实现。具体步骤如下: 1. 定义一个递归函数,用于将所有的子项提取出来,返回一个扁平化的数组。 2. 在模板中使用计算属性,调用递归函数将数据扁平化,并按照字段分成不同的数组,返回一个包含所有子集的数组。 具体代码如下: ```html <template> <div> <div v-for="(subData, index) in subDataSet" :key="index"> <h3>{{ subData.field }}</h3> <ul> <li v-for="(item, itemIndex) in subData.items" :key="itemIndex"> {{ item.name }} </li> </ul> </div> </div> </template> <script> export default { data() { return { data: [ { name: "item1", field: "a", children: [ { name: "item2", field: "b" } ] }, { name: "item3", field: "a", children: [ { name: "item4", field: "c" } ] }, { name: "item5", field: "b", children: [ { name: "item6", field: "a" } ] } ] }; }, computed: { subDataSet() { const flatData = this.flatten(this.data); const fieldSet = new Set(flatData.map(item => item.field)); const subDataSet = []; fieldSet.forEach(field => { const subData = { field: field, items: flatData.filter(item => item.field === field) }; subDataSet.push(subData); }); return subDataSet; } }, methods: { flatten(data) { return data.reduce((result, item) => { result.push(item); if (item.children) { result = result.concat(this.flatten(item.children)); } return result; }, []); } } }; </script> ``` 在这个示例中,我们使用了一个名为 flatten 的递归函数,用于将所有的子项提取出来,返回一个扁平化的数组。然后在计算属性 subDataSet 中,我们将数据扁平化,按照字段分成不同的数组。每个子集包含一个标题和一个包含所有数据的 ul 元素,我们使用嵌套的 v-for 指令遍历每个子集中的数据,分别渲染每个数据项。 希望这个回答可以帮助到您,如果您有任何疑问或者需要进一步帮助,请随时提出。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值