משחק עם מערכים בג'אווה סקריפט (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

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. אתם מוזמנים כמובן לשאול, להעיר ולהגיב כרצונכם…

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

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

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

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

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

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

השאירו תגובה

 

פעימות
Up!
לבלוג