366

文字列の配列がある場合、メソッドを使用して.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(", ");
}

そのコードに問題はなく、機能しますが、突然、単純で簡潔なコード行から非常に命令的な関数に変わってしまいました。これを書くためのより簡潔で、理想的にはより機能的な方法はありますか?

4

12 に答える 12

656

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

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

最新の JavaScript では:

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

(フィドル)

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

var users = [
      {name: "Joe", age: 22},
      {name: "Kevin", age: 24},
      {name: "Peter", age: 21}
    ];
var result = _.pluck(users,'name').join(",")
于 2013-05-17T11:13:28.897 に答える
16

メソッドの使用にも遭遇しましたreduce。これは次のようになります。

console.log(
    [
        {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か月後に編集：ああ、私は何を考えていましたか。"クリーナー"。コードの神様を怒らせてしまいました。

于 2013-06-10T13:38:44.883 に答える
9

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

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

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

于 2013-05-17T11:19:23.200 に答える
1

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

ここで Array.map が提案されました。これは、私が常に使用しているすばらしい方法です。Array.reduce も言及されました...

個人的には、このユース ケースには Array.reduce を使用します。なんで？コードはややクリーン/クリアではありませんが。map 関数を結合にパイプするよりもはるかに効率的です。

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

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

// a one line answer to this question using modern JavaScript
x.reduce((a, b) => `${a.name || a}, ${b.name}`);
于 2018-08-09T14:30:26.967 に答える
-1

これを試して

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"
于 2013-05-17T11:25:03.503 に答える