Esegui .join sul valore nella matrice di oggetti

Se ho una matrice di stringhe, posso usare il .join()metodo per ottenere una singola stringa, con ogni elemento separato da virgole, in questo modo:

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

Ho una serie di oggetti e mi piacerebbe eseguire un'operazione simile su un valore contenuto al suo interno; così da

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

eseguire il joinmetodo solo sull'attributo name, per ottenere lo stesso output di prima.

Attualmente ho la seguente funzione:

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

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

  return out.join(", ");
}

Non c'è niente di sbagliato in quel codice, funziona, ma all'improvviso sono passato da una semplice e succinta linea di codice a una funzione molto imperativa. Esiste un modo più conciso, idealmente più funzionale di scrivere questo?

Se vuoi mappare oggetti su qualcosa (in questo caso una proprietà). Penso che Array.prototype.mapsia quello che stai cercando se vuoi codificare funzionalmente.

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

Nel moderno JavaScript:

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

(violino)

Se si desidera supportare browser meno recenti, che non sono conformi a ES5, è possibile evitarlo (è presente un polyfill nella pagina MDN sopra). Un'altra alternativa sarebbe quella di utilizzare il pluckmetodo underscorejs :

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

Bene, puoi sempre ignorare il toStringmetodo dei tuoi oggetti:

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"

Ho anche incontrato il reducemetodo, ecco come si presenta:

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

Il (a.name || a)è così il primo elemento viene trattato correttamente, ma il resto (dove aè una stringa, e così a.namenon è definito) non è trattata come un oggetto.

Modifica: ora l'ho refactored ulteriormente a questo:

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

che credo sia più pulito come asempre una stringa, bè sempre un oggetto (a causa dell'uso del parametro optionalValue opzionale in reduce)

Modifica 6 mesi dopo: Oh, cosa stavo pensando. "Pulito". Ho fatto arrabbiare il codice Gods.

Non so se esiste un modo più semplice per farlo senza utilizzare una libreria esterna, ma personalmente adoro underscore.js che ha tonnellate di utility per gestire array, raccolte ecc.

Con underscore potresti farlo facilmente con una riga di codice:

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

Sul nodo o ES6 +:

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

supponiamo che la matrice di oggetti faccia riferimento alla variabile users

Se è possibile utilizzare ES6, la soluzione più semplice sarà:

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

Altrimenti, e lodash può essere usato così:

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

Se oggetto e chiavi dinamiche: "applications\":{\"1\":\"Element1\",\"2\":\"Element2\"}

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

Un vecchio thread che conosco, ma ancora molto rilevante per chiunque si imbatta in questo.

Array.map è stato suggerito qui, che è un metodo fantastico che uso sempre. Array.reduce è stato anche menzionato ...

Personalmente userei un Array.reduce per questo caso d'uso. Perché? Nonostante il codice sia leggermente meno pulito / chiaro. È molto più efficiente rispetto al piping della funzione della mappa a un join.

Il motivo è dovuto al fatto che Array.map deve eseguire il ciclo su ciascun elemento per restituire un nuovo array con tutti i nomi dell'oggetto nell'array. Array.join quindi passa in rassegna il contenuto dell'array per eseguire il join.

Puoi migliorare la leggibilità di jackweirdys e ridurre la risposta usando i letterali dei template per ottenere il codice su una sola riga. "Supportato anche in tutti i browser moderni"

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

non sono sicuro, ma tutto ciò risponde anche se funzionano ma non sono ottimali poiché eseguono due scansioni e puoi eseguirlo in una singola scansione. Anche se O (2n) è considerato O (n) è sempre meglio avere una O (n) vera.

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;
}

Potrebbe sembrare vecchia scuola, ma mi permette di fare così:

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

prova questo

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"