前端面试题之格式化数组

题目如下:
将数组

[{ name: '1', type: 0 }, 
 { name: '2', type: 0 }, 
 { name: '3', type: 2 }, 
 { name: '6', type: 3 }, 
 { name: '4', type: 2 }, 
 { name: '5', type: 3 }
];
转换为
[
{type:0,values:[{name:'1',type:0},{name:'2',type:0}]},
{type:2,values:[{name:'3',type:2},{name:'3',type:2}]},
{type:3,values:[{name:'5',type:3},{name:'6',type:3}]},
]
的形式

Answer:
暂时写两种:
1、利用对象key的唯一性(复杂处理)

const oldArray = [
            { name: '1', type: 0 },
            { name: '2', type: 0 },
            { name: '3', type: 2 },
            { name: '6', type: 3 },
            { name: '4', type: 2 },
            { name: '5', type: 3 },
        ];
        const obj = {};
        const processArr = oldArray.forEach(item => {
            if (!obj[item.type]) {
                obj[item.type] = [item];
            }
            else {
                obj[item.type] = obj[item.type].concat(item);
                这里如果是赋值形式的就不要用push,他会改变原数组。所以此处用concat;
                想用push可以直接写成: obj[item.type].push(item)
            }
        }
        );
        console.log('obj>>>', obj);
        再对obj做处理即可获得所求

分析: 这道面试题主要是根据type分类处理,首先要把数组里重复的化为唯一的,想到这里就可以利用对象key 的唯一性进行处理,又因为目标数组的values是需要原来的type往里塞,所以可以用数组方法对对象key对应的value进行填充。最后获取到处理后的对象后续操作就简单了。
2、利用Set方法进行去重(简单方法)

const oldArray = [
            { name: '1', type: 0 },
            { name: '2', type: 0 },
            { name: '3', type: 2 },
            { name: '6', type: 3 },
            { name: '4', type: 2 },
            { name: '5', type: 3 },
        ];
const handledArr=[...new Set(oldArray.map(item=>item.type)].map(_item=>({type:_item,values:oldArray.filter(__item=>__item===_item)
  })
  )

用这种方法很简洁,但是思路和上面对象key的唯一性是一样的。 首先要把type化为唯一,引入Set化为类数组,再根据展开运算符处理为真正的数组。再根据数组map方法对此进行处理,把数组的每一项格式化为目标数组;针对values的处理就是使用数组的filter方法进行筛选原数组返回我们需要的type类型。
总结:这道面试题覆盖到了数组的多种方法:filter、concat、push、map,有小伙伴想了解数组的其他以及类数组可以阅读我另一篇文章:https://segmentfault.com/a/11...
也希望能有更多同好可以留言进行技术交流,我们共同进步!

你可能感兴趣的:(前端面试题之格式化数组)