如何连接对象

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

我需要根据 colorId 在 items 和 colors 之间进行连接。

想要的结果：

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

执行此操作的优雅方法是什么？

Answer 1

使用 _.map 您可以将颜色值添加到每个元素和 return 一个新数组。它看起来像这样：

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 2

这是一个纯粹的 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'}, ]

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

Answer 3

一个不错的方法是把名字放在一起在一个array 其中 id 是 same。 id 是 key 并且是 number。

结构:

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

// 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);

Answer 4

您可以使用散列 table 并只循环每个数组一次。

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

ES6

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

如何连接对象

How to join objects

javascript

lodash