Question

给出以下两个对象数组：

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

我需要根据items在colors和colorId之间建立联接。

期望的结果：

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

这是一种优雅的方法吗？

Answer 1

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

如果您不想修改同一个数组，可以创建新数组并将克隆项目推送到其中。

＆＃13;

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'}, ]

items.forEach(function(d) {
	var matchColor = colors.filter(function(item){ return item.id === d.colorId});
	if(matchColor.length){
		d.color = matchColor[0].name;
	}
});

console.log(items);

＆＃13;

Answer 2

使用_.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" }
// ]

Answer 3

漂亮方式是将名称 放在数组中 id / strong>是相同。 id是键，是数字。

结构：

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

示例：

＆＃13;
＆＃13;
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'}]; // Result var data = {}; items.map(function(obj) { if(!(obj.colorId in data)) { data[obj.colorId] = {}; data[obj.colorId].names = []; } data[obj.colorId].names.push(obj.name); }); colors.map(function(obj) { if(!(obj.id in data)) { data[obj.id] = {}; data[obj.id].names = []; } data[obj.id].color = obj.name; }); console.log(data);
＆＃13;
＆＃13;
＆＃13;

Answer 4

您可以使用哈希表并仅将每个数组循环一次。

＆＃13;

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(function (hash) {
    colors.forEach(function (a) {
        hash[a.id] = a.name;
    });
    return function (a) {
        hash[a.colorId] && arr3.push({ id: a.colorId, name: a.name, color: hash[a.colorId] });
    };
}(Object.create(null)), []);

console.log(arr3);

＆＃13;

ES6

＆＃13;

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((hash => {
    colors.forEach(a => hash[a.id] = a.name);
    return a => hash[a.colorId] && arr3.push({ id: a.colorId, name: a.name, color: hash[a.colorId] });
})(Object.create(null)), []);

console.log(arr3);

＆＃13;

如何加入对象

4 个答案: