如何合并并从ES6中的对象返回新数组

时间:2019-03-25 07:01:18

标签: javascript ecmascript-6 ecmascript-7

假设有两个对象。

const a = [
  { id: '1-1-1', name: 'a111' },
  { id: '1-1-2', name: 'a112' },
  { id: '1-2-1', name: 'a121' },
  { id: '1-2-2', name: 'a122' },
  { id: '2-1-1', name: 'a211' },
  { id: '2-1-2', name: 'a212' }
]
const b = ['1-1', '1-2', '2-1']

和结果

  {

      '1-1':[
        { id: '1-1-1', name: 'a111' },
        { id: '1-1-2', name: 'a112' },
      ],
      '1-2':[
          { id: '1-2-1', name: 'a121' },
          { id: '1-2-2', name: 'a122' },
      ],
      '2-1':[
        { id: '2-1-1', name: 'a211' },
        { id: '2-1-2', name: 'a212' },
      ]
    }

基本上,我想对数据进行分组。

我使用includes检查b中的项目是否与a中的ID相匹配。然后构造新的数组。

这是我的尝试(fiddle):

return b.map(item => a.map(jtem => {
  if(jtem.id.includes(item)){
    return {
      [item]: jtem
    }
  }
}))

无论如何,它不起作用。

,还有一种聪明的方法来避免嵌套的for循环或map函数吗?

1 个答案:

答案 0 :(得分:13)

您可以按照以下步骤进行操作:

  • 在阵列reduce()上应用b

  • 在每次迭代期间,在数组filter()上使用a

  • 使用String.prototype.startsWith(),从a中以b开头的所有项目中获取所有项目。
  • 最后将其设置为ac的属性并返回ac

const a = [
  { id: '1-1-1', name: 'a111' },
  { id: '1-1-2', name: 'a112' },
  { id: '1-2-1', name: 'a121' },
  { id: '1-2-2', name: 'a122' },
  { id: '2-1-1', name: 'a211' },
  { id: '2-1-2', name: 'a212' }
]
const b = ['1-1', '1-2', '2-1']

let res = b.reduce((ac,b) => {
  
  ac[b] = a.filter(x => x.id.startsWith(b));
  return ac;

},{})
console.log(res)

如@Falco所建议的那样,评论是最好将a扫描一次。所以这里是那个版本。实际上它在性能方面更好

const a = [
  { id: '1-1-1', name: 'a111' },
  { id: '1-1-2', name: 'a112' },
  { id: '1-2-1', name: 'a121' },
  { id: '1-2-2', name: 'a122' },
  { id: '2-1-1', name: 'a211' },
  { id: '2-1-2', name: 'a212' }
]
const b = ['1-1', '1-2', '2-1']


let res = a.reduce((ac,x) => {
  let temp = b.find(y => x.id.startsWith(y))
  if(!ac[temp]) ac[temp] = [];
  ac[temp].push(x);
  return ac;
},{})

console.log(res)

注意:IE不支持startsWith。因此,您可以使用indexOf

创建polyfill

if(!String.prototype.startWith){
  String.prototype.startsWith = function(str){
    return this.indexOf(str) === 0
  }
}