Javascript 合并和重新排列两个对象数组

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

• 字段

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

  原始数组中列出对象

• 需要维护

  localStorageArray

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

  bar

  ，

  foo

  ，

  baz

  ）
• 输出需要包含来自

  localStorageArray

  的以下属性值：

  hidden

  和

  width

  （

  字段

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

  originalArray

  的所有其他属性

这是我的怪癖：

outputArray.forEach(function(originalItem){
    localStorageArray.forEach(function(localItem){
        if(originalItem.field === localItem.field){
            originalItem.hidden = localItem.hidden;
            originalItem.width = localItem.width;
        }
    });
});  

我可以很好地获得属性，但是我对如何根据

localStorageArray

重新排序有些迷茫。我首先想到在前面的一组

.forEach（）

函数中这样做，但后来我想不要搞乱

forEach

循环中的顺序，因为我认为这可能会搞乱一些事情

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

以下是我的阵列：

var originalArray = [{
        field: "foo",
        hidden: true,
        sortable: false,
        template: "<div>#=text#</div>",
        width: "20px",
        propA: "a",
        propB: "b"
    }, {
        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”，
隐藏：是的，
可排序：false，
模板：“#=文本”，
宽度：“20px”，
普罗帕：“a”，
方案b：“b”
}, {
字段：“酒吧”，
隐藏：假，
可排序：false，
模板：“”，
宽度：“20%”，
propC：“C”
}, {
字段：“baz”，
隐藏：假，
可排序：是的，
模板：“#=文本”，
内部：3
}];
var localStorageArray=[{
字段：“酒吧”，
隐藏：假，
可排序：false，
宽度：“100px”
}, {
字段：“foo”，
隐藏：是的，
可排序：false，
模板：“#=文本”，
宽度：“40px”
}, {
字段：“boo”，
隐藏：是的，
可排序：是的，
模板：“Boo:#=text#”，
宽度：“200px”
}, {
字段：“baz”，
隐藏：是的，
模板：“baz:#=文本#”，
宽度：“20px”
}];

这是我想要的结果：

var desiredArray = [{
        field: "bar",
        hidden: false,
        sortable: false,
        template: "",
        width: "100px",
        propC: "C"
    }, {
        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=[{
字段：“酒吧”，
隐藏：假，
可排序：false，
模板：“”，
宽度：“100px”，
propC：“C”
}, {
字段：“foo”，
隐藏：是的，
可排序：false，
模板：“#=文本”，
宽度：“40px”，
普罗帕：“a”，
方案b：“b”
}, {
字段：“baz”，
隐藏：是的，
可排序：是的，
模板：“#=文本”，
宽度：“20px”，
内部：3
}];

检查这把小提琴：

实际上，您可以这样做：

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

---

下面是一个使用ES6方法的示例

/*全局文档、控制台、expect*/
（功能（）{
"严格使用",；
变量原始数组=[{
字段：“foo”，
隐藏：是的，
可排序：false，
模板：'#=文本#'，
宽度：“20px”，
普罗帕：“a”，
建议b：‘b’
}, {
字段：'bar'，
隐藏：假，
可排序：false，
模板：“”，
宽度：“20%”，
propC:'C'
}, {
字段：“baz”，
隐藏：假，
可排序：是的，
模板：'#=文本#'，
内部：3
}],
localStorageArray=[{
字段：'bar'，
隐藏：假，
可排序：false，
宽度：“100px”
}, {
字段：“foo”，
隐藏：是的，
可排序：false，
模板：'#=文本#'，
宽度：“40px”
}, {
字段：“boo”，
隐藏：是的，
可排序：是的，
模板：“Boo:#=text#”，
宽度：“200px”
}, {
字段：“baz”，
隐藏：是的，
模板：“baz:#=文本#”，
宽度：“20px”
}],
所需阵列=[{
字段：'bar'，
隐藏：假，
可排序：false，
模板：“”，
宽度：“100px”，
propC:'C'
}, {
字段：“foo”，
隐藏：是的，
可排序：false，
模板：'#=文本#'，
宽度：“40px”，
普罗帕：“a”，
建议b：‘b’
}, {
字段：“baz”，
隐藏：是的，
可排序：是的，
模板：'#=文本#'，
宽度：“20px”，
内部：3
}],
输出阵列=[]，
pre=document.getElementById（'out'），
equalField=函数（原始元素）{
返回originalElement.field==此.field；
};
localStorageArray.reduce（函数（acc，localElement）{
var original=originalArray.find（equalField，localElement），
浅镜；
如果（原件）{
shallowCopy=Object.assign（{}，原始）；
shallowCopy.hidden=localElement.hidden；
shallowCopy.width=localElement.width；
acc.push（浅镜）；
}
返回acc；
}，输出阵列）；
试一试{
expect（outputArray）.to.eql（desiredArray）；
pre.textContent='outputArray等于desiredArray\n\n'；
}捕获（e）{
控制台错误（e）；
pre.textContent='outputArray不等于desiredArray\n\n'；
}
pre.textContent+=JSON.stringify（outputArray，null，2）；
}());

你能给出一些示例输入数据和预期输出吗？你说原始数组的所有其他属性都需要在输出中维护

，但在你的操作中，

desiredArray

包含

{field:“foo”，hidden:true，sortable:false，template:“#=text#”，width:“40px”，propA:“a”，propB:“b”}，

和

原始阵列

的值为

宽度：“20p