15 שיטות מערך JavaScript שכדאי לך לשלוט בהן היום

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

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

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

מהן שיטות מערך?

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

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

let myArray = [1,2,3]; myArray.pop();

קוד זה יחיל שיטה הנקראת פּוֹפּ למערך.

מערך לדוגמה

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

let myArray = [2,4,5,7,9,12,14];

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

חפרו בחמש עשרה שיטות המערך החזקות האלה!

1. Array.push ()

מה שזה עושה: לִדחוֹף() לוקח את המערך שלך ומוסיף אלמנט אחד או יותר לקצה המערך, ואז מחזיר את האורך החדש של המערך. שיטה זו תשנה את המערך הקיים שלך.

הוסף את המספר 20 למערך על ידי הפעלה לִדחוֹף() , באמצעות 20 כטענה.

let myArray = [2,4,5,7,9,12,14];  
myArray.push(20);

בדוק אם זה עבד:

console.log(myArray); [2,4,5,7,9,12,14,20]

מפעיל את לִדחוֹף() method on myArray הוסיף את הערך שניתן בארגומנט למערך. במקרה זה, 20. כאשר תבדוק את myArray בקונסולה, תראה שהערך מתווסף כעת לקצה המערך.

2. Array.concat ()

מה שזה עושה: קונקט () יכול למזג שני מערכים או יותר למערך חדש. הוא אינו משנה את המערכים הקיימים אלא יוצר מערך חדש.

לקחת myArray ולמזג מערך שנקרא newArray לתוך זה.

let myArray = [2,4,5,7,9,12,14];  
let newArray = [1,2,3];  
let result = myArray.concat(newArray);

console.log(result); [2,4,5,7,9,12,14,1,2,3]

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

3. Array.join ()

מה שזה עושה: לְהִצְטַרֵף() לוקח מערך ומחבר את תוכן המערך, מופרד בפסיק. התוצאה ממוקמת במחרוזת. תוכל לציין מפריד אם ברצונך להשתמש בחלופה לפסיק.

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

let myArray = [2,4,5,7,9,12,14];  
myArray.join();

'2,4,5,7,9,12,14'

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

myArray.join(' ');  
'2 4 5 7 9 12 14'

myArray.join(' and ');  
'2 and 4 and 5 and 7 and 9 and 12 and 14'

הדוגמה הראשונה היא רווח, ויוצר מחרוזת שתוכל לקרוא בקלות.

הדוגמה השנייה משתמשת ('ו') ויש כאן שני דברים שכדאי לדעת.

