javascript - 在两个属性上连接两个对象数组的更好方法？

Question

我试图根据两个属性组合两个对象数组，并重写连接数据集中其他属性的名称。

数据集如下所示:

var xData = [ 
   { row_id: 1, date: '2013-04-01', cost: 18 },
   { row_id: 2, date: '2013-04-01', cost: 27 } ...
];
var yData = [ 
   { row_id: 1, date: '2013-04-01', cost: 48 },
   { row_id: 3, date: '2013-04-01', cost: 37 } ...
];

我想要加入的属性是 row_id和date属性，我想重写 cost至x_cost和y_cost分别。我还想处理缺失值。这就是我想要的结果:

var combinedData = [ 
   { row_id: 1, date: '2013-04-01', x_cost: 18, y_cost: 48 },
   { row_id: 2, date: '2013-04-01', x_cost: 27, y_cost: null },
   { row_id: 3, date: '2013-04-01', x_cost: null, y_cost: 37 } ...
];

这是我现在的代码。这太可怕了:

combineXAndYDatasets: function(xData, yData) {
    // Index both datasets by ID and date. 
    var x_indexed_by_id_and_date = {};
    xData.forEach(function(d) {
        var k = d.row_id + '_' + d.date;
        x_indexed_by_id_and_date[k] = d;
    });
    var y_indexed_by_id_and_date = {};
    yData.forEach(function(d) {
        var k = d.row_id + '_' + d.date;
        y_indexed_by_id_and_date[k] = d;
    });

    var combinedData = [];
    // Iterate over ydata, join with xdata if possible.
    for (var row_id in y_indexed_by_id_and_date) {
        var row = JSON.parse(JSON.stringify(y_indexed_by_id_and_date[row_id]));
        row.y_cost = +y_indexed_by_id_and_date[row_id].cost;
        if (row_id in x_indexed_by_id_and_date) {
            row.x_cost = +x_indexed_by_id_and_date[row_id].cost;
        } else {
            row.x_cost = null;
        }
        combinedData.push(row);
    }
    // Iterate over xdata, add anything that wasn't in ydata.
    for (var x_row_id in x_indexed_by_id_and_date) {
        if (!(x_row_id in y_indexed_by_id_and_date)) {
            var x_row = JSON.parse(JSON.stringify(x_indexed_by_id_and_date[x_row_id]));
            x_row.y = null;
            x_row.x = +x_row.cost;
            combinedData.push(x_row);
        }
    }
    return combinedData;
}

我能做些什么来让这件事不那么糟糕？

我正在使用 jQuery，我可以添加例如划线是否有帮助。

Answer 1

您可以利用 reduce 将每个数组缩减为字典，然后将该字典转换回数组。像这样的东西(vanilla JS，不是开箱即用的 IE 8 兼容):

var xData = [ 
   { row_id: 1, date: '2013-04-01', cost: 18 },
   { row_id: 2, date: '2013-04-01', cost: 27 }
];
var yData = [ 
   { row_id: 1, date: '2013-04-01', cost: 48 },
   { row_id: 3, date: '2013-04-01', cost: 37 }
];

var xDataDict = xData.reduce(function(p,c) {
    createDictionaryEntry(p,c,c.cost,null)
    return p;
},{});

xAndYDataDict = yData.reduce(function(p,c) {
    createDictionaryEntry(p,c,null,c.cost)
    return p;
}, xDataDict);


var combinedData = Object.keys(xAndYDataDict).map(function(key) { 
    return xAndYDataDict[key]; 
});

alert(JSON.stringify(combinedData));


function createDictionaryEntry(p,c,x_cost,y_cost) {
    var key = c.row_id + "-" + c.date;
    if (p[key]) {
        p[key].x_cost = p[key].x_cost || x_cost;
        p[key].y_cost = p[key].y_cost || y_cost;
    } else {
        p[key] = {
            row_id: c.row_id,
            date: c.date,
            x_cost: x_cost,
            y_cost: y_cost
        }
    }
}

请注意，combinedData 不会按任何保证的顺序排列，因此，如果这很重要，您可以随时对其进行排序。

使用下划线:

var xData = [ 
   { row_id: 1, date: '2013-04-01', cost: 18 },
   { row_id: 2, date: '2013-04-01', cost: 27 }
];
var yData = [ 
   { row_id: 1, date: '2013-04-01', cost: 48 },
   { row_id: 3, date: '2013-04-01', cost: 37 }
];

var xDataDict = _.reduce(xData, function(p,c) {
    createDictionaryEntry(p,c,c.cost,null)
    return p;
},{});

xAndYDataDict = _.reduce(yData,function(p,c) {
    createDictionaryEntry(p,c,null,c.cost)
    return p;
}, xDataDict);


var combinedData = _.map(Object.keys(xAndYDataDict),function(key) { 
    return xAndYDataDict[key]; 
});

alert(JSON.stringify(combinedData));


function createDictionaryEntry(p,c,x_cost,y_cost) {
    var key = c.row_id + "-" + c.date;
    if (p[key]) {
        p[key].x_cost = p[key].x_cost || x_cost;
        p[key].y_cost = p[key].y_cost || y_cost;
    } else {
        p[key] = {
            row_id: c.row_id,
            date: c.date,
            x_cost: x_cost,
            y_cost: y_cost
        }
    }
}

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>