通过对象属性javascript映射两个等效长度的数组答案

【问题标题】：mapping two arrays of equivalent length by object attributes javascript [duplicate]通过对象属性javascript映射两个等效长度的数组
【发布时间】：2021-08-16 19:40:04
【问题描述】：

我有两个数组：

数组 1：

[
    {
        name: 'Bob',
        traits: {
            id: 1
        }
    }, {
        name: 'Karl',
        traits: {
            id: 2
        }
    }, {
        name: 'Joseph',
        traits: {
            id: 3
        }
    }
]

数组 2：

[
    {
        name: 'Karl',
        user_id: 2,
        dog: 'Rottweiler'
    }, {
        name: 'Joseph',
        user_id: 3,
        dog: 'Poodle'
    }, {
        name: 'Bob',
        user_id: 1,
        dog: 'Puppy'
    }
]

期望的结果：

我希望能够通过查找 user_id 与 id 匹配的元素然后将对象添加到数组来将第二个数组合并到第一个数组中。

例如：

数组 1 对象

{
    name: 'Bob',
    traits: {
        id: 1
    }
}

由于 id 与 array 2 obj 匹配 user_id:

{
    name: 'Bob',
    user_id: 1,
    dog: 'Puppy'
}

最终结果将是：

{
    name: 'Bob',
    traits: {
        name: 'Bob',
        user_id: 1,
        dog: 'Puppy'
    }
}

【问题讨论】：

标签： javascript arrays object jsobject

【解决方案1】：

let a = [
    {
        name: 'Bob',
        traits: {
            id: 1
        }
    }, {
        name: 'Karl',
        traits: {
            id: 2
        }
    }, {
        name: 'Joseph',
        traits: {
            id: 3
        }
    }
    ];

    let b = [
        {
            name: 'Karl',
            user_id: 2,
            dog: 'Rottweiler'
        }, {
            name: 'Joseph',
            user_id: 3,
            dog: 'Poodle'
        }, {
            name: 'Bob',
            user_id: 1,
            dog: 'Puppy'
        }
    ];
    
    a.map(aobj =>{
    let sameIdObj = b.find( bobj => bobj.user_id === aobj.traits.id )
    sameIdObj && (aobj.traits =  sameIdObj)
    })

    console.log(a);

【讨论】：

【解决方案2】：

arr2.forEach((obj) => {
    const idx = arr1.findIndex((o) => o.traits.id === obj.user_id);
    if (idx !== -1) {
        arr1[idx] = { ...arr1[idx], traits: { ...obj } }
    }
})

console.log(arr1[0]) // { name: 'Bob', traits: { name: 'Bob', user_id: 1, dog: 'Puppy' } }

【讨论】：

【解决方案3】：

您可以使用map 和find 轻松实现此结果。只需映射第一个数组并在arr2 中找到带有obj.traits.id 的元素。然后返回想要的结果。

const arr1 = [
  {
    name: "Bob",
    traits: {
      id: 1,
    },
  },
  {
    name: "Karl",
    traits: {
      id: 2,
    },
  },
  {
    name: "Joseph",
    traits: {
      id: 3,
    },
  },
];

const arr2 = [
  {
    name: "Karl",
    user_id: 2,
    dog: "Rottweiler",
  },
  {
    name: "Joseph",
    user_id: 3,
    dog: "Poodle",
  },
  {
    name: "Bob",
    user_id: 1,
    dog: "Puppy",
  },
];

const result = arr1.map((obj) => {
  const { name, traits } = obj;
  const isExist = arr2.find((o) => o.user_id === traits.id);
  if (isExist) {
    return { name, traits: { ...isExist } };
  }
  return obj;
});

console.log(result);

【讨论】：

【解决方案4】：

把第二个数组变成一个以user_id为key的map，然后迭代第一个数组。在地图中找到对应的对象，并将匹配的对象值传播到traits属性中：

let arr1 = [{name: 'Bob',traits: {id: 1}},{name: 'Karl',traits: {id: 2}},{name: 'Joseph',traits: {id: 3}}];
let arr2 = [{name: 'Karl', user_id: 2,dog: 'Rottweiler'},{name: 'Joseph', user_id: 3,dog: 'Poodle'},{name: 'Bob',user_id: 1,dog: 'Puppy'}];

let map = new Map(arr2.map(item => [item.user_id, item]));

let result = arr1.map(item => {
    let traits = map.get(item.traits.id);
    return traits ? { ...item, traits} : item;
});

console.log(result);

由于在映射中查找的平均时间复杂度为 O(1)，因此这比在每次迭代中查找数组中的键更有效（例如调用 find）。

【讨论】：