כבר כתבתי בעבר פוסט המדבר על מערכים ב-JavaScript המסביר את השימוש הבסיסי במערכי JavaScript. בפוסט זה נדבר ספציפית על כיצד לבדוק האם מערך מכיל ערך מסויים או לא.
גם JavaScript וגם jQuery מגיעות עם מתודות מובנות המחזירות את המיקום של ערך כלשהו במערך. בואו נראה את הגישות הנפוצות ביותר.
שימוש בלולאת JavaScript בכדי למצוא פריט במערך
דרך מיושנת למצוא ערך במערך מסויים היא שימוש בלולאה מסוג for. זוהי הלולאה הנוחה ביותר לשימוש כאשר אנו רוצים לבצע איטרציה על מערך. תנו מבט בדוגמה הבאה:
let moviesList = ['The Godfather','Forrest Gump','The Matrix','Inception','Catch Me If You Can','Pulp Fiction'];
function findValueInArray(value,arr){
let result = "Doesn't exist";
for(let i=0; i<arr.length; i++){
let name = arr[i];
if(name == value){
result = 'Exist';
break;
}
}
return result;
}
findValueInArray('Pulp Fiction', moviesList);
// Result : Exist
findValueInArray('Avenger', moviesList);
// Result : Doesn't exist
כפי שציינו, זוהי דרך מיושנת בכדי למצוא פריט במערך. כעת נראה את הדרך לעשות זאת באופן פשוט יותר באמצעות אותן מתודות מובנות המגיעות עם JavaScript ו-jQuery.
השימוש ב-Array.indexOf()
המתודה Array.indexOf() ב-JavaScript עוזרת לנו למצוא פריט במערך. אם ה״פריט״ נמצא במערך המתודה תחזיר לנו את אינדקס מיקום הפריט (Index Position), ואם פריט זה אינו קיים היא תחזיר לנו את הערך '-1'.
המתודה עובדת גם עבור מערכים (arrays) וגם עבור מחרוזות (strings).
סינטקס
array-or-string.indexOf()והנה דוגמה בפעולה:
let moviesList = ['The Godfather','Forrest Gump','The Matrix','Inception','Catch Me If You Can','Pulp Fiction'];
let string = "Catch Me If You Can";
// Find in Array
moviesList.indexOf('Pulp Fiction');
// Result: 5
moviesList.indexOf('The Nun');
// Result: -1
// Find in String
string.indexOf('M');
// Result: 6יש לציין כי indexOf() משתמשת בהשוואה מחמירה (strict comparison) ואינה מסוגלת לזהות ערכי NaN. אם אתם צריכים לבדוק עבור NaN במערך, השתמשו ב-includes() במקום.
השימוש ב-jQuery.inArray()
המתודה jQuery.inArray() עובדת באופן דומה. היא תחזיר את אינדקס המיקום במידה ותמצא את הערך שחיפשנו, ולחילופין תחזיר '-1' אם הערך לא קיים במערך.
גם מתודה זו עובדת עבור מערכים (arrays) ועבור מחרוזות (strings).
סינטקס
jQuery.inArray( value, array [, fromIndex ] )והנה דוגמה בפעולה:
<html lang="en">
<head>
<!-- Include jQuery Here to test... -->
</head>
<body>
<div>"John" found at <span></span></div>
<div>4 found at <span></span></div>
<div>"Karl" not found, so <span></span></div>
<div>"Pete" is in the array, but not at or after index 2, so <span></span></div>
<script>
let arr = [4, "Pete", 8, "John"];
let $spans = $("span");
$spans.eq(0).text(jQuery.inArray("John", arr));
$spans.eq(1).text(jQuery.inArray(4, arr));
$spans.eq(2).text(jQuery.inArray("Karl", arr));
$spans.eq(3).text(jQuery.inArray("Pete", arr, 2));
</script>
</body>
</html>כשהתוצאה של קוד זה תהיה זו:
// Result: "John" found at 3
// Result: 4 found at 0
// Result: "Karl" not found, so -1
// Result: "Pete" is in the array, but not at or after index 2, so -1שימוש במתודה includes()
שיטה נוספת ופשוטה יותר לבדוק אם ערך מסוים נמצא במערך היא שימוש במתודה Array.includes(). המתודה includes() בודקת האם ערך מסויים קיים בערכי המערך ומחזירה true או false בהתאמה.
מתודה זו עובדת גם היא עבור מערכים (arrays) וגם עבור מחרוזות (strings). בשונה מ-
indexOf(), היא מזהה כראוי ערכיNaN.
סינטקס
array.includes(valueToFind[, fromIndex])הנה דוגמה עובדת:
const array = [1, 2, 3, 4, 5];
const value = 3;
if (array.includes(value)) {
console.log(`${value} exists in the array.`);
} else {
console.log(`${value} does not exist in the array.`);
}בדוגמה זו, המתודה array.includes(value) תחזיר true אם הערך 3 קיים במערך, אחרת היא תחזיר false. ניתן כמובן להחליף את value עם כל ערך שתרצו לבדוק אם קיים במערך או לא.
שימוש ב-Array.find() ו-Array.some()
כאשר אתם צריכים שליטה רבה יותר על לוגיקת ההתאמה, למשל חיפוש בתוך מערך של אובייקטים, Array.find() ו-Array.some() הם הכלים המתאימים.
Array.find() מחזירה את האלמנט הראשון שעומד בתנאי הפונקציה שהוגדרה, או undefined אם לא נמצאה התאמה:
const users = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 35 }
];
const user = users.find(u => u.name === 'Bob');
console.log(user);
// Result: { name: 'Bob', age: 30 }Array.some() מחזירה ערך בוליאני – true אם לפחות אלמנט אחד עומד בתנאי, false אחרת. חשבו על זה כמו includes() אבל עם פונקציית callback:
const users = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 35 }
];
const hasAdult = users.some(u => u.age >= 30);
console.log(hasAdult);
// Result: trueבאיזו מתודה כדאי להשתמש?
הנה פירוט קצר של מתי כדאי להשתמש בכל מתודה:
includes()– הטובה ביותר לבדיקות קיום פשוטות. מחזירה ערך בוליאני, מזההNaN, והיא האופציה הקריאה ביותר.indexOf()– כאשר אתם צריכים את המיקום (אינדקס) של הערך במערך, ולא רק אם הוא קיים.find()– כאשר מחפשים במערכים של אובייקטים או כשאתם צריכים את האלמנט התואם עצמו.some()– כאשר אתם צריכים תוצאה בוליאנית אבל עם לוגיקת התאמה מותאמת אישית (כמו חיפוש לפי מאפיין של אובייקט).jQuery.inArray()– רק אם אתם כבר משתמשים ב-jQuery בפרויקט שלכם. לפרויקטים חדשים, עדיפו מתודות JavaScript מובנות.
שאלות נפוצות
שאלות נפוצות בנושא בדיקת ערכים במערכי JavaScript:
indexOf() לבין includes() ב-JavaScript?
indexOf() מחזירה את אינדקס המיקום של הערך (או -1 אם לא נמצא), בעוד ש-includes() מחזירה ערך בוליאני (true או false). הבדל מרכזי נוסף הוא ש-includes() מסוגלת לזהות ערכי NaN, בעוד ש-indexOf() לא.Array.find() בכדי לקבל את האובייקט התואם, או ב-Array.some() בכדי לקבל תוצאה בוליאנית. למשל: users.find(u => u.name === 'Bob') מחזירה את האובייקט אם נמצא, או undefined אם לא. מתודות אלו מקבלות פונקציית callback כך שניתן להתאים לפי כל מאפיין.jQuery.inArray() עדיין רלוונטית?
jQuery.inArray() עדיין עובדת ומתאימה לשימוש בפרויקטים קיימים של jQuery. עם זאת, לפרויקטים חדשים, עדיף להשתמש במתודות JavaScript מובנות כמו includes(), indexOf(), find() ו-some() מכיוון שאינן דורשות ספרייה חיצונית ונתמכות בכל הדפדפנים המודרניים.includes() יכולה לבדוק אובייקטים במערך?
includes() משתמשת בהשוואה מחמירה (===) שבודקת זהות רפרנס עבור אובייקטים. שני אובייקטים עם אותם מאפיינים לא ייחשבו שווים אלא אם הם אותו רפרנס בדיוק. לחיפוש אובייקטים, השתמשו ב-Array.find() או Array.some() עם callback שמשווה את המאפיינים הרלוונטיים.Set תחילה: const mySet = new Set(myArray). לאחר מכן השתמשו ב-mySet.has(value) לחיפוש ב-O(1) במקום O(n). לבדיקות חד-פעמיות על מערכים קטנים יותר, includes() מהירה מספיק וקריאה יותר.סיכום
JavaScript מספקת מספר מתודות מובנות לבדיקה אם ערך קיים במערך. לבדיקות פשוטות, includes() היא הגישה הקריאה והמומלצת ביותר. השתמשו ב-indexOf() כאשר אתם צריכים את המיקום, וב-find() או some() כאשר עובדים עם אובייקטים או תנאים מורכבים. אם אתם בפרויקט jQuery, jQuery.inArray() נשארת אופציה תקפה.
למידע נוסף על עבודה עם מערכים, תנו מבט בפוסט על מיון מערכים ב-JavaScript וכיצד להסיר כפילויות ממערך.
קודם נתחיל אם זה שהצלת אותי.. ההסבר מעל ומעבר לא מוצאים פוסט בעברית ברמה כזאת בקיצור אין מילים. רק שאלה למה אתה משתמש var ולא משתמש ב let?
כיף לשמוע 🙂 אשנה זאת ל Let לבקשתך…
תודה על עוד פוסט מעולה! רציתי לשאול מה עם includes? ראיתי שאתה לא מזכיר את הפונקציה הזו בכלל…
היי ברוך, צודק! הפונקציה ()includes מאד שימושית והיא לא הייתה מוזכרת. הוספתי אותה לפוסט.. תודה לך 🙂
יש לי שאלה- אם יש לי מערך אובייקטים – נגיד אובייקט עם שם פרטי ות"ז איך אני מחפשת בתוך המערך הזה את האובייקט עם ת"ז מסוימת?
היי. נניח ויש לך מערך כזה:
ונניח ואת רוצה למצוא את האובייקט עם ת”ז מסוימת (למשל ‘987654321’), אז ניתן לעשות זאת באמצעות find:
ואם אין אובייקט כזה אז find יחזיר undefined:
תודה רבה!! עזרת לי מאוד בפרוייקט גמר . נעזרתי המון בפונקציות ובכלל באתר…
שמח לשמוע יעל 🙂