Nesneler dizisinde .join on değerini gerçekleştirme

Dizeleri bir dizi varsa .join(), her öğe virgülle ayrılmış olarak tek bir dize almak için yöntemi kullanabilirsiniz, böylece:

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

Nesnelerin bir dizi var ve ben içinde tutulan bir değer üzerinde benzer bir işlem gerçekleştirmek istiyorum; bu yüzden

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

daha önce olduğu gibi aynı çıktıyı elde etmek için joinyöntemi yalnızca nameöznitelik üzerinde gerçekleştirin .

Şu anda aşağıdaki işlevi var:

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

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

  return out.join(", ");
}

Bu kodla ilgili yanlış bir şey yok, işe yarıyor, ama birdenbire basit, özlü bir kod satırından çok zorunlu bir işleve gittim. Bunu yazmanın daha özlü, ideal olarak daha işlevsel bir yolu var mı?

Nesneleri bir şeyle eşleştirmek istiyorsanız (bu durumda bir özellik). Array.prototype.mapFonksiyonel olarak kodlamak istiyorsanız aradığınız şey sanırım .

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

Modern JavaScript'te:

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

(Vaktini boşa harcamak)

Daha eski tarayıcıları desteklemek istiyorsanız, ES5 uyumlu olmayanlar onu taklit edebilirsiniz (yukarıdaki MDN sayfasında bir çoklu dolgu vardır). Başka bir alternatif, underscorejs pluckyöntemini kullanmak olacaktır :

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

Peki her zaman toStringnesnelerinizin yöntemini geçersiz kılabilirsiniz :

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"

Ben de reduceyöntemi kullanarak karşılaştım , bu böyle görünüyor:

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

Bu (a.name || a)nedenle, ilk öğeye doğru davranılır, ancak geri kalanı (burada abir dize ve a.nametanımsızdır) nesne olarak değerlendirilmez.

Düzenleme: Şimdi bu daha da refactored ettik:

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

aher zaman bir dize olduğu gibi daha temiz olduğuna inanıyorum, her bzaman bir nesnedir ( isteğe bağlı initialValue parametresinin kullanılması nedeniyle reduce)

6 ay sonra düzenleyin: Ah ne düşünüyordum. "Temizleyici". Tanrıların kodunu kızdırdım.

Harici bir kütüphane kullanmadan bunu yapmak için daha kolay bir yol varsa bilmiyorum, ama ben şahsen seviyorum underscore.js diziler, koleksiyonlar vb başa çıkmak için yardımcı programlar ton vardır

Alt çizgi ile bunu bir kod satırı ile kolayca yapabilirsiniz:

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

Düğümde veya ES6 + 'da:

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

diyelim ki nesneler dizisine değişken tarafından başvuruluyor users

ES6 kullanılabiliyorsa, en kolay çözüm:

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

Değilse ve lodash şu şekilde kullanılabilir:

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

Nesne ve dinamik anahtarlar ise: "applications\":{\"1\":\"Element1\",\"2\":\"Element2\"}

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

Eski bir iş parçacığı biliyorum ama yine de süper gelen herkes bu rastlamak.

Burada her zaman kullandığım harika bir yöntem olan Array.map önerildi. Array.reduce da bahsedildi ...

Şahsen bu kullanım durumu için bir Array.reduce kullanırdım. Neden? Kod biraz daha az temiz / açık olmasına rağmen. Harita işlevini bir birleştirmeye bağlamaktan çok daha verimlidir.

Bunun nedeni, Array.map'nin dizideki nesnenin tüm adlarını içeren yeni bir dizi döndürmek için her öğenin üzerinde döngü yapması gerektiğidir. Array.join daha sonra birleştirme işlemini gerçekleştirmek için dizi içeriğinin üzerine döner.

Kodu tek bir satıra almak için şablon değişmezlerini kullanarak jackweirdys azaltma yanıtının okunabilirliğini artırabilirsiniz. "Tüm modern tarayıcılarda da desteklenir"

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

emin değilim, ancak tüm bu cevaplar işe yarıyor ama iki tarama yapıyorlar ve optiomal değiller ve bunu tek bir taramada yapabilirsiniz. O (2n) O (n) olarak kabul edilmesine rağmen, gerçek bir O (n) 'ye sahip olmak her zaman daha iyidir.

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

Bu eski okul gibi görünebilir, ancak böyle bir şey yapmama izin veriyor:

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

bunu dene

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"