实现按属性分类

在项目中，有时候后后端给的数据是繁杂无序的，所以前端需要分类

比如这样的数据：

let arrs = [
	{name:'javascript',type:'前端'},
	{name:'html5',type:'前端'},
	{name:'css3',type:'前端'},
	{name:'Vue.js',type:'前端'},
	{name:'java',type:'后端'},
	{name:'php',type:'后端'},
	{name:'python',type:'后端'},
	{name:'photoshop',type:'UI'},
	{name:'illustrator',type:'UI'},
	{name:'indesign',type:'UI'},
	{name:'CAD',type:'UI'}
]

第一种方法：使用reduce方法进行分类

 function classify(arr) {
    let groups = arr.reduce((temp, item) => {
        let newKey = item['type'];
        if (!temp[newKey]) {
            temp[newKey] = []
        }
        temp[newKey].push(item)
        return temp;
    }, [])
    return groups;
}
let arrData = classify(arrs);
console.log(arrData)

打印结果为：

[前端: Array(4), 后端: Array(3), UI: Array(4)]
UI: (4) [{…}, {…}, {…}, {…}]
前端: (4) [{…}, {…}, {…}, {…}]
后端: (3) [{…}, {…}, {…}]
length: 0
[[Prototype]]: Array(0)

如果将reduce方法中callback后的[]改为{}，那么结果就会变成：

{前端: Array(4), 后端: Array(3), UI: Array(4)}
UI: (4) [{…}, {…}, {…}, {…}]
前端: (4) [{…}, {…}, {…}, {…}]
后端: (3) [{…}, {…}, {…}]
[[Prototype]]: Object

如果想要在结果中添加一些字段，可以这样做：

function classify(arr) {
    let groups = arr.reduce((temp, item) => {
        let newKey = item['type'];
        if (!temp[newKey]) {
            temp[newKey] = {
         +   	isShow:true,
         +  	children:[]
            }
        }
     +  temp[newKey].children.push(item)
        return temp;
    }, {})
    return groups;
}
let arrData = classify(arrs);
console.log(arrData)

打印结果为：

{前端: {…}, 后端: {…}, UI: {…}}
UI: {isShow: true, children: Array(4)}
前端: {isShow: true, children: Array(4)}
后端: {isShow: true, children: Array(3)}
[[Prototype]]: Object

这样就在Vue项目中就可以使用v-for循环对象了

第二种方法：使用hasOwnProperty方法

hasOwnProperty() 方法会返回一个布尔值，指示对象自身属性中是否具有指定的属性（也就是，是否有指定的键）。

function classify(dataList) {
    let totalArray = {};
    dataList.map((item) => {
        if (totalArray.hasOwnProperty(item.type)) {
            totalArray[item.type].children.push(item);
            // 注意map内不能使用break或者continue跳出循环
            return true;
        }
        totalArray[item.type] = {
            isShowing: true,
            children: [item]
        };
    })
    return totalArray;
}
let arrData = classify(arrs);
console.log(arrData)

打印结果为：

{前端: {…}, 后端: {…}, UI: {…}}
UI: {isShowing: true, children: Array(4)}
前端: {isShowing: true, children: Array(4)}
后端: {isShowing: true, children: Array(3)}
[[Prototype]]: Object

遇见的问题,做个笔记