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

Posted 2023-05-09

【中文标题】使用对象 jquery 或 javascript 内连接两个数组

【英文标题】：Inner join two array with objects jquery or javascript

【发布时间】：2020-09-24 08:44:46

【问题描述】：

我有 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]));
   );

但它不起作用

【问题讨论】：

不应该是result.push...吗？

这是我拼写错误的主要来源有 reslut.push（已编辑）

【参考方案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>

【讨论】：

不客气@danialrafiee .. 祝你有美好的一天:-)

【参考方案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。 （即如果有的话或将来）

【讨论】：

谢谢，但返回的结果与之前的框相同

现在检查一下，我忽略了 id 和 color_id 的区别。这也将添加任何其他键。

【参考方案3】：

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