Выполнить .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 месяцев спустя: о чем я думал. "очиститель". Я разозлил кодекс богов.

Я не знаю, есть ли более простой способ сделать это без использования внешней библиотеки, но мне лично нравится underscore.js котором есть множество утилит для работы с массивами, коллекциями и т. Д.

С подчеркиванием вы можете сделать это легко с помощью одной строки кода:

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

На узле или ES6 +:

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

скажем, массив объектов ссылается на переменную users

Если можно использовать ES6, то самым простым решением будет:

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

Если нет, то и лодаш можно использовать так:

 _.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 перебирает содержимое массива, чтобы выполнить соединение.

Вы можете улучшить читабельность Jackweirdys уменьшить ответ, используя литералы шаблона, чтобы код был в одной строке. «Поддерживается во всех современных браузерах»

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

Не уверен, но все это отвечает тем, что они работают, но не являются оптимальными, поскольку выполняют два сканирования, и вы можете выполнить это за один просмотр. Даже если 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"