前端小技巧之 --- 【对象数组分类并排序】
当前需求是:把下面的数组,按照index值分类,再按照字母顺序排序
export const singerList=[{ id:0, index:'Z', name:'周杰伦' },{ id:1, index:'X', name:'薛之谦' },{ id:2, index:'C', name:'蔡依林' },{ id:3, index:'D', name:'邓紫棋' },{ id:4, index:'J', name:'金志文' },{ id:5, index:'Z', name:'周深' },{ id:6, index:'C', name:'陈奕迅' },{ id:7, index:'Z', name:'张学友' },{ id:8, index:'L', name:'刘德华' },{ id:9, index:'M', name:'毛不易' },{ id:10, index:'W', name:'王菲' },{ id:11, index:'Z', name:'张韶涵' },]
(1)先分类
normalList() { let list = singerList; let map = {}; list.forEach((item, idx) => { let key = item.index; //如果map里不存在当前的index,则添加属性,并初始化 if (!map[key]) { map[key] = { title: key, items: [], }; } // 在当前属性的items里添加需要的项 map[key].items.push({ id: item.id, name: item.name }); }); return map },
结果为:
(2)把map对象转成有序数组
let result=[] // 把map对象转为数组 for(let key in map){ result.push(map[key]) }
(3)依据字母排序:
// 排序 result.sort((a,b)=>{ return a.title.charCodeAt(0)-b.title.charCodeAt(0) })
(4)总的代码
<template> <div> <h1>歌手</h1> </div> </template> <script> import { singerList } from "api/singer"; export default { data() { return {}; }, mounted() { console.log("歌手列表--分类后:--【数组--排序后】", this.normalList()); }, methods: { normalList() { let list = singerList; let map = {}; list.forEach((item, idx) => { let key = item.index; //分类【A\B\C\D...】 //如果map里不存在当前的index,则添加属性,并初始化 if (!map[key]) { map[key] = { title: key, //标记每个分类【A\B\C\D...】 items: [], //每个分类的数据项 }; } // 在当前属性的items里添加需要的项 map[key].items.push({ id: item.id, name: item.name, }); }); // 把map对象转为数组 let result = []; for (let key in map) { result.push(map[key]); } // 排序 result.sort((a, b) => { return a.title.charCodeAt(0) - b.title.charCodeAt(0); }); return result; }, }, }; </script>