Виконайте .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методу підкреслення :

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завжди є об'єктом (завдяки використанню необов'язкового параметра початкового значення в reduce)

Змінити через 6 місяців: О, що я думав. "очищувач". Я розгнівав код Боги.

Я не знаю, чи є простіший спосіб зробити це без використання зовнішньої бібліотеки, але я особисто люблю underscore.js, який має безліч утиліт для роботи з масивами, колекціями тощо.

З підкресленням ви можете це легко зробити за допомогою одного рядка коду:

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

У вузлі або ES6 +:

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

скажемо, на масив об'єктів посилається змінна users

Якщо можна використовувати ES6, найпростішим рішенням буде:

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

Якщо ні, і lodash можна використовувати так:

 _.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"