เรียงลำดับอาร์เรย์ของออบเจ็กต์ตามสองคุณสมบัติใน JavaScript

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

const arr = [
  { resVal: "25FA15", resFlow: 49, resName: "Rendimiento Tri-Seal  Completo", resPhoto: "Tri-Sealseries.png", resHP: 1.5 },
  { resVal: "25FA2", resFlow: 52, resName: "Rendimiento Tri-Seal  Completo", resPhoto: "Tri-Sealseries.png", resHP: 2 },
  { resVal: "45FA2", resFlow: 53, resName: "Rendimiento Hi-Cap  Completo", resPhoto: "HighCapseries.png", resHP: 2 },
  { resVal: "35FA2", resFlow: 59, resName: "Rendimiento Hi-Cap  Completo", resPhoto: "HighCapseries.png", resHP: 2 }
];

เราต้องเขียนฟังก์ชัน JavaScript ที่รับอาร์เรย์ของออบเจ็กต์ดังกล่าว ฟังก์ชันควรเรียงลำดับอาร์เรย์นี้ตามสองคุณสมบัติที่แตกต่างกัน:

• เรียงตามค่า "resFlow" ที่สูงกว่า
• แต่ด้วยค่า "resHP" ที่ต่ำที่สุด

วิธีการ

เราใช้วิธีการแบบ chained สำหรับลำดับของคีย์ที่ระบุและลำดับการเรียง

อาร์เรย์ถูกเรียงตามคุณสมบัติ:

• resHP, ascending (น้อยไปมาก)
• resFlow, descending (มากไปน้อย)

ทำงานโดยการคำนวณ delta และสะท้อนความสัมพันธ์ของสองออบเจ็กต์ หากค่าเป็นศูนย์ แสดงว่าค่าทั้งสองเท่ากัน และ delta ถัดไปจะถูกคำนวณและคืนค่า

ตัวอย่าง

โค้ดสำหรับนี้จะเป็นดังนี้:

const arr = [
  { resVal: "25FA15", resFlow: 49, resName: "Rendimiento Tri-Seal  Completo", resPhoto: "Tri-Sealseries.png", resHP: 1.5 },
  { resVal: "25FA2", resFlow: 52, resName: "Rendimiento Tri-Seal  Completo", resPhoto: "Tri-Sealseries.png", resHP: 2 },
  { resVal: "45FA2", resFlow: 53, resName: "Rendimiento Hi-Cap  Completo", resPhoto: "HighCapseries.png", resHP: 2 },
  { resVal: "35FA2", resFlow: 59, resName: "Rendimiento Hi-Cap  Completo", resPhoto: "HighCapseries.png", resHP: 2 }
];

const sortByTwo = (arr = []) => {
  arr.sort((a, b) => {
    return a.resHP - b.resHP || b.resFlow - a.resFlow;
  });
};

sortByTwo(arr);
console.log(arr);

ผลลัพธ์

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

[
  {
    resVal: '25FA15',
    resFlow: 49,
    resName: 'Rendimiento Tri-Seal Completo',
    resPhoto: 'Tri-Sealseries.png',
    resHP: 1.5
  },
  {
    resVal: '35FA2',
    resFlow: 59,
    resName: 'Rendimiento Hi-Cap Completo',
    resPhoto: 'HighCapseries.png',
    resHP: 2
  },
  {
    resVal: '45FA2',
    resFlow: 53,
    resName: 'Rendimiento Hi-Cap Completo',
    resPhoto: 'HighCapseries.png',
    resHP: 2
  },
  {
    resVal: '25FA2',
    resFlow: 52,
    resName: 'Rendimiento Tri-Seal Completo',
    resPhoto: 'Tri-Sealseries.png',
    resHP: 2
  }
]