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

7次阅读

共计 1402 个字符,预计需要花费 4 分钟才能阅读完成。

题目如下:
将数组

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

正文完
 0