วิธีลดอาร์เรย์ในขณะที่รวมฟิลด์ใดฟิลด์หนึ่งเข้าด้วยกันใน JavaScript

พิจารณาว่าเรามีอาร์เรย์ของวัตถุดังต่อไปนี้ -

const arr = [{
   id: 121,
   hobby: 'cycling'
}, {
   id: 125,
   hobby: 'jogging'
}, {
   id: 129,
   hobby: 'reading'
}, {
   id: 121,
   hobby: 'writing'
}, {
   id: 121,
   hobby: 'playing football'
}, {
   id: 125,
   hobby: 'cooking'
}, {
   id: 129,
   hobby: 'horse riding'
}];

สมมติว่า เราต้องเขียนฟังก์ชันที่ใช้อาร์เรย์ดังกล่าวและรวมเข้าด้วยกันตามคุณสมบัติ id ทั่วไป และสำหรับคุณสมบัติอดิเรก เรากำหนดอาร์เรย์และใส่งานอดิเรกทั้งหมดสำหรับรหัสเฉพาะไว้ที่นั่น

เราจะใช้วิธี Array.prototype.reduce() เพื่อวนซ้ำอาร์เรย์และรวมรายการที่มีดัชนีเดียวกันพร้อมกัน

รหัสสำหรับการทำเช่นนี้จะเป็น -

ตัวอย่าง

const arr = [{
   id: 121,
   hobby: 'cycling'
}, {
   id: 125,
   hobby: 'jogging'
}, {
   id: 129,
   hobby: 'reading'
}, {
   id: 121,
   hobby: 'writing'
}, {
   id: 121,
   hobby: 'playing football'
}, {
   id: 125,
   hobby: 'cooking'
}, {
   id: 129,
   hobby: 'horse riding'
}];
const mergeArray = (arr) => {
   return arr.reduce((acc, val) => {
      const ind = acc.findIndex(item => item.id === val.id);
      if(ind !== -1){
         acc[ind].hobby.push(val.hobby);
      }else{
         acc.push({
            id: val.id,hobby: [val.hobby]
      });
   };
   return acc;
}, []);
};
console.log(mergeArray(arr));

ผลลัพธ์

ผลลัพธ์ในคอนโซลจะเป็น -

[
   { id: 121, hobby: [ 'cycling', 'writing', 'playing football' ] },
   { id: 125, hobby: [ 'jogging', 'cooking' ] },
   { id: 129, hobby: [ 'reading', 'horse riding' ] }
]