javascript - 合并和重新排序两个对象数组的问题

Question

我正在尝试找出如何合并两个对象数组。这是我需要做的:

• field属性是每个对象的唯一标识符
• 输出只需包含 originalArray 中列出的对象，包括 originalArray 中 localStorageArray 中不存在的对象
• 需要保持localStorageArray的顺序，注意前面的要求(顺序应该是:bar, bee, foo, baz)
• 输出需要包含 localStorageArray 中的以下属性值:hidden 和 width(field 是给定的-in，因为它是标识符)
• originalArray 的所有其他属性都需要在输出中维护

这是我的怪癖:

var outputArray = [];

localStorageArray.forEach(function(localItem){
    originalArray.forEach(function(originalItem){
        if(originalItem.field === localItem.field){
            var item = JSON.parse(JSON.stringify(originalItem));
            item.hidden = localItem.hidden;
            item.width = localItem.width;
            outputArray.push(item);
        }
    });
});

Full JS Fiddle

我能够获得正确的排序和正确的属性，但我遇到的一个问题是，当 originalArray 中存在一个在 localStorageArray 中不存在的对象时>，该对象未包含在 outputArray 中。

对我的解决方案有什么建议吗？

这是我的数组:

var originalArray = [
    {field: "foo", hidden: true, sortable: false, template: "<div>#=text#</div>", width: "20px", propA: "a", propB: "b"},
    {field: "bee", hidden: true, sortable: false, template: "=#text#", int: 4},
    {field: "bar", hidden: false, sortable: false, template: "", width: "20%", propC: "C"},
    {field: "baz", hidden: false, sortable: true, template: "<span>#=text#</span>", int: 3}
];

var localStorageArray = [
    {field: "bar", hidden: false, sortable: false, width: "100px"},
    {field: "foo", hidden: true, sortable: false, template: "<div>#=text#</div>", width: "40px"},
    {field: "boo", hidden: true, sortable: true, template: "<div>Boo: #=text#</div>", width: "200px"},
    {field: "baz", hidden: true, template: "baz:#=text#", width: "20px"}
];

这是我想要的输出:

var desiredArray =  [
   {field: "bar", hidden: false, sortable: false, template: "", width: "100px", propC: "C"},
   {field: "bee", hidden: true, sortable: false, template: "=#text#", int: 4},
   {field: "foo", hidden: true, sortable: false, template: "<div>#=text#</div>", width: "40px", propA: "a", propB: "b"},
   {field: "baz", hidden: true, sortable: true, template: "<span>#=text#</span>", width: "20px", int: 3}
]

Answer 1

如果我理解正确的话，您想要覆盖 originalArray 中也存在于 中的那些对象的 hidden 和 width 属性>localStorageArray(如果 field 属性相同，则认为 2 个对象相同)

    (function () {
    var fieldArray = localStorageArray.map(function(e) { return e.field; });
    originalArray.forEach(function(originalItem) {
      var index = fieldArray.indexOf(originalItem.field);
      var localItem; 
      if(index !== -1) {
        //it's also in localStorage, overwrite 
        localItem = localStorageArray[index];
        originalItem.hidden = localItem.hidden || originalItem.hidden;
        originalItem.width = localItem.width || originalItem.width;
        outputArray.push(originalItem);
      }
    })();

您还可以循环遍历 localStorageArray 并比较 field 属性，而不是创建额外的数组