Javascript 如何连接对象

给定以下两个对象数组：

var items = [
    {colorId:'2',name:'qqq'}, 
    {colorId:'5',name:'www'}, 
    {colorId:'2',name:'eee'},
    {colorId:'4',name:'rrr'}
];

var colors = [
    {id:'5',name:'blue'}, 
    {id:'2',name:'red'}
];

我需要根据

colorId

在

项目

和

颜色

之间建立连接

预期结果：

var arr3 = [
    {id:'2', name:'qqq', name:'red'}, 
    {id:'5', name:'www', name:'blue'}, 
    {id:'2', name:'eee', name:'red'}
];

---

什么是一种优雅的方法呢？

使用

\uMap

可以将颜色值添加到每个元素并返回一个新数组。 看起来是这样的：

var newItems = _.map(items, function(item) {
    // `black` will be the default fallback color
    // We use _.result in case we can't find the colorId in the colors array
    var color = _.result(_.find(colors, { id: item.colorId }), 'name', 'black');
    // Append the color to the original item in the array
    item.color = color
    // Return the modified item
    return item;
});

// newItems:
// [
//   { "colorId": "2", "name": "qqq", "color": "red" },
//   { "colorId": "5", "name": "www", "color": "blue" },
//   { "colorId": "2", "name": "eee", "color": "red" },
//   { "colorId": "4", "name": "rrr", "color": "black" }
// ]

---

使用

\uuwk.map

可以将颜色值添加到每个元素并返回一个新数组。 看起来是这样的：

var newItems = _.map(items, function(item) {
    // `black` will be the default fallback color
    // We use _.result in case we can't find the colorId in the colors array
    var color = _.result(_.find(colors, { id: item.colorId }), 'name', 'black');
    // Append the color to the original item in the array
    item.color = color
    // Return the modified item
    return item;
});

// newItems:
// [
//   { "colorId": "2", "name": "qqq", "color": "red" },
//   { "colorId": "5", "name": "www", "color": "blue" },
//   { "colorId": "2", "name": "eee", "color": "red" },
//   { "colorId": "4", "name": "rrr", "color": "black" }
// ]

---

这是一个纯JavaScript解决方案，它将更改items数组本身

如果不想修改同一数组，可以创建新数组并将克隆项推入其中

var items=[{colorId:'2'，name:'qqq'}，
{colorId:'5'，name:'www'}，
{colorId:'2'，name:'eee'}，
{colorId:'4'，name:'rrr'}]
var colors=[{id:'5'，name:'blue'}，
{id:'2'，name:'red'}，]
项目。forEach（功能（d）{
var matchColor=colors.filter（函数（项）{return item.id==d.colorId}）；
if（匹配颜色.长度）{
d、 颜色=匹配颜色[0]。名称；
}
});
控制台日志（项目）这是一个纯JavaScript解决方案，它将更改items数组本身

如果不想修改同一数组，可以创建新数组并将克隆项推入其中


var items=[{colorId:'2'，name:'qqq'}，
{colorId:'5'，name:'www'}，
{colorId:'2'，name:'eee'}，
{colorId:'4'，name:'rrr'}]
var colors=[{id:'5'，name:'blue'}，
{id:'2'，name:'red'}，]
项目。forEach（功能（d）{
var matchColor=colors.filter（函数（项）{return item.id==d.colorId}）；
if（匹配颜色.长度）{
d、 颜色=匹配颜色[0]。名称；
}
});
控制台日志（项目）nice的一种方法是将名称放在一个数组中，其中id是相同的。id是键，是一个数字

结构：

var data = {
    id: { // id is a number
        names: [],
        color: ""
    }
};

示例：

var data = {
    id: { // id is a number
        names: [],
        color: ""
    }
};


var items=[{colorId:'2'，name:'qqq'}，
{colorId:'5'，name:'www'}，
{colorId:'2'，name:'eee'}，
{colorId:'4'，name:'rrr'}]；
var colors=[{id:'5'，name:'blue'}，
{id:'2'，name:'red'}，
{id:'1'，name:'violett'}]；
//结果
变量数据={}；
项目.地图（功能（obj）{
如果（！（数据中的obj.colorId））{
数据[obj.colorId]={}；
数据[obj.colorId]。名称=[]；
}
数据[obj.colorId].names.push（obj.name）；
});
颜色.贴图（功能（obj）{
如果（！（数据中的对象id））{
数据[obj.id]={}；
数据[obj.id]。名称=[]；
}
数据[obj.id].color=obj.name；
});
控制台日志（数据）nice的一种方法是将名称放在一个数组中，其中id是相同的。id是键，是一个数字

结构：

var data = {
    id: { // id is a number
        names: [],
        color: ""
    }
};

示例：

var data = {
    id: { // id is a number
        names: [],
        color: ""
    }
};


var items=[{colorId:'2'，name:'qqq'}，
{colorId:'5'，name:'www'}，
{colorId:'2'，name:'eee'}，
{colorId:'4'，name:'rrr'}]；
var colors=[{id:'5'，name:'blue'}，
{id:'2'，name:'red'}，
{id:'1'，name:'violett'}]；
//结果
变量数据={}；
项目.地图（功能（obj）{
如果（！（数据中的obj.colorId））{
数据[obj.colorId]={}；
数据[obj.colorId]。名称=[]；
}
数据[obj.colorId].names.push（obj.name）；
});
颜色.贴图（功能（obj）{
如果（！（数据中的对象id））{
数据[obj.id]={}；
数据[obj.id]。名称=[]；
}
数据[obj.id].color=obj.name；
});
控制台日志（数据）您可以使用哈希表并仅循环每个数组一次


var items=[{colorId:'2'，name:'qqq'}，{colorId:'5'，name:'www'}，{colorId:'2'，name:'eee'}，{colorId:'4'，name:'rrr'}]，
colors=[{id:'5'，name:'blue'}，{id:'2'，name:'red'}]，
arr3=[]；
items.forEach（函数（散列）{
颜色。forEach（函数（a）{
hash[a.id]=a.name；
});
返回函数（a）{
hash[a.colorId]&&arr3.push（{id:a.colorId，name:a.name，color:hash[a.colorId]}）；
};
}（Object.create（null）），[]）；
控制台日志（arr3）您可以使用哈希表并仅循环每个数组一次


var items=[{colorId:'2'，name:'qqq'}，{colorId:'5'，name:'www'}，{colorId:'2'，name:'eee'}，{colorId:'4'，name:'rrr'}]，
colors=[{id:'5'，name:'blue'}，{id:'2'，name:'red'}]，
arr3=[]；
items.forEach（函数（散列）{
颜色。forEach（函数（a）{
hash[a.id]=a.name；
});
返回函数（a）{
hash[a.colorId]&&arr3.push（{id:a.colorId，name:a.name，color:hash[a.colorId]}）；
};
}（Object.create（null）），[]）；
控制台日志（arr3）一个对象中不能有两个相同的属性名，因此必须为其中一个“name”属性选择一个新的备选名称，否则“name”的值必须是数组。一个对象中不能有两个相同的属性名，因此必须为其中一个“name”属性选择一个新的备选名称，或者将“name”的值设置为数组。