ראשית, אנו משתמשים במילה 'ו' להפרדת הערכים. שנית, יש רווח משני צידי המילה 'ו'. זה דבר שחשוב לזכור בעת השימוש לְהִצְטַרֵף() . JavaScript קורא טיעונים פשוטו כמשמעו; כך שאם שטח זה יישאר בחוץ, הכל ייקרס ביחד (כלומר '2and4and5 ...' וכו ') לא פלט קריא במיוחד!

4. Array.forEach ()

מה שזה עושה: לכל אחד() (תלוי רישיות!) מבצע פונקציה על כל פריט במערך שלך. פונקציה זו היא כל פונקציה שאתה יוצר, בדומה לשימוש בלולאת 'עבור' להחלת פונקציה על מערך אך עם הרבה פחות עבודה לקוד.

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

  
myArray.forEach(function(item){  
//code  
});

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

הבט ב פונקציה (פריט) . זוהי הפונקציה המבוצעת בתוך forEach (), ויש לה טענה משלה. אנו קוראים לטיעון פריט . על טיעון זה יש לדעת שני דברים:

כאשר forEach () מחליק על המערך שלך, הוא מחיל את הקוד על הארגומנט הזה. תחשוב על זה כעל משתנה זמני שמחזיק את האלמנט הנוכחי.
אתה בוחר את שם הטיעון, ניתן לקרוא לו בכל מה שאתה רוצה. בדרך כלל זה ייקרא משהו שמקל על ההבנה, כמו 'פריט' או 'אלמנט'.

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

  
myArray.forEach(function(item){  
 console.log(item + 15);  
});

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

התוצאה היא כל מספר במערך, אך עם 15 נוספו אליו!

5. Array.map ()

מה שזה עושה: מַפָּה() מבצע פונקציה על כל אלמנט במערך שלך וממקם את התוצאה במערך חדש.

הפעלת פונקציה על כל אלמנט נשמעת כמו ForEach (). ההבדל כאן הוא מַפָּה() יוצר מערך חדש בעת הפעלה. forEach () אינו יוצר מערך חדש באופן אוטומטי, יהיה עליך לקודד פונקציה ספציפית לשם כך.

השתמש במפה () כדי להכפיל את הערך של כל אלמנט ב- myArray, והנח אותם במערך חדש. אתה תראה אותו דבר פונקציה (פריט) תחביר לעוד קצת תרגול.

let myArray = [2,4,5,7,9,12,14];

let doubleArray = myArray.map(function(item){  
return item * 2;  
});

בדוק את התוצאות בקונסולה.

console.log(doubleArray); [4,8,10,14,18,24,28]

myArray הוא ללא שינוי:

console.log(myArray); [2,4,5,7,9,12,14]

6. Array.unshift ()

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

let myArray = [2,4,5,7,9,12,14];  
myArray.unshift(0);

בעת רישום המערך לקונסולה, אתה אמור לראות את המספר 0 בתחילת המערך.

console.log(myArray); [0, 2,4,5,7,9,12,14]

7. Array.sort ()

מה זה עושה: מיון הוא אחת הפעולות הנפוצות ביותר המתבצעות במערך והוא שימושי ביותר. של JavaScript סוג() ניתן להשתמש בשיטת מערך למיון מערך מספרים או אפילו מחרוזות בעזרת שורת קוד אחת בלבד. פעולה זו קיימת ומחזירה את המערך הממוין על ידי שינוי המערך הראשוני. קח סט מספרים אחר עבור myArray הפעם.

let myArray = [12, 55, 34, 65, 10];  
myArray.sort((a,b) => a - b);

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

console.log(myArray); [10, 12, 34, 55, 65]

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

8. Array.reverse ()

מה זה עושה: כפי שהשם מרמז, ה לַהֲפוֹך() שיטה משמשת להפוך את סדר האלמנטים במערך. שים לב שזה לא הופך את תוכן המערך אלא רק את הסדר עצמו. להלן דוגמא להבנת שיטה זו טוב יותר:

let myArray = [2,4,5,7,9,12,14];  
myArray.reverse()

רשום את הפלט למסוף כדי לאמת את הפעולה.

console.log(myArray); [14, 12, 9, 7, 5, 4, 2]

כפי שאתה יכול לראות, סדר היסודות התהפך. בעבר, האלמנט במדד האחרון (אלמנט 14 באינדקס 6) הוא כעת האלמנט במדד האפס וכן הלאה.

9. Array.slice ()

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

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

let myArray = [2,4,5,7,9,12,14];  
let slicedArray = myArray.slice(2);

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

console.log(myArray);  
console.log(slicedArray);

[2, 4, 5, 7, 9, 12, 14]  
[5, 7, 9, 12, 14]

ככל הנראה, המערך ההתחלתי אינו משתנה בשיטת slice () ובמקום זאת מחזיר מערך חדש המאוחסן ב- פרוס Array מִשְׁתַנֶה. להלן דוגמה שבה פרמטר אינדקס הסיום מועבר גם אל פרוסה() שיטה.

let myArray = [2,4,5,7,9,12,14];  
let slicedArray = myArray.slice(1, 3);  
console.log(slicedArray);

[4, 5]

10. Array.splice ()

מה שזה עושה: אִחוּי() היא שיטת מערך מועילה המשמשת להסרה או החלפה של אלמנטים במערך במקום. על ידי ציון האינדקס ומספר האלמנטים למחיקה, הוא משנה את המערך.

let myArray = [2,4,5,7,9,12,14];  
myArray.splice(2, 3);  
console.log(myArray);

בדוגמה לעיל, myArray מערך מפוזר ממדד 2 ו -3 אלמנטים מוסרים ממנו. המערך מורכב כעת מ:

[2, 4, 12, 14]

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

חלונות 10 wifi מחובר אך אין אינטרנט

let myArray = [2,4,5,7,9,12,14];  
myArray.splice(2, 3, 1, 2, 3);  
console.log(myArray);

[2, 4, 1, 2, 3, 12, 14]

11. Array.filter ()

מה זה עושה: ה לְסַנֵן() method היא שיטת מערך שימושית שלוקחת פונקציה המכילה בדיקה ומחזירה מערך חדש עם כל האלמנטים שעוברים את הבדיקה. נכון לשמה, שיטה זו משמשת לסינון האלמנטים הדרושים לך מהרכיבים האחרים. הסינון מתבצע באמצעות פונקציה המחזירה ערך בוליאני.

להלן דוגמא ל לְסַנֵן() שיטה המשמשת לקבל רק את האלמנטים מהמערך המתחלקים ב -2.

let myArray = [2,4,5,7,9,12,14];  
let divisibleByTwo = myArray.filter((number) => number % 2 === 0);  
console.log(divisibleByTwo);

בדוגמה שלעיל, פונקציית חץ מועברת כפרמטר שלוקח כל מספר מהמערך המקורי ובודק אם הוא מתחלק ב -2 באמצעות המודולו ( % ) ו שוויון ( === ) מפעיל. כך נראה הפלט:

[2, 4, 12, 14]

12. Array.reduce ()

מה שזה עושה: לְהַפחִית() היא שיטת מערך שלוקחת פונקציית צמצום ומבצעת אותה על כל רכיב מערך כדי להפיק ערך יחיד תוך החזרה. זה לוקח פונקציית צמצום עם משתנה מצבר ומשתנה של רכיב הנוכחי כפרמטרים נדרשים. ערך הצובר זכור בכל האיטרציות ולבסוף מוחזר לאחר האיטרציה הסופית.

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

let myArray = [2,4,5,7,9,12,14];  
let sumOfNums = myArray.reduce((sum, currentNum) => sum + currentNum, 0);

0 מועבר כפרמטר השני בדוגמה שלמעלה, המשמש כערך ההתחלתי של משתנה הצובר. ה sumOfNums משתנה יכיל את ערך ההחזרה של לְהַפחִית() שיטה שצפויה להיות סכום כל האלמנטים במערך.

console.log(sumOfNums); 53

13. מערך. כולל ()

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

let myArray = [2,4,5,7,9,12,14];  
console.log(myArray.includes(4));  
console.log(myArray.includes(2, 1));  
console.log(myArray.includes(12, 2));  
console.log(myArray.includes(18));

שיטה זו דורשת פרמטר נדרש, האלמנט לחיפוש ופרמטר אופציונלי, אינדקס המערך שממנו ניתן להתחיל לחפש. תלוי אם רכיב זה קיים או לא, הוא יחזור נָכוֹן אוֹ שֶׁקֶר בהתאמה. לכן הפלט יהיה:

true  
false  
true  
false

14. Array.indexOf ()

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

let myArray = [2,4,5,7,9,12,14];  
console.log(myArray.indexOf(4));  
console.log(myArray.indexOf('4'));  
console.log(myArray.indexOf(9, 2));

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

1  
-1  
4

15. Array.fill ()

מה זה עושה: לעתים, ייתכן שיהיה עליך להגדיר את כל הערכים במערך לערך סטטי כגון 0. במקום להשתמש בלולאה, תוכל לנסות את למלא() שיטה לאותה מטרה. אתה יכול לקרוא לשיטה זו על מערך עם פרמטר אחד נדרש: הערך למילוי המערך ו -2 פרמטרים אופציונליים: אינדקס ההתחלה והסיום למילוי ביניהם. שיטה זו משנה את המערך היוצא.

let myArray = [2,4,5,7,9,12,14];  
let array1 = myArray.fill(0);  
myArray = [2,4,5,7,9,12,14];  
let array2 = myArray.fill(0, 2);  
myArray = [2,4,5,7,9,12,14];  
let array3 = myArray.fill(0, 1, 3);

בעת רישום הפלט לקונסולה, תראה:

console.log(array1);  
console.log(array2);  
console.log(array3);

[0, 0, 0, 0, 0, 0, 0]  
[2, 4, 0, 0, 0, 0, 0]  
[2, 0, 0, 7, 9, 12, 14]

השלבים הבאים במסע ה- JavaScript שלך

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

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

לַחֲלוֹק לַחֲלוֹק צִיוּץ אימייל 6 מסגרות JavaScript ששווה ללמוד

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

קרא הבא נושאים קשורים

תִכנוּת
JavaScript
טיפים לקידוד

על הסופר ניטין רנגנת(31 מאמרים פורסמו)

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

עוד מאת ניטין רנגנת

הירשם לניוזלטר שלנו

הצטרף לניוזלטר שלנו לקבלת טיפים, סקירות, ספרים אלקטרוניים בחינם ומבצעים בלעדיים!

לחצו כאן להרשמה