在id映射函數上合併兩個數組 - Javascript

Question

我想在一個id（sourceID）上合併兩個數組。但是沒有這樣做。第一個數組是下面的一個：

eventsToBeInserted = [{sourceID: 1, name: "BettyNansen"}, {sourceID: 2, name: "kongenshave"}] 

這是第二個數組：

images = [{sourceID: 1, images: "Bettynansen.jpg"}, {sourceID: 2, name: "kongenshave.jpg"}] 

我期待得到如下：

events = [{sourceID: 1, name: "BettyNansen", images: "Bettynansen.jpg"}, {sourceID: 2, name: "kongenshave", images: "kongenshave.jpg"}] 

這是我的代碼：

const eventsToBeInserted = [{ 
 
    sourceID: 1, 
 
    name: "BettyNansen" 
 
}, { 
 
    sourceID: 2, 
 
    name: "kongenshave" 
 
}] 
 

 
const images = [{ 
 
    sourceID: 1, 
 
    images: "Bettynansen.jpg" 
 
}, { 
 
    sourceID: 2, 
 
    name: "kongenshave.jpg" 
 
}] 
 

 
events: !!eventsToBeInserted ? eventsToBeInserted.sourceID.map(sourceID => { 
 
    const event = images.name.find(eventLookup => eventLookup.sourceID === sourceID); 
 
    return [eventsToBeInserted.name, images.name] 
 
}) : []

Answer 1

基本上你想要的是，對於eventsToBeInserted中的每個元素，在images數組中找到屬於它的所有圖像。

注：在你的images陣列，所述第一元件具有屬性images，第二個有一個屬性name。

const images = [{ 
    sourceID: 1, 
    images: "Bettynansen.jpg" 
//^
}, { 
    sourceID: 2, 
    name: "kongenshave.jpg" 
//^
}] 

這似乎是合乎邏輯都應該使用name所以這就是我的例子婁將承擔。如果這些對象可以同時使用images和name，那麼在檢索該值時應該以||這兩個屬性的優先順序存在。

const eventsToBeInserted=[{sourceID:1,name:"BettyNansen"},{sourceID:2,name:"kongenshave"}],images=[{sourceID:1,name:"Bettynansen.jpg"},{sourceID:2,name:"kongenshave.jpg"}]; 
 

 
console.log(
 
    eventsToBeInserted.map(
 
    event => Object.assign({}, event, { 
 
     images: images 
 
     .filter(img => img.sourceID === event.sourceID) 
 
     .map(img => img.name) 
 
    }) 
 
) 
 
)

如果每個對象總是匹配到只有1圖像，按您的例子，你可以在images陣列上使用find而不是filter：

注意：如果你只會有一個圖像，這將是更有意義的命名該屬性image而不是images。

const eventsToBeInserted=[{sourceID:1,name:"BettyNansen"},{sourceID:2,name:"kongenshave"}],images=[{sourceID:1,name:"Bettynansen.jpg"},{sourceID:2,name:"kongenshave.jpg"}]; 
 

 
console.log(
 
    eventsToBeInserted.map(
 
    event => Object.assign({}, event, { 
 
     image: (
 
     images.find(img => img.sourceID === event.sourceID) || {} 
 
    ).name 
 
    }) 
 
) 
 
)

如果此操作需要發生很多次，轉換images到sourceID: imageName哈希會更有效。

const eventsToBeInserted=[{sourceID:1,name:"BettyNansen"},{sourceID:2,name:"kongenshave"}],images=[{sourceID:1,name:"Bettynansen.jpg"},{sourceID:2,name:"kongenshave.jpg"}]; 
 

 
const imagesHash = images.reduce((hash, img) => { 
 
    hash[img.sourceID] = img.name; 
 
    return hash; 
 
}, {}); 
 

 
console.log(
 
    eventsToBeInserted.map(
 
    event => Object.assign({}, event, { 
 
     image: imagesHash[event.sourceID] 
 
    }) 
 
) 
 
)

最後，假設你的環境允許，您可以使用object spread簡化的語法：

const eventsToBeInserted=[{sourceID:1,name:"BettyNansen"},{sourceID:2,name:"kongenshave"}],images=[{sourceID:1,name:"Bettynansen.jpg"},{sourceID:2,name:"kongenshave.jpg"}]; 
 

 
const imagesHash = images.reduce((hash, img) => { 
 
    hash[img.sourceID] = img.name; 
 
    return hash; 
 
}, {}); 
 

 
console.log(
 
    eventsToBeInserted.map(
 
    event => ({ 
 
     ...event, 
 
     image: imagesHash[event.sourceID] 
 
    }) 
 
) 
 
)