js数据筛选、去重、分类

珊珊而川

已于 2024-02-25 17:59:42 修改

阅读量280

点赞数 1

文章标签： javascript 前端开发语言

于 2024-02-21 14:48:16 首次发布

本文链接：https://blog.csdn.net/weixin_63681863/article/details/136211085

版权

数据描述

 const list = [
    { id: 1, name: '大连1', year: 2023 },
    { id: 2, name: '大连2', year: 2025 },
    { id: 3, name: '大连3', year: 2023 },
    { id: 4, name: '大连4', year: 2027 },
    { id: 5, name: '大连5', year: 2023 },
    { id: 6, name: '大连6', year: 2023 },
    { id: 7, name: '大连路', year: 2023 }
  ]

需求1：筛选出现的年份

 const result = new Set(list.map((item) => item.year))
 
 console.log('result', result)

结果：
在这里插入图片描述
进一步优化，改成数组形式：

const result = [...new Set(list.map((item) => item.year))]

在这里插入图片描述

需求2：筛选出各年份的第一条数据

在这里插入图片描述

法一 reduce+includes

 let yearsList = []

  const uniquList = list.reduce((pre, item) => {
    if (!yearsList.includes(item.year)) {
      pre.push(item)
      yearsList.push(item.year)
    }
    return pre
  }, [])
  console.log('uniquList', uniquList)

法2 forEach+some

在这里插入图片描述

  let uniquList = []
  list.forEach((item) => {
    if (!uniquList.some((itemCon) => itemCon.year === item.year)) {
      uniquList.push(item)
    }
  })
  console.log('uniquList', uniquList)

法3 reduce+find

  const result = list.reduce((pre, item) => {
    if (!pre.find((itemCon) => itemCon.year === item.year)) {
      // if (!pre.some((itemCon) => itemCon.year === item.year)) {
      //   yearList.push(item.year)
      pre.push(item)
    }
    return pre
  }, [])
  console.log('result', result)

需求3：按照年份分类

在这里插入图片描述

法一 reduce + includes

 let yearsList = []
  const uniquList = list.reduce((pre, item) => {
    if (!yearsList.includes(item.year)) {
      pre[item.year] = [{ item }]
      yearsList.push(item.year)
    } else {
      pre[item.year].push(item)
    }
    return pre
  }, {})

法2 forEach+includes

// 用上面的some方法也可以实现

 let yearsList = []
  let result = {}
  list.forEach((item) => {
    if (!yearsList.includes(item.year)) {
      result[item.year] = [{ item }]
      yearsList.push(item.year)
    } else {
      result[item.year].push(item)
    }
  })

法3 reduce+in

in 操作符用于检查对象中是否存在指定的属性

  const uniquList = list.reduce((pre, item) => {
    if (item.year in pre) {
      pre[item.year].push(item)
    } else {
      //   pre[item.year].push(item)  不能这么写
      pre[item.year] = [{ item }]
    }
    return pre
  }, {})
  console.log('uniquList', uniquList)