Effectuer .join sur une valeur dans un tableau d'objets

Si j'ai un tableau de chaînes, je peux utiliser la .join()méthode pour obtenir une seule chaîne, avec chaque élément séparé par des virgules, comme ceci:

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

J'ai un tableau d'objets et j'aimerais effectuer une opération similaire sur une valeur contenue en son sein; donc de

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

effectuer la joinméthode uniquement sur l' nameattribut, pour obtenir la même sortie qu'auparavant.

Actuellement, j'ai la fonction suivante:

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

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

  return out.join(", ");
}

Il n'y a rien de mal à ce code, cela fonctionne, mais tout d'un coup, je suis passé d'une ligne de code simple et succincte à une fonction très impérative. Existe-t-il une manière plus succincte, idéalement plus fonctionnelle, d'écrire cela?

Si vous souhaitez mapper des objets à quelque chose (dans ce cas, une propriété). Je pense que Array.prototype.mapc'est ce que vous recherchez si vous voulez coder de manière fonctionnelle.

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

En JavaScript moderne:

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

(violon)

Si vous souhaitez prendre en charge des navigateurs plus anciens, qui ne sont pas conformes à ES5, vous pouvez le caler (il y a un polyfill sur la page MDN ci-dessus). Une autre alternative serait d'utiliser la pluckméthode underscorejs :

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

Eh bien, vous pouvez toujours remplacer la toStringméthode de vos objets:

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"

Je suis également tombé sur l'utilisation de la reduceméthode, voici à quoi cela ressemble:

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

Le (a.name || a)est donc le premier élément est traité correctement, mais le reste (où aest une chaîne, et donc a.namen'est pas défini) n'est pas traité comme un objet.

Edit: je l'ai maintenant refactorisé à la suite de ceci:

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

qui, je crois, est plus propre, comme ac'est toujours une chaîne, best toujours un objet (en raison de l'utilisation du paramètre optionnel initialValue dans reduce)

Edit 6 mois plus tard: Oh à quoi je pensais. "nettoyeur". J'ai mis en colère le code des dieux.

Je ne sais pas s'il y a un moyen plus facile de le faire sans utiliser une bibliothèque externe, mais personnellement , je l' aime underscore.js qui a des tonnes de services publics pour faire face à des tableaux, collections , etc.

Avec le soulignement, vous pouvez le faire facilement avec une seule ligne de code:

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

Sur le nœud ou ES6 +:

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

disons que le tableau d'objets est référencé par la variable users

Si ES6 peut être utilisé, la solution la plus simple sera:

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

Sinon, le lodash peut être utilisé de la manière suivante:

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

Si objet et clés dynamiques: "applications\":{\"1\":\"Element1\",\"2\":\"Element2\"}

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

Un vieux fil que je connais mais toujours super pertinent pour tous ceux qui rencontrent cela.

Array.map a été suggéré ici, ce qui est une méthode géniale que j'utilise tout le temps. Array.reduce a également été mentionné ...

J'utiliserais personnellement un Array.reduce pour ce cas d'utilisation. Pourquoi? Malgré le code légèrement moins clair / clair. C'est beaucoup plus efficace que de diriger la fonction map vers une jointure.

La raison en est que Array.map doit faire une boucle sur chaque élément pour renvoyer un nouveau tableau avec tous les noms de l'objet dans le tableau. Array.join boucle ensuite sur le contenu du tableau pour effectuer la jointure.

Vous pouvez améliorer la lisibilité des jackweirdys réduire la réponse en utilisant des littéraux de modèle pour obtenir le code sur une seule ligne. "Pris en charge dans tous les navigateurs modernes aussi"

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

Je ne sais pas, mais tout cela répond qu'ils fonctionnent mais ne sont pas optiomaux car ils effectuent deux analyses et vous pouvez effectuer cela en une seule analyse. Même si O (2n) est considéré comme O (n), il est toujours préférable d'avoir un vrai 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;
}

Cela pourrait ressembler à de la vieille école, mais cela me permet de faire ça comme ceci:

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

essaye ça

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"