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

Question

我有 2 个由几个对象组成的数组

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]));
   });

但它不起作用

Answer 1

您可以将.filter() 与.each() 一起使用

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

var 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 = boxes;  // result to equal the boxes array
$.each(result , function(i , val){
  var colors_match = colors.filter(function(v){
    return v.id == val.color_id;
  });
  result[i]['color'] = colors_match[0].color;
});

console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

使用 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
 })

这样，它也会从颜色中添加任何额外的 key:value。 （即如果有的话或将来）

Answer 3

const arr = boxes.map(box => {
    const color = colors.find(color => color.id === box.color_id).color
    return { ...box, color };
});