我试图弄清楚如何合并两个对象数组。这是我需要做的：
field 属性是每个对象的唯一标识符originalArraylocalStorageArray需要维护，以支付先前的要求，注意（顺序应该是：bar，foo，baz）localStorageArray：hidden和width（field是一个给-中，由于其标识符）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 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
}];
这是使用ES6方法的示例。
/*global document, console, expect */
(function () {
'use strict';
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
}],
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'
}],
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
}],
outputArray = [],
pre = document.getElementById('out'),
equalField = function (originalElement) {
return originalElement.field === this.field;
};
localStorageArray.reduce(function (acc, localElement) {
var original = originalArray.find(equalField, localElement),
shallowCopy;
if (original) {
shallowCopy = Object.assign({}, original);
shallowCopy.hidden = localElement.hidden;
shallowCopy.width = localElement.width;
acc.push(shallowCopy);
}
return acc;
}, outputArray);
try {
expect(outputArray).to.eql(desiredArray);
pre.textContent = 'outputArray is equal to desiredArray\n\n';
} catch (e) {
console.error(e);
pre.textContent = 'outputArray is not equal to desiredArray\n\n';
}
pre.textContent += JSON.stringify(outputArray, null, 2);
}());<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.32.0/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/expect.js/0.2.0/expect.min.js"></script>
<pre id="out"></pre>更新：根据您的新注释和数据，这可能是一个解决方案。
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
}],
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"
}],
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
}],
outputArray = [],
pre = document.getElementById('out'),
equalField = function (originalElement) {
return originalElement.field === this.field;
};
localStorageArray.reduce(function (acc, localElement) {
var original = originalArray.find(equalField, localElement),
shallowCopy;
if (original) {
shallowCopy = Object.assign({}, original);
shallowCopy.hidden = localElement.hidden;
shallowCopy.width = localElement.width;
acc.push(shallowCopy);
}
return acc;
}, outputArray);
originalArray.forEach(function (originalElement, index) {
if (!this.find(equalField, originalElement)) {
this.splice(index, 0, Object.assign({}, originalElement));
}
}, outputArray);
try {
expect(outputArray).to.eql(desiredArray);
pre.textContent = 'outputArray is equal to desiredArray\n\n';
} catch (e) {
console.error(e);
pre.textContent = 'outputArray is not equal to desiredArray\n\n';
}
pre.textContent += JSON.stringify(outputArray, null, 2);<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.32.0/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/expect.js/0.2.0/expect.min.js"></script>
<pre id="out"></pre>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句