ดำเนินการ. เข้าร่วมกับค่าในอาร์เรย์ของวัตถุ

ถ้าฉันมีอาเรย์ของสตริงฉันสามารถใช้.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จะไม่ได้กำหนด) ไม่ได้รับการรักษาเป็นวัตถุ

แก้ไข: ตอนนี้ฉัน refactored มันต่อไปนี้:

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(', ');

หากไม่สามารถใช้งานและ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"