乐趣区

关于javascript:前端面试题之格式化数组

jiezi

题目如下：
将数组 

[{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…
也心愿能有更多同好能够留言进行技术交换，咱们共同进步！

退出移动版