内部使用jquery或javascript对象连接两个数组

我有两个数组，由几个对象组成

const colors=[
{id: 5, color: "yellow"}
{id: 6, color: "green"}
];

const boxes=[
{color_id: 5, name: 4, value: 40}
{color_id: 5, name: 5, value: 50}
{color_id: 6, name: 4, value: 400}
{color_id: 6, name: 5, value: 500}
]

我想要这个结果

var result=[
{color_id: 5, name: 4, value: 40, color: "yellow"}
{color_id: 5, name: 5, value: 50, color: "yellow"}
{color_id: 6, name: 4, value: 400, color: "green"}
{color_id: 6, name: 5, value: 500, color: "green"}
]

搜索后我的解决方案是

   const result = [];
   $.each(boxes,function(index,value){
   result.push($.extend({}, colors[index], boxes[index]));
   });

但它不适用于Javascript：

    var result = boxes.map(b => {
    colors.forEach(c => {
        if (c.id === b.color_id)
            for (key in c) {
                key !== 'id' ? (b[key] = c[key]) : null
            }
    })
    return b
 })

这样，它将添加任何额外的键：颜色值。（即，如果有或将来有）

您可以将

.filter（）

与

一起使用


var颜色=[
{id:5，颜色：“黄色”}，
{id:6，颜色：“绿色”}
];
变量箱=[
{color_id:5，name:4，value:40}，
{color_id:5，name:5，value:50}，
{color_id:6，name:4，value:400}，
{color_id:6，name:5，value:500}
];
var结果=框；//结果等于Box数组
$。每个（结果、函数（i、val）{
var colors\u match=colors.filter（函数（v）{
返回v.id==val.color\u id；
});
结果[i]['color']=颜色与[0]匹配；
});
控制台日志（结果）
这不应该是
结果。推…
？这是我拼写错误的主要来源，有reslut.push（已编辑）您完全欢迎@danialrafiee。。祝你有一个美好的一天：-）谢谢你的回复，但它与之前的检查一样，我忽略了id和颜色的区别。这也将添加任何其他键。
const arr = boxes.map(box => {
    const color = colors.find(color => color.id === box.color_id).color
    return { ...box, color };
});