Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

วิธีเปรียบเทียบ Array ใน JavaScript

ปัญหา: Array ไม่สามารถเปรียบเทียบด้วย === ได้

[1, 2] === [1, 2] // false - Reference ต่างกัน

วิธีที่ 1: หาค่าที่ซ้ำกัน (Intersection) - ตามตัวอย่างต้นฉบับ

<html>
<body>
  <script>
    var arr1 = [50, 60, 65, 90];
    var arr2 = [25, 35, 50, 90];
    
    for (i = 0; i < arr1.length; i++) {
      for (z = 0; z < arr2.length; z++) { // ตัวอย่างต้นฉบับผิด: arr1.length -> arr2.length
        if (arr1[i] === arr2[z]) {
          document.write("<br>Matched element: " + arr2[z]);
        }
      }
    }
  </script>
</body>
</html>

ผลลัพธ์

Matched element: 50
Matched element: 90

วิธีที่ 2: ใช้ filter() + includes() (ES6+) - แนะนำ

const arr1 = [50, 60, 65, 90];
const arr2 = [25, 35, 50, 90];

const intersection = arr1.filter(x => arr2.includes(x));
console.log(intersection); // [50, 90]

วิธีที่ 3: ใช้ Set (Performance ดีกว่าสำหรับ Array ใหญ่)

const arr1 = [50, 60, 65, 90];
const arr2 = [25, 35, 50, 90];

const set2 = new Set(arr2);
const intersection = arr1.filter(x => set2.has(x));
console.log(intersection); // [50, 90] - O(n+m) แทน O(n*m)

วิธีที่ 4: ตรวจสอบว่า Array เท่ากันหมด (Deep Equality)

function arraysEqual(a, b) {
  if (a.length !== b.length) return false;
  for (let i = 0; i < a.length; i++) {
    if (a[i] !== b[i]) return false;
  }
  return true;
}

// หรือใช้ JSON.stringify (มีข้อจำกัด: Order สำคัญ, ไม่รองรับ Object ซ้อนที่มี Key Order ต่างกัน)
JSON.stringify(arr1) === JSON.stringify(arr2);

// Lodash: _.isEqual(arr1, arr2) - รองรับ Deep Equality จริง

วิธีที่ 5: Symmetric Difference (ค่าที่อยู่ในฝั่งเดียว)

const diff = [...arr1.filter(x => !arr2.includes(x)), ...arr2.filter(x => !arr1.includes(x))];
// หรือใช้ Set
const set1 = new Set(arr1), set2 = new Set(arr2);
const diff = [...arr1.filter(x => !set2.has(x)), ...arr2.filter(x => !set1.has(x))];

ตารางเปรียบเทียบ

เป้าหมาย วิธีแนะนำ Complexity
หาค่าซ้ำ (Intersection)arr1.filter(x => set2.has(x))O(n+m)
เช็คเท่ากันทั้ง ArrayLoop / JSON.stringify / _.isEqualO(n)
หาค่าที่ต่างกัน (Difference)filter + SetO(n+m)

สรุป

สำหรับหาค่าที่ซ้ำกัน (Intersection) ใช้ filter() + Set เพื่อ Performance ดีที่สุด สำหรับเช็ค Equality ให้ Loop ผ่าน Index หรือใช้ Library เช่น Lodash