Search

משחק עם מערכים בג'אווה סקריפט (JavaScript Arrays)

לבטח אתם יודעים כי ב JavaScript אנו משתמשים במערכים (arrays) בכדי לשמור מספר ערכים במשתנה אחד. במערך JavaScript לכל אלמנט קיים מספר (אינדקס/Index), כאשר אינדקס של מערך מתחיל מאפס ועולה מעלה באחדות, כלומר 0,1,2,3 וכך הלאה. האינדקס הוא בעצם המזהה של הפריטים באותו מערך.

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

1. כיצד ליצור מערך ב JavsScript?

ניתן להשתמש בסימונים [ ] בכדי ליצור מערך ב Javascript.

var cars = ['Tesla', 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche'];

console.log(cars)
// ['Tesla', 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche']

2. כיצד לבדוק את מספר הפריטים במערך Javascript?

ניתן לבדוק את המספר הטוטאלי של הפריטים במערך (array length) באמצעות המתודה המופיעה מטה.

var cars = ['Tesla', 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche'];

console.log(cars.length)
// 8

3. כיצד לגשת למערך JavaScript באמצעות מספר האינדקס?

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

var cars = ['Tesla', 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche'];

console.log(cars[0])
// Tesla

console.log(cars[4])
// Ford

console.log(cars[6])
// Nissan

4. כיצד לגשת לפריט האחרון במערך JavaScript?

ניתן לגשת לפריט האלרון במערך באמצעות המתודה המופיעה מטה.

var cars = ['Tesla', 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche'];

console.log(cars[cars.length - 1])
// Porsche

5. כיצד לרוץ עם לולאה על מערך ב Javascript?

זו הדרך הטובה והמודרנית ביותר לבצע לולאה על מערך JavaScript.

var cars = ['Tesla', 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche'];

cars.forEach(function(arrayItem, index){
  console.log(arrayItem, index)
})

// Tesla 0
// Toyota 1
// BMW 2
// Honda 3
// Ford 4
// Hyundai 5
// Nissan 6
// Porsche 7

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

6. כיצד להוסיף פריט לתחילתו של מערך JavaScript?

ניתן להוסיף פריט לתחילתו של מערך בצורה הבאה:

var cars = ['Tesla', 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche'];

// unshift() method adds 'Mercedes' to the starting of 'cars' array
var newArray = cars.unshift('Mercedes') 

console.log(cars)

// New cars array
// [ 'Mercedes', 'Tesla', 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche' ]

7. כיצד להסיר פריט מתחילתו של מערך JavaScript?

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

var cars = ['Tesla', 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche'];

// shift() method removes the first item from the array
var newArray = cars.shift() 

console.log(cars)

// New cars array
// Tesla has been removed from the array
// [ 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche' ]

8. כיצד למצוא את האינדקס של פריט במערך JavaScript?

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

var cars = ['Tesla', 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche'];

// indexOf() method returns the index number of an item in an array
var getBMWIndex = cars.indexOf('BMW');
var getHyundaiIndex = cars.indexOf('Hyundai');
var getPorscheIndex = cars.indexOf('Porsche');

console.log(getBMWIndex)
// 2

console.log(getHyundaiIndex)
// 5

console.log(getPorscheIndex)
// 7

לסיכום

במדריך זה תיארנו את הפיצ׳רים הבסיסים והמתודות של מערך ב JavaScript. למדנו ליצור מערך, לגשת לפריטים במערך, למצוא מיקום של פריט במערך, להסיר ולהוסיף פריט למערך, ואף לבצע לולאה (loop) על מערך ב JavaScript.

תוכלו אגב למצוא מידע נוסף על מערכים ב JavaScript ב MDN Web Docs.

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

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

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

  • עטרה י 19 אוגוסט 2020, 18:36

    מה העניין בהצהרה על המשתנה newArray בדוגמאות 6 ו- 7, הוא לא מיותר? הקוד יעבוד גם בלי המשתנה, הלא כן?

    • רועי יוסף 21 אוגוסט 2020, 21:16

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

  • שני 3 מרץ 2024, 9:18

    היי איך נגשים למערך שנתון כבר? ולא מערך שאני יצרתי

    • רועי יוסף 6 מרץ 2024, 0:48

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

תגובה חדשה

ניווט מהיר

Up!
לבלוג