השוואת מערכים ב‑JavaScript וב‑jQuery – מדריך למתחילים

השוואת שני מערכים ב-JavaScript או jQuery אולי נראית פשוטה, אך בפועל יש יותר מורכבות מאשר שימוש ב-== או ===. מערכים הם טיפוסי רפרנס (reference types), מה שאומר שגם אם הם מכילים את אותם ערכים בדיוק, הם לא ייחשבו שווים אלא אם הם מפנים לאותו אובייקט בזיכרון.

אם אתם רוצים לבדוק האם שני מערכים מכילים את אותם ערכים באותו סדר – עליכם להשוות בין כל איבר בנפרד.

בפוסט הזה נלמד כיצד להשוות מערכים בצורה מדויקת באמצעות JavaScript ו-jQuery. תראו מתי שיטות מובנות לא מספיקות, ואיך לטפל גם בערכים פשוטים וגם במבנים מורכבים. אם אתם חדשים בעבודה עם מערכים, כדאי לקרוא גם את המדריך המלא למערכים ב-JavaScript.

השוואת מערכים ב-JavaScript

JavaScript מציעה כמה דרכים יעילות להשוות בין מערכים, בהתאם לשאלה האם מדובר בערכים פשוטים, אובייקטים, והאם חשוב לכם סדר האיברים. השיטות האלו גם שימושיות כשאתם מסננים מערכים או מבצעים ולידציה.

למה == ו-=== לא עובדים

הנה דוגמה שממחישה מדוע השוואת רפרנס לא מספיקה:

const a = [1, 2, 3];
const b = [1, 2, 3];

console.log(a === b); // false

למרות ששני המערכים נראים זהים, הם שני אובייקטים שונים בזיכרון. לכן התוצאה היא false.

השוואה באמצעות length ו-every()

השיטה הנפוצה ביותר להשוואת מערכים ב-JavaScript:

• בדקו האם האורך של שני המערכים זהה
• השוו כל איבר מול האיבר המתאים באמצעות every()

function arraysEqual(a, b) {
  return a.length === b.length && a.every((val, index) => val === b[index]);
}

const x = [1, 2, 3];
const y = [1, 2, 3];

console.log(arraysEqual(x, y)); // true

השיטה הזו מתאימה למערכים שטוחים שמכילים ערכים פשוטים. רוצים להעמיק? עיינו שוב במדריך למערכים.

השוואה מהירה עם JSON.stringify()

דרך נוספת להשוואה מהירה של מערכים שטוחים היא להפוך אותם למחרוזת:

const a = [1, 2, 3];
const b = [1, 2, 3];

console.log(JSON.stringify(a) === JSON.stringify(b)); // true

השיטה הזו עובדת רק כש:

• המערכים שטוחים (ללא אובייקטים מקוננים)
• סדר האיברים חשוב

השוואת מערכים בלי תלות בסדר

אם סדר האיברים לא משנה לכם, תוכלו למיין את שני המערכים לפני ההשוואה:

function unorderedEqual(a, b) {
  return a.length === b.length &&
    a.sort().every((val, index) => val === b.sort()[index]);
}

console.log(unorderedEqual([1, 2, 3], [3, 2, 1])); // true

שימו לב: sort() משנה את המערך המקורי, אז עדיף לעבוד על עותק. למידע נוסף, עיינו בפוסט שלנו על מיון מערכים ב-JavaScript.

השוואת מערכים של אובייקטים

אם אתם רוצים להשוות מערכים של אובייקטים, אפשר להשתמש ב-JSON.stringify() – כל עוד סדר המפתחות קבוע:

const a = [{ id: 1 }, { id: 2 }];
const b = [{ id: 1 }, { id: 2 }];

console.log(JSON.stringify(a) === JSON.stringify(b)); // true

השתמשו בשיטה הזו רק כאשר סדר המפתחות זהה בשני האובייקטים.

השוואת מערכים עם jQuery

jQuery לא כוללת פונקציה מובנית להשוואת מערכים, אך ניתן לבצע זאת בשילוב בין $.each() ופונקציות JavaScript רגילות. אם אתם כבר עובדים עם jQuery עבור DOM או טיפול באירועים – השיטות האלו ישתלבו היטב בקוד שלכם.

השוואה ידנית עם $.each

כך ניתן להשוות בין שני מערכים בעזרת לולאה שמשווה כל ערך מול הערך המקביל:

function arraysEqual(a, b) {
  if (a.length !== b.length) return false;

  var equal = true;
  $.each(a, function(index, value) {
    if (value !== b[index]) {
      equal = false;
      return false; // עצור את הלולאה
    }
  });

  return equal;
}

var a = [1, 2, 3];
var b = [1, 2, 3];

console.log(arraysEqual(a, b)); // true

השוואה מבלי להתחשב בסדר

אם סדר האיברים לא משנה – ניתן למיין את המערכים לפני ההשוואה:

function unorderedEqual(a, b) {
  if (a.length !== b.length) return false;

  a.sort();
  b.sort();

  var equal = true;
  $.each(a, function(index, value) {
    if (value !== b[index]) {
      equal = false;
      return false;
    }
  });

  return equal;
}

console.log(unorderedEqual([3, 2, 1], [1, 2, 3])); // true

השוואת מערכים של אובייקטים ב-jQuery

גם בפרויקטים מבוססי jQuery ניתן להשתמש ב-JSON.stringify() להשוואת מערכים של אובייקטים:

var a = [{ id: 1 }, { id: 2 }];
var b = [{ id: 1 }, { id: 2 }];

console.log(JSON.stringify(a) === JSON.stringify(b)); // true

השיטה הזו עובדת כל עוד מבנה האובייקטים וסדר המפתחות זהים.

סיכום

השוואת מערכים דורשת יותר מסתם שימוש ב-== או ===. ב-JavaScript תוכלו להשתמש ב-every() או JSON.stringify() להשוואת מערכים שטוחים, וב-sort אם הסדר לא חשוב. ב-jQuery, אפשר לבצע את אותן ההשוואות בעזרת $.each() ולוגיקה ידנית.

רוצים להעמיק עוד? עיינו בפוסט שלנו על הסרת כפילויות ממערכים ב-JavaScript ו-jQuery.