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

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

问题就在这里。我有一个对象数组，我想把几个对象成员组合成管道分隔的字符串。作为此数据的示例：

[
    {
        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的解决方案，但仍然缺乏对此的浏览器支持。我使用的是原型，不幸的是，它的功能与原型完全不同

还有更优雅的方法吗？

您可以这样做：

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

---

这会起作用，而且是有道理的。不过，我不太喜欢创建第二个数组的开销。如果没有人能想出更好的答案，我肯定会接受这个答案。关于另一个数组，你可以跳过第一个数组（或者去掉最后一个“|”）的需要，这个解决方案和其他连接部件的方法一样复杂，而且（对我来说：）它读起来更好，1-获取所有部件，2-用胶水连接它们。

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