מערכים ב-JavaScript: יצירה, גישה, שינוי ומעבר

מערך הוא רשימה מסודרת

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

const fruits = ["apple", "banana", "cherry"];
const mixed = [1, "two", true, null, { id: 3 }];
const empty = [];

console.log(fruits);
console.log(mixed);
console.log(empty);

בתחביר הליטרלי הזה תיצרו מערכים ב-99% מהמקרים. קיים גם new Array(...), אבל יש לו קצה חד: new Array(3) יוצר מערך באורך 3 בלי שום איברים בפועל, ולא [3]. היצמדו ל-[].

האינדקס מתחיל מאפס

ניגשים לאיברים לפי מיקום, החל מ-0:

const colors = ["red", "green", "blue"];

console.log(colors[0]);
console.log(colors[1]);
console.log(colors[2]);
console.log(colors[99]);

שני דברים לשים לב אליהם. ראשית, גישה לאינדקס מעבר לסוף המערך לא זורקת שגיאה: היא מחזירה undefined. זה מקור נפוץ לבאגים מסוג "למה זה undefined?". שנית, אפשר להציב ערך בכל אינדקס, כולל אחרי הסוף, ו-JavaScript תרחיב את המערך בשמחה:

const colors = ["red", "green", "blue"];
colors[5] = "purple";

console.log(colors);
console.log(colors.length);

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

length מתעדכן בזמן אמת

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

const nums = [10, 20, 30];
console.log(nums.length);

nums.push(40);
console.log(nums.length);

nums.length = 2;
console.log(nums);

את הטריק האחרון כדאי לזכור: הצבה ל-length חותכת את המערך. nums.length = 0 היא דרך מהירה לרוקן אותו במקום.

push, pop, shift, unshift

ארבע מתודות להוספה ולהסרה בקצוות:

const stack = [];

stack.push("a");
stack.push("b");
stack.push("c");
console.log(stack);

const last = stack.pop();
console.log(last, stack);

stack.unshift("start");
console.log(stack);

const first = stack.shift();
console.log(first, stack);

• push(x) מוסיפה לסוף ומחזירה את האורך החדש.
• pop() מסירה מהסוף ומחזירה את האיבר שהוסר.
• unshift(x) מוסיפה להתחלה.
• shift() מסירה מההתחלה.

push/pop מהירות. shift/unshift צריכות לעדכן את האינדקס של כל שאר האיברים, ולכן הן איטיות יותר במערכים גדולים: בסדר גמור לגדלים יומיומיים, ושווה לדעת את זה אם אתם עובדים עם מיליוני פריטים.

slice מול splice

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

slice(start, end) מחזירה עותק של חלק מהמערך. המקור לא נפגע. end לא נכלל:

const letters = ["a", "b", "c", "d", "e"];

const middle = letters.slice(1, 4);
console.log(middle);
console.log(letters);

splice(start, deleteCount, ...items) משנה את המערך. היא יכולה למחוק, להכניס או גם וגם, ומחזירה את מה שהסירה:

const letters = ["a", "b", "c", "d", "e"];

const removed = letters.splice(1, 2);
console.log(removed);
console.log(letters);

letters.splice(1, 0, "x", "y");
console.log(letters);

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

חיפוש: indexOf, includes, find

שלוש דרכים לחפש משהו, למצבים שונים:

const fruits = ["apple", "banana", "cherry"];

console.log(fruits.indexOf("banana"));
console.log(fruits.indexOf("grape"));

console.log(fruits.includes("cherry"));
console.log(fruits.includes("grape"));

const users = [{ id: 1, name: "Ada" }, { id: 2, name: "Boris" }];
const boris = users.find(u => u.id === 2);
console.log(boris);

• indexOf(x) נותנת את המיקום, או -1 אם לא נמצא. שימושית כשצריך את האינדקס.
• includes(x) נותנת ערך בוליאני. נקייה יותר כשרק רוצים לדעת "האם זה נמצא כאן?". היא גם מטפלת נכון ב-NaN, מה ש-indexOf לא עושה.
• find(predicate) מריצה פונקציה על כל איבר ומחזירה את הראשון שמתאים. זו המתודה למערכים של אובייקטים, שבהם indexOf ו-includes בודקות רק שוויון מחמיר.

מעבר על מערך בלולאה

כמה דרכים טובות, כל אחת מתאימה למצב אחר:

const scores = [82, 91, 73, 88];

for (const score of scores) {
    console.log(score);
}

scores.forEach((score, i) => {
    console.log(i, score);
});

for (let i = 0; i < scores.length; i++) {
    console.log(i, scores[i]);
}

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

לולאה אחת שכדאי להימנע ממנה: for...in. היא עוברת על מפתחות וכוללת מאפיינים שעברו בירושה. היא מיועדת לאובייקטים, לא למערכים.

העתקה ושילוב

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

const a = [1, 2, 3];
const b = a;
b.push(4);

console.log(a);
console.log(b);

כדי להעתיק באמת, השתמשו באופרטור הפיזור או ב-slice():

const a = [1, 2, 3];
const b = [...a];
const c = a.slice();

b.push(4);
c.push(5);

console.log(a);
console.log(b);
console.log(c);

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

const front = [1, 2];
const back = [3, 4];
const all = [...front, 99, ...back];

console.log(all);

מערכים של אובייקטים

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

const users = [
    { id: 1, name: "Ada", active: true },
    { id: 2, name: "Boris", active: false },
    { id: 3, name: "Chen", active: true },
];

const activeNames = users
    .filter(u => u.active)
    .map(u => u.name);

console.log(activeNames);

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

מערכים מול אובייקטים

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

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

הבא בתור: Destructuring

שליפת ערכים ממערכים לפי אינדקס (ומאפיינים מאובייקטים לפי שם) חוזרת מספיק פעמים כדי של-JavaScript יהיה תחביר ייעודי לזה. זה destructuring, והוא הבא בתור.