オブジェクトの配列の値に対して.joinを実行する

文字列の配列がある場合、次のように、.join()メソッドを使用して、各要素をコンマで区切った単一の文字列を取得できます。

["Joe", "Kevin", "Peter"].join(", ") // => "Joe, Kevin, Peter"

オブジェクトの配列があり、その中に保持されている値に対して同様の操作を実行したいと思います。から

[
  {name: "Joe", age: 22},
  {name: "Kevin", age: 24},
  {name: "Peter", age: 21}
]

以前と同じ出力を実現するにはjoin、name属性に対してのみメソッドを実行します。

現在、私は次の機能を持っています：

function joinObj(a, attr){
  var out = [];

  for (var i = 0; i < a.length; i++){
    out.push(a[i][attr]);
  }

  return out.join(", ");
}

そのコードには何も問題はありませんが、機能しますが、突然、私は単純なコード行から非常に命令的な関数に移行しました。これを書くためのより簡潔で、理想的にはより機能的な方法はありますか？

オブジェクトを何か（この場合はプロパティ）にマップする場合。Array.prototype.map機能的にコーディングしたいなら、あなたが探しているものだと思います。

[
  {name: "Joe", age: 22},
  {name: "Kevin", age: 24},
  {name: "Peter", age: 21}
].map(function(elem){
    return elem.name;
}).join(",");

最近のJavaScriptでは：

[
  {name: "Joe", age: 22},
  {name: "Kevin", age: 24},
  {name: "Peter", age: 21}
].map(e => e.name).join(",");

（フィドル）

ES5に準拠していない古いブラウザーをサポートしたい場合は、シムすることができます（上記のMDNページにポリフィルがあります）。別の代替pluck方法は、underscorejsのメソッドを使用することです。

var users = [
      {name: "Joe", age: 22},
      {name: "Kevin", age: 24},
      {name: "Peter", age: 21}
    ];
var result = _.pluck(users,'name').join(",")

まあ、あなたはいつでもtoStringあなたのオブジェクトのメソッドをオーバーライドすることができます：

var arr = [
    {name: "Joe", age: 22, toString: function(){return this.name;}},
    {name: "Kevin", age: 24, toString: function(){return this.name;}},
    {name: "Peter", age: 21, toString: function(){return this.name;}}
];

var result = arr.join(", ");
//result = "Joe, Kevin, Peter"

私もreduceメソッドを使用して遭遇しました、これはそれがどのように見えるかです：

[
  {name: "Joe", age: 22},
  {name: "Kevin", age: 24},
  {name: "Peter", age: 21}
].reduce(function (a, b) {return (a.name || a) + ", " + b.name})

(a.name || a)最初の要素が正しく処理されるが、残りは（ここにあるa文字列であり、そのためa.nameのオブジェクトとして扱われていない未定義です）。

編集：これをさらにこれにリファクタリングしました：

x.reduce(function(a, b) {return a + ["", ", "][+!!a.length] + b.name;}, "");

a常に文字列でbあり、常にオブジェクトであるので、私はこれがよりクリーンであると信じています（オプションのinitialValueパラメータをで使用しているためreduce）

6か月後の編集：ああ、私は何を考えていましたか。"クリーナー"。私はコードGodsを怒らせました。

外部ライブラリを使用せずにそれを行う簡単な方法があるかどうかはわかりませんが、配列やコレクションなどを処理するためのたくさんのユーティリティがあるunderscore.jsは個人的に気に入ってい ます。

アンダースコアを使用すると、1行のコードでこれを簡単に行うことができます。

_.pluck(arr, 'name').join(', ')

ノードまたはES6 +の場合：

users.map(u => u.name).join(', ')

オブジェクト配列が変数によって参照されているとしましょう users

ES6を使用できる場合、最も簡単な解決策は次のとおりです。

users.map(user => user.name).join(', ');

そうでない場合は、lodashを使用できます。

 _.map(users, function(user) {
     return user.name;
 }).join(', ');

オブジェクトと動的キーの場合： "applications\":{\"1\":\"Element1\",\"2\":\"Element2\"}

Object.keys(myObject).map(function (key, index) {
    return myObject[key]
}).join(', ')

私が知っている古いスレッドですが、これに遭遇した人にはまだ非常に関連しています。

ここではArray.mapが提案されていますが、これは私がいつも使用している素晴らしいメソッドです。Array.reduceも言及されました...

このユースケースでは、個人的にArray.reduceを使用します。どうして？コードが少しクリーン/明確ではないにもかかわらず。マップ関数を結合にパイプするよりもはるかに効率的です。

これは、Array.mapが各要素をループして、配列内のオブジェクトの名前をすべて含む新しい配列を返す必要があるためです。次に、Array.joinは配列の内容をループして結合を実行します。

テンプレートリテラルを使用してコードを1行にまとめることで、jackweirdysの解答を減らし、読みやすさを向上させることができます。「すべての最新ブラウザでもサポートされています」

// a one line answer to this question using modern JavaScript
x.reduce((a, b) => `${a.name || a}, ${b.name}`);

確かではありませんが、これらはすべて機能しますが、2つのスキャンを実行しており、1つのスキャンでこれを実行できるため、最適ではありません。O（2n）はO（n）と見なされますが、常に真のO（n）を使用する方が適切です。

const Join = (arr, separator, prop) => {
    let combined = '';
    for (var i = 0; i < arr.length; i++) {
        combined = `${combined}${arr[i][prop]}`;
        if (i + 1 < arr.length)
            combined = `${combined}${separator} `;
    }
    return combined;
}

これは古い学校のように見えるかもしれませんが、このように考えることができます：

skuCombined = Join(option.SKUs, ',', 'SkuNum');

これを試して

var x= [
  {name: "Joe", age: 22},
  {name: "Kevin", age: 24},
  {name: "Peter", age: 21}
]

function joinObj(a, attr) {
  var out = []; 
  for (var i=0; i<a.length; i++) {  
    out.push(a[i][attr]); 
  } 
 return out.join(", ");
}

var z = joinObj(x,'name');
z > "Joe, Kevin, Peter"
var y = joinObj(x,'age');
y > "22, 24, 21"