js数组对象合并，数组a与数组b合并成c的效果如何实现？

Question

   let a = [1,2,3,4,5,6,7,10]
   let b = [{id:1,value:'a'},{id:2,value:'b'},{id:3,value:'c'},{id:4,value:'d'},{id:11,value:'e'}]
    //期待结果
    let c = [
      {
        id:1,
        value:'a'
      },
      {
        id:2,
        value:'b'
   },
      {
        id:3,
        value:'c'
      },
      {
        id:4,
        value:'d'
      },
      {
        id:5,
        value:null
      },
      {
        id:6,
        value:null
      },
      {
        id:7,
         value:null
      },
      {
        id:10,
        value:null
      },
    ]

数组a与数组b合并成c的效果如何实现，求指教？

Answer 1

let a = [1,2,3,4,5,6,7,10]
let b = [{id:1,value:'a'},{id:2,value:'b'},{id:3,value:'c'},{id:4,value:'d'},{id:11,value:'e'}]
console.log(a.map(item => {
    return {
        id:item,
        ...(b.find(r => r.id==item)||{value:null})
    }
}))

Answer 2

a.map(id => ({id, value: b.find(o => o.id === id)?.value ?? null}))

Answer 3

let a = [1,2,3,4,5,6,7,10]
let b = [{id:1,value:'a'},{id:2,value:'b'},{id:3,value:'c'},{id:4,value:'d'},{id:11,value:'e'}]
  
const map = new Map(b.map((item) => [item.id,item.value]));

const result = a.map((item) => {
  return {
    id: item,
    value: map.get(item) || null
  }
})
console.log(result)