JavaScript – Array Manipulation

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

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

שימו לב שמערך הוא מסוג Reference Type, כלומר שאם נאתחל מערך בשם x, ולאחר מכן ניצור משתנה בשם y אשר כערך ניתן לו את x – מה שיקרה זה ש-y ישב באותו מיקום הזיכרון כמו x, כלומר שאם נשנה משהו באחד מהם – זה ישתנה גם בשני.

Destructive Array Manipulation Methods

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

()push

באמצעות מתודה זו נוכל להכניס ערך נוסף למערך – מסוף המערך.
כלומר שמה שתחזיר לנו המתודה זה את המערך לאחר השינוי.

let purple = 'Purple';
let colors = ['Blue', 'Yellow', 'Red', 'Green'];

colors.push(purple);

console.log(colors); // ['Blue', 'Yellow', 'Red', 'Green', 'Purple']

כפי שתוכלו להבחין, המתודה push צירפה את purple למערך – אחרי האינדקס האחרון של המערך המקורי.

()unshift

מתודה זו היא למעשה ההיפך הגמור מ-push.
באמצעות unshift נוסיף ערך למערך – מתחילת המערך, ונקבל בחזרה את המערך שלנו לאחר השינוי.

let purple = 'Purple';
let colors = ['Blue', 'Yellow', 'Red', 'Green'];

colors.unshift(purple);

console.log(colors); // [ 'Purple', 'Blue', 'Yellow', 'Red', 'Green']

()pop

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

let colors = ['Blue', 'Yellow', 'Red', 'Green'];

console.log(colors.pop()); // Green

console.log(colors); // ['Blue', 'Yellow', 'Red']

()shift

מתודה זו עובדת בצורה הפוכה מ-pop, היא תסיר ותחזיר לנו את האינדקס הראשון מהמערך:

let colors = ['Blue', 'Yellow', 'Red', 'Green'];

console.log(colors.shift()); // Blue

console.log(colors); // ['Yellow', 'Red', 'Green']

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

()splice

מתודה שימושית זו יכולה לעשות עבורנו 2 דברים ברמת העיקרון –
להסיר ערכים מהמערך או\וגם להוסיף ערכים חדשים למערך במקום אלו שהסרנו.

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

let colors = ['Blue', 'Yellow', 'Red', 'Green', 'Purple', 'Orange'];

colors.splice(2,2); // removes ['Red', 'Green']

console.log(colors); // ['Blue', 'Yellow', 'Purple', 'Orange']

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

let colors = ['Blue', 'Yellow', 'Red', 'Green', 'Purple', 'Orange'];

colors.splice(2,2, 'Silver'); // removes ['Red', 'Green'], adding 'Silver' instead

console.log(colors); // ['Blue', 'Yellow', 'Silver', 'Purple', 'Orange']

Non-Destructive Array Manipulation Methods

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

()slice

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

שימו לב כי המשמעות של כך היא שהמערך לא חייב להיות מסוג let,
מהסיבה הפשוטה שאין לנו כוונה לשנות אותו – נוכל להצהיר עליו כ-const.

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

const colors = ['Blue', 'Yellow', 'Red', 'Green', 'Purple', 'Orange'];

let myColors = colors.slice(2,5); // removes ['Blue', 'Yellow', 'Orange']

console.log(`myColors: ${myColors}`); // new array - ['Red', 'Green', 'Purple']
console.log(`colors: ${colors}`); // orogonal array - ['Blue', 'Yellow', 'Red', 'Green', 'Purple', 'Orange']

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

()toString

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

const colors = ['Blue', 'Yellow', 'Red', 'Green', 'Purple', 'Orange'];
console.log(colors.toString()); // 'Blue,Yellow,Red,Green,Purple,Orange'

()Join

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

const colors = ['Blue', 'Yellow', 'Red', 'Green', 'Purple', 'Orange'];
console.log(colors.join(' | ')); // 'Blue | Yellow | Red | Green | Purple | Orange'

()concat

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

let colors = ['Blue', 'Yellow', 'Red', 'Green'];
let moreColors = ['Gray', 'Orange'];

let myColors = colors.concat(moreColors);

console.log(myColors); // ['Blue', 'Yellow', 'Red', 'Green', 'Gray', 'Orange']

()indexOf ו-()lastIndexOf

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

const colors = ['Blue', 'Yellow', 'Red', 'Blue', 'Purple', 'Orange'];
let indexOf1stBlue = colors.indexOf('Blue');
let indexOf2ndBlue = colors.lastIndexOf('Blue');

console.log(`index of 1st Blue: ${indexOf1stBlue}`);
console.log(`index of 2nd Blue: ${indexOf2ndBlue}`);

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

לקריאה מורחבת על מערכים יש ללחוץ כאן.