如何使用对象中的键比较 JavaScript 中的两个对象数组答案

【问题标题】：How to compare two arrays of objects in JavaScript using a key in object如何使用对象中的键比较 JavaScript 中的两个对象数组
【发布时间】：2020-07-20 07:11:18
【问题描述】：

如何使用对象中的键比较 JavaScript 中的两个对象数组。我有两个这样的结果集。有可能在 JavaScript 中做这样的事情吗？还是 Lodash？

    // Array 1
        [
            { Id: "0", display: "Jamsheer 1" },
            { Id: "3", display: "Muhammed 1" },
        ]
    
    // Array 2
        [
            { Id: "0", display: "Jamsheer" },
            { Id: "1", display: "Muhammed" },
            { Id: "2", display: "Ravi" },
            { Id: "3", display: "Ajmal" },
            { Id: "4", display: "Ryan" }
        ]
    
    
    The final result I need is - same id in array 2 should be replaced with corresponding id in array 1 – the final result should be like this:
    
    [
            { Id: "0", display: "Jamsheer 1" },
            { Id: "1", display: "Muhammed" },
            { Id: "2", display: "Ravi" },
            { Id: "3", display: "Ajmal 1" },
            { Id: "4", display: "Ryan" }
        ]

【问题讨论】：

在你的最终结果中，你的倒数第二个对象不应该是：{ Id: "3", display: "Muhammed 1" }，因为数组 1 有一个 id 为 3 的对象并显示为 "Muhammed 1"？

标签： javascript arrays object lodash

【解决方案1】：

您可以从您的 arr1 创建一个 Map，它由对象 Ids 键入，并将每个对象的显示存储为其值。地图将具有以下形状：

{
  "0" => "Jamsheer 1"
  "3" => "Muhammed 1"
}

然后，您可以在 arr2 上使用 .map() 来更改给定对象的显示属性，如果其 Id 出现在您制作的地图中。如果确实出现了Id，则从地图中获取值并将其用作显示，如果它不使用对象的原始显示值。

请看下面的例子：

const arr1 = [{ Id: "0", display: "Jamsheer 1" }, { Id: "3", display: "Muhammed 1" },];
const arr2 = [{ Id: "0", display: "Jamsheer" }, { Id: "1", display: "Muhammed" }, { Id: "2", display: "Ravi" }, { Id: "3", display: "Ajmal" }, { Id: "4", display: "Ryan" }];

const arr1Map = new Map(arr1.map(o => [o.Id, o.display]));
const res = arr2.map(({Id, display}) => ({
  Id,
  display: arr1Map.get(Id) || display
}));
console.log(res);

.as-console-wrapper { max-height: 100% !important; top: 0; } /* ignore */

如果您有除 display 之外的其他属性，则可以将对象存储在地图中：

const arr1 = [{ Id: "0", display: "Jamsheer 1", foo: 1, bar:2 }, { Id: "3", display: "Muhammed 1", baz: 3 },];
const arr2 = [{ Id: "0", display: "Jamsheer" }, { Id: "1", display: "Muhammed" }, { Id: "2", display: "Ravi" }, { Id: "3", display: "Ajmal" }, { Id: "4", display: "Ryan" }];

const arr1Map = new Map(arr1.map(o => [o.Id, o]));
const res = arr2.map(o => arr1Map.get(o.Id) || o);
console.log(res);

.as-console-wrapper { max-height: 100% !important; top: 0; } /* ignore */

【讨论】：

【解决方案2】：

试试这个

  var arr1 = [
            { Id: "0", display: "Jamsheer 1" },
            { Id: "3", display: "Muhammed 1" },
        ]
    var arr2 =
   
        [
            { Id: "0", display: "Jamsheer" },
            { Id: "1", display: "Muhammed" },
            { Id: "2", display: "Ravi" },
            { Id: "3", display: "Ajmal" },
            { Id: "4", display: "Ryan" }
        ]
    
    


function comparer(otherArray){
        return function (current) {
            return otherArray.filter(function(other) {
                return other.Id === current.Id
            }).length===0;
        }
    }


var compArray = arr2.filter(comparer(arr1));
compArray.map(i=> arr2.push(i));
console.log(arr2);

您可以在lodash 上使用_.concat() 和_.unionWith() 函数

var array = [1];
var other = _.concat(array, 2, [3], [[4]]);
 
console.log(other);
// => [1, 2, 3, [4]]
 
console.log(array);
// => [1]


var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }];
var others = [{ 'x': 1, 'y': 1 }, { 'x': 1, 'y': 2 }];
 
_.unionWith(objects, others, _.isEqual);
// => [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }, { 'x': 1, 'y': 1 }]

【讨论】：