javascript - 使用分隔符组合对象数组的元素

Question

这是一个简单的问题，有很多简单的解决方案，我正在尝试找出最好的解决方案。我想要一个简洁易读的解决方案。

问题来了。我有一个对象数组，我想将几​​个对象成员组合成管道分隔的字符串。作为此数据的示例:

[
    {
        foo: 1,
        bar: 2
    },
    {
        foo: 10,
        bar: 20
    }
]

我希望能够像这样创建字符串:

foo = "1|10";
bar = "2|20";

如果项目存储在单独的数组中，这就像使用 Array.join 一样简单。

这是我目前的解决方案:

var foo = "";
var bar = "";

var firstItem = obj.splice(0,1)[0];
foo = firstItem.foo.toString();
bar = firstItem.bar.toString();

obj.forEach(function (item) {
    foo += "|" + item.foo.toString();
    bar += "|" + item.bar.toString();
​});

我还考虑了以下使用 Array.reduce 的解决方案，但仍然缺乏对此的浏览器支持。我正在使用原型(prototype)，并且 it's Array.reduce不幸的是，这是一个与 native JS implementation 完全不同的功能.

var strings = obj.reduce(function (a, b) {
    return {
        a.foo.toString() + "|" + b.foo.toString(),
        a.bar.toString() + "|" + b.bar.toString()
    };
});

// value of strings is now:
// {
//     foo: "1|10",
//     bar: "2|20"
// }   

有没有更优雅的方法来做到这一点？

Answer 1

你可以这样做:

function propsArrayJoin(arr, prop, glue) {
  var results = [];
  arr.forEach(function (item) {
    results.push(item[prop].toString());
​ });
  return results.join(glue);
}

obj = [
    {
        foo: 1,
        bar: 2
    },
    {
        foo: 10,
        bar: 20
    }
];

foo = propsArrayJoin(obj, 'foo', '|');
bar = propsArrayJoin(obj, 'bar', '|');