Javascript 合并和重新排序两个对象数组时出现问题

我想知道如何合并两个对象数组。以下是我需要做的：

• 字段

  属性是每个对象的唯一标识符
• 输出只需要在

  originalArray

  中列出对象，包括

  originalArray

  中不存在于

  localStorageArray

• 需要维护

  localStorageArray

  的顺序，并注意之前的要求（顺序应为：

  bar

  ，

  bee

  ，

  foo

  ，

  baz

  ）
• 输出需要包含来自

  localStorageArray

  的以下属性值：

  hidden

  和

  width

  （

  字段

  是一个让步，因为它是标识符）
• 需要在输出中维护

  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);
        }
    });
});

我能够获得正确的顺序和正确的属性，但我遇到的一个问题是，当

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 originalArray=[
{字段：“foo”，隐藏：true，可排序：false，模板：“#=text#”，宽度：“20px”，propA:“a”，propB:“b”}，
{字段：“蜜蜂”，隐藏：真，可排序：假，模板：=#文本#”，int:4}，
{字段：“条”，隐藏：假，可排序：假，模板：，宽度：“20%”，属性：“C”}，
{字段：“baz”，隐藏：false，可排序：true，模板：“#=text#”，int:3}
];
var localStorageArray=[
{字段：“bar”，隐藏：false，可排序：false，宽度：“100px”}，
{字段：“foo”，隐藏：true，可排序：false，模板：“#=text#”，宽度：“40px”}，
{字段：“boo”，隐藏：true，可排序：true，模板：“boo:#=text#”，宽度：“200px”}，
{字段：“baz”，隐藏：true，模板：“baz:#=text#”，宽度：“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}
]

var desiredaray=[
{字段：“条”，隐藏：假，可排序：假，模板：，宽度：“100px”，属性：“C”}，
{字段：“蜜蜂”，隐藏：真，可排序：假，模板：=#文本#”，int:4}，
{字段：“foo”，隐藏：true，可排序：false，模板：“#=text#”，宽度：“40px”，propA:“a”，propB:“b”}，
{字段：“baz”，隐藏：true，可排序：true，模板：“#=text#”，宽度：“20px”，int:3}
]

如果我理解正确，您希望覆盖

原始数组

中同样存在于

localStorageArray

中的对象的

隐藏

和

宽度

属性（如果

字段

属性相同，则认为两个对象相同）

---

您也可以通过localStorageArray循环并比较

字段

属性

而不是创建额外的数组。如果我理解正确，您希望覆盖

原始数组

中同样存在于

localStorageArray

中的对象的

隐藏

和

宽度

属性（如果

字段

属性相同，则认为两个对象相同）

---

除了创建一个额外的数组，您还可以在localStorageArray中循环并比较

字段

属性

此外，如果需要保持原始数组的原样，请创建一个新对象并将其推送到outputArrayAlso，如果需要保持原始数组的原样，请创建一个新对象并将其推送到outputArrayAlsod要保持原始阵列的原样，请创建一个新对象并将其推送到outputArray

    (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);
      }
    })();