JS 数组对象的筛选、去重、排序

• 需求：        

项目需要对一下数组对象中的部分字符串进行截取，并且需要去重复的内容，最后再讲字符串进行排序

• 项目效果

原数据格式：

 const list=[
              {time:'2023-04-06',name:'1数据',val:'A'},
              {time:'2023-04-07',name:'1数据',val:'A'},
              {time:'2023-04-08',name:'6数据',val:'A'},
              {time:'2023-04-09',name:'4数据',val:'A'},
              {time:'2023-04-10',name:'5数据',val:'A'},
              {time:'2023-04-11',name:'2数据',val:'A'},
              {time:'2023-04-12',name:'3数据',val:'A'},
            ]

目标数据格式:

 const listObj=[
              {name:'1数据',value:'1数据'},
              {name:'2数据',value:'2数据'},
              {name:'3数据',value:'3数据'},
              {name:'4数据',value:'4数据'},
              {name:'5数据',value:'5数据'},
              {name:'6数据',value:'6数据'},
            
            ]

• 解决过程

  1.我们只需要name的值，因此先进行对象截取

  ​ 对象截取，这里使用Object.assign()

let listName = list.map(item => {
  return Object.assign({},{
    name:item.name,
    value:item.name

}

console.log 打印 listName

[
  {name:'1数据', value:'1数据'},
  {name:'1数据', value:'1数据'},
  {name:'6数据', value:'6数据'},
  {name:'6数据', value:'6数据'},
  {name:'4数据', value:'4数据'},
  {name:'5数据', value:'5数据'},
  {name:'2数据', value:'2数据'},
  {name:'3数据', value:'3数据'},
  
]

2.得到了目标数据的格式，这一步对listName进行去重

// 去重
let obj = {}
listName=listName.reduce((a,b)=>{
  obj[b.name] ? "" :(obj[b.name]=true && a.push(b));
    return a
},[])

打印 listName 看看

[
  {name:'1数据', value:'1数据'},
  {name:'6数据', value:'6数据'},
  {name:'4数据', value:'4数据'},
  {name:'5数据', value:'5数据'},
  {name:'2数据', value:'2数据'},
  {name:'3数据', value:'3数据'},
  
]

已经没有重复的对象了

3.最后，给 listName 排序，使用sort()

根据设备号前面的数字进行排序

// 排序
listName = listName.sort((a,b)=>{
  return a.name.slice(0,1) - b.name.slice(0,1)
})

最后，来打印listName看一看

[
  {name:'1数据', value:'1数据'},
  {name:'2数据', value:'2数据'},
  {name:'3数据', value:'3数据'},
  {name:'4数据', value:'4数据'},
  {name:'5数据', value:'5数据'},
  {name:'6数据', value:'6数据'},
]

最后附上所有代码：

const list = [{
    time: '2023-04-06',
    name: '1数据',
    val: 'A'
  },
  {
    time: '2023-04-07',
    name: '1数据',
    val: 'A'
  },
  {
    time: '2023-04-08',
    name: '6数据',
    val: 'A'
  },
  {
    time: '2023-04-08',
    name: '6数据',
    val: 'A'
  },
  {
    time: '2023-04-09',
    name: '4数据',
    val: 'A'
  },
  {
    time: '2023-04-10',
    name: '5数据',
    val: 'A'
  },
  {
    time: '2023-04-11',
    name: '2数据',
    val: 'A'
  },
  {
    time: '2023-04-12',
    name: '3数据',
    val: 'A'
  }
]

// 获取name属性，并创建为对应格式
let listName = list.map(item => {
  return Object.assign({}, {
    name: item.name,
    value: item.name
  })
})
console.log('筛选：', listName);

// 去重
let obj = {}
listName = listName.reduce((a, b) => {
  obj[b.name] ? "" : (obj[b.name] = true && a.push(b));
  return a
}, [])
console.log('去重：', listName);

// 排序
listName = listName.sort((a, b) => {
  return a.name.slice(0, 1) - b.name.slice(0, 1)
})

console.log('排序：', listName)