כבר כתבתי בעבר פוסט המדבר על מערכים ב 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 עם כל ערך שתרצו לבדוק אם קיים במערך או לא.
עד כאן.
קודם נתחיל אם זה שהצלת אותי.. ההסבר מעל ומעבר לא מוצאים פוסט בעברית ברמה כזאת בקיצור אין מילים. רק שאלה למה אתה משתמש var ולא משתמש ב let?
כיף לשמוע 🙂 אשנה זאת ל Let לבקשתך…
תודה על עוד פוסט מעולה! רציתי לשאול מה עם includes? ראיתי שאתה לא מזכיר את הפונקציה הזו בכלל…
היי ברוך, צודק! הפונקציה ()includes מאד שימושית והיא לא הייתה מוזכרת. הוספתי אותה לפוסט.. תודה לך 🙂