จัดกลุ่มค่าในอาร์เรย์ตามสอง property ด้วย JavaScript

เรามีอาร์เรย์ของอ็อบเจกต์ดังนี้:

const arr = [
  { value: 12, gap: 1 },
  { value: 13, gap: 1 },
  { value: 14, gap: 1 },
  { value: 15, gap: 1 },
  { value: 19, gap: 2 },
  { value: 21, gap: 1 },
  { value: 22, gap: 1 },
  { value: 23, gap: 1 },
  { value: 27, gap: 1 },
  { value: 31, gap: 4 },
  { value: 35, gap: 4 },
  { value: 39, gap: 4 },
  { value: 43, gap: 1 },
  { value: 50, gap: 1 },
  { value: 51, gap: 1 },
  { value: 52, gap: 1 },
  { value: 55, gap: 1 },
  { value: 57, gap: 1 }
];

เราต้องเขียนฟังก์ชันที่รับอาร์เรย์นี้และคืนค่าอาร์เรย์ใหม่ที่อ็อบเจกต์ที่ติดกันซึ่ง value เท่ากับผลรวมของ value และ gap ของอ็อบเจกต์ก่อนหน้า จะถูกจัดกลุ่มร่วมกันในซับอาร์เรย์

ตัวอย่าง - อ็อบเจกต์ที่มี value 12 มี gap 1 และอ็อบเจกต์ถัดไปมี value 13 จึงต้องจัดกลุ่มร่วมกัน รวมถึงอ็อบเจกต์ value 14 และ 15 ด้วยเช่นกัน

ตอนนี้เข้าใจปัญหาแล้ว มาเขียนโค้ดกัน เราจะใช้ Array.prototype.reduce() เพื่อสร้างอาร์เรย์ที่ต้องการ:

ตัวอย่างโค้ด

const arr = [
  { value: 12, gap: 1 },
  { value: 13, gap: 1 },
  { value: 14, gap: 1 },
  { value: 15, gap: 1 },
  { value: 19, gap: 2 },
  { value: 21, gap: 1 },
  { value: 22, gap: 1 },
  { value: 23, gap: 1 },
  { value: 27, gap: 1 },
  { value: 31, gap: 4 },
  { value: 35, gap: 4 },
  { value: 39, gap: 4 },
  { value: 43, gap: 1 },
  { value: 50, gap: 1 },
  { value: 51, gap: 1 },
  { value: 52, gap: 1 },
  { value: 55, gap: 1 },
  { value: 57, gap: 1 }
];

const groupArray = arr => {
  return arr.reduce((acc, val, ind, array) => {
    const { data, currentIndex } = acc;
    const { value, gap } = val;
    const v = arr[ind - 1]?.value;
    const g = arr[ind - 1]?.gap;
    if (ind === 0 || value !== v + g) {
      const index = data.push([val]) - 1;
      return { data, currentIndex: index };
    }
    data[currentIndex].push(val);
    return { data, currentIndex };
  }, {
    data: [],
    currentIndex: 0
  }).data;
};

console.log(groupArray(arr));

ผลลัพธ์

ผลลัพธ์ในคอนโซลจะเป็นดังนี้:

[
  [
    { value: 12, gap: 1 },
    { value: 13, gap: 1 },
    { value: 14, gap: 1 },
    { value: 15, gap: 1 }
  ],
  [
    { value: 19, gap: 2 },
    { value: 21, gap: 1 },
    { value: 22, gap: 1 },
    { value: 23, gap: 1 }
  ],
  [{ value: 27, gap: 1 }],
  [
    { value: 31, gap: 4 },
    { value: 35, gap: 4 },
    { value: 39, gap: 4 },
    { value: 43, gap: 1 }
  ],
  [
    { value: 50, gap: 1 },
    { value: 51, gap: 1 },
    { value: 52, gap: 1 }
  ],
  [{ value: 55, gap: 1 }],
  [{ value: 57, gap: 1 }]
]