Wykonaj .join na wartości w tablicy obiektów

Jeśli mam tablicę ciągów, mogę użyć .join()metody, aby uzyskać pojedynczy ciąg, z każdym elementem oddzielonym przecinkami, tak jak poniżej:

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

Mam tablicę obiektów i chciałbym wykonać podobną operację na wartości w niej zawartej; więc od

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

wykonaj joinmetodę tylko dla nameatrybutu, aby uzyskać takie same wyniki jak poprzednio.

Obecnie mam następującą funkcję:

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

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

  return out.join(", ");
}

Nie ma nic złego w tym kodzie, działa, ale nagle przeszedłem z prostej, zwięzłej linii kodu do bardzo wymagającej funkcji. Czy istnieje bardziej zwięzły, idealnie bardziej funkcjonalny sposób pisania tego?

Jeśli chcesz mapować obiekty na coś (w tym przypadku właściwość). Myślę, że Array.prototype.maptego szukasz, jeśli chcesz funkcjonalnie kodować.

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

W nowoczesnym JavaScript:

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

(skrzypce)

Jeśli chcesz obsługiwać starsze przeglądarki, które nie są zgodne z ES5 , możesz je przeskoczyć (na stronie MDN powyżej znajduje się wypełnienie). Inną alternatywą byłoby użycie pluckmetody underscorejs :

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

Zawsze możesz zastąpić toStringmetodę swoich obiektów:

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"

Natknąłem się również na tę reducemetodę, tak to wygląda:

[
  {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)Jest więc pierwszy element jest odpowiednio traktowane, reszta (gdzie ajest ciągiem znaków, i tak a.namejest nieokreślona) nie jest traktowana jak obiekt.

Edycja: Teraz zmieniłem to na następujące:

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

który, moim zdaniem, jest czystszy, ponieważ azawsze jest łańcuchem, bzawsze jest obiektem (ze względu na użycie opcjonalnego parametru initialValue w reduce)

Edytuj 6 miesięcy później: Och, o czym myślałem. "odkurzacz". Rozgniewałem kod Bogów.

Nie wiem, czy jest to łatwiejszy sposób bez korzystania z zewnętrznej biblioteki, ale osobiście uwielbiam underscore.js, który ma mnóstwo narzędzi do zarządzania tablicami, kolekcjami itp.

Dzięki podkreśleniu możesz to łatwo zrobić za pomocą jednego wiersza kodu:

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

W węźle lub ES6 +:

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

Powiedzmy, że zmienna odwołuje się do tablicy obiektów users

Jeśli można użyć ES6, najłatwiejszym rozwiązaniem będzie:

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

Jeśli nie, można użyć lodash :

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

Jeśli klucze obiektowe i dynamiczne: "applications\":{\"1\":\"Element1\",\"2\":\"Element2\"}

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

Stary wątek, który znam, ale nadal jest bardzo odpowiedni dla każdego, kto go napotka.

Zasugerowano tutaj Array.map, co jest niesamowitą metodą, której używam cały czas. Wspomniano także o Array.reduce ...

Osobiście użyłbym Array.reduce dla tego przypadku użycia. Czemu? Pomimo tego, że kod jest nieco mniej czysty / wyraźny. Jest to o wiele bardziej wydajne niż połączenie funkcji mapy z łączeniem.

Powodem tego jest to, że Array.map musi zapętlić każdy element, aby zwrócić nową tablicę ze wszystkimi nazwami obiektu w tablicy. Array.join następnie zapętla zawartość tablicy, aby wykonać łączenie.

Możesz poprawić czytelność jackweirdys, zmniejszając odpowiedź, używając literałów szablonów, aby wprowadzić kod do jednego wiersza. „Obsługiwane również we wszystkich nowoczesnych przeglądarkach”

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

nie jestem pewien, ale wszystkie te odpowiedzi działają, ale nie są optiomalne, ponieważ wykonują dwa skany i można to zrobić za jednym razem. Mimo że O (2n) jest uważane za O (n), zawsze lepiej jest mieć prawdziwe 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;
}

Może to wyglądać jak stara szkoła, ale pozwala mi to robić tak:

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

Spróbuj tego

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"