חיפוש ]

בדיקה אם ערך מסויים קיים במערך בעזרת JavaScript ו jQuery

כבר כתבתי בעבר פוסט המדבר על מערכים ב 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

השימוש ב ()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).

סִינְטַקְס

array.includes(valueToFind[, fromIndex])

הנה דוגמה עובדת:

// Define an array
const array = [1, 2, 3, 4, 5];

// Check if a value exists in the array
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 עם כל ערך שתרצו לבדוק אם קיים במערך או לא.

עד כאן. נאמר שהפוסט הנוכחי תורגם ברובו מהפוסט הבא ב positronX.io עם מעט תוספות ושינויים.

רועי יוסף
רועי יוסף

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

  • אלי 1 דצמבר 2022, 14:18

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

  • ברוך 8 פברואר 2024, 15:00

    תודה על עוד פוסט מעולה! רציתי לשאול מה עם includes? ראיתי שאתה לא מזכיר את הפונקציה הזו בכלל…

    • רועי יוסף 9 פברואר 2024, 17:17

      היי ברוך, צודק! הפונקציה ()includes מאד שימושית והיא לא הייתה מוזכרת. הוספתי אותה לפוסט.. תודה לך 🙂

תגובה חדשה

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