利用Array.prototype.map它可以將附加target對(duì)象傳遞給...，這里可以使用第二個(gè)數(shù)組，從中檢索相應(yīng)的合并項(xiàng)。
合并是通過Object.assign將兩個(gè)數(shù)組項(xiàng)合并到一個(gè)新創(chuàng)建的對(duì)象中來完成的，以便不改變?nèi)我簧婕皵?shù)組的任何合并項(xiàng)......
const array1 = [{
? key: '5',
? value: '550',
}, {
? key: '6',
? value: '750',
}];
const array2 = [{
? type: 'Job',
? status: 'Finished',
? key : '5',
}, {
? type: 'Ticket',
? status: 'Processing',
? key : '6',
}];
function mergeWithSameIndexItemFromBoundArray(item, idx) {
? const boundArray = this;
? return Object.assign({}, item, boundArray[idx]);
}
console.log(
? 'merge result of array2 and array1 ...',
? array2.map(mergeWithSameIndexItemFromBoundArray, array1)
);
console.log(
? 'merge result of array1 and array2 ...',
? array1.map(mergeWithSameIndexItemFromBoundArray, array2)
);
.as-console-wrapper { min-height: 100%!important; top: 0; }
如果存在不匹配的商品訂單數(shù)組，可以基于上述方法向 提供額外的目標(biāo)對(duì)象map。
這次不是第二個(gè)數(shù)組，而是它的一個(gè)變換；一個(gè)對(duì)象，它使用標(biāo)識(shí)所有項(xiàng)目的屬性名稱將第二個(gè)數(shù)組的所有項(xiàng)目映射到它。對(duì)于OP的示例，該屬性名稱是key。
因此，需要編寫一個(gè)附加函數(shù)來完成此映射任務(wù)。下面的下一個(gè)示例選擇一種基于 的方法Array.prototype.reduce。
此外，必須重寫映射器函數(shù)，以便通過簡(jiǎn)單地使用數(shù)組項(xiàng)的key屬性而不是之前的數(shù)組索引來利用之前創(chuàng)建的綁定映射...
const array1 = [{
? key: '5',
? value: '550',
}, {
? key: '7',
? value: '320',
}, {
? key: '6',
? value: '750',
}];
const array2 = [{
? type: 'Ticket',
? status: 'Processing',
? key : '6',
}, {
? type: 'Job',
? status: 'Finished',
? key : '5',
}, {
? type: 'Task',
? status: 'Pending',
? key : '7',
}];
function createKeyBasedItemMap(map, item) {
? map[item.key] = item;
? return map;
}
function mergeWithKeyBasedItemFromBoundMap(item) {
? return Object.assign({}, item, this[item.key]);
}
console.log(
? 'map-based merge of unordered array2 and array1 items ...',
? array2.map(
? ? mergeWithKeyBasedItemFromBoundMap,
? ? array1.reduce(createKeyBasedItemMap, {})
? )
);
console.log(
? 'map-based merge of unordered array1 and array2 items ...',
? array1.map(
? ? mergeWithKeyBasedItemFromBoundMap,
? ? array2.reduce(createKeyBasedItemMap, {})
? )
);
console.log('\n');
console.log(
? 'proof of concept ... the item-map based on array1 ...',
? array1.reduce(createKeyBasedItemMap, {})
);
console.log(
? 'proof of concept ... the item-map based on array2 ...',
? array2.reduce(createKeyBasedItemMap, {})
);
.as-console-wrapper { min-height: 100%!important; top: 0; }
