ל-JavaScript המודרני יש תכונות חדשות רבות שמקלות על כתיבת קוד בצורה פשוטה ומובנית. אחת התכונות המודרניות השימושיות הזמינות ב-ES6+ היא הרס מערך ואובייקט.
מסגרות JavaScript כמו React.js ו-Angular מעודדות את השימוש בטכניקה זו. אז חיוני להבין מה זה הרס ואיך להשתמש בו בזמן כתיבת קוד.
מהו פירוק אובייקט ומערך ב-JavaScript?
הרס ב-JavaScript מתייחס לתהליך של פירוק ערכים ממערך או אובייקט. הוא מספק דרך תמציתית יותר לקבל ערכים ממערכים או אובייקטים ללא הרמה כבדה כאשר אתה מעוניין בפריטי מערך בודדים או ערכים באובייקט.
זה מועיל גם בעת עיבוד ערכים חוזרים מפונקציה או ביטוי מורכבים. מושג זה הוא אחד מה שיטות עבודה מומלצות שעליך לבצע בעת כתיבת קוד React.
כיצד לפרק מערכים
להלן קוד לדוגמה כדי לקבל תחושה של הרס של מערך:
const arr = [1, 2];
const [א, ב] = arr;
לְנַחֵם.log (א) // מדפיס 1 בקונסולה
לְנַחֵם.log (ב) // מדפיס 2 בקונסולה
קוד זה משתמש ב-destructuring כדי להקצות את הערכים מ arr-1 ו-2 - למשתנים א
ו ב, בהתאמה. זוהי התפיסה הבסיסית מאחורי הרס. יש לך מערך או אובייקט בצד ימין, ואתה פורק פריטים ומקצה אותם למשתנים בודדים בצד שמאל.מתחת למכסה המנוע, JavaScript מעתיק ערכים מ arr ומקצה אותם למשתנים בצד שמאל כך:
const arr = [1,2];
const a = arr[0];
const b = arr[1];
כפי שאתה יכול לראות, הרס הוא דרך תמציתית יותר לעשות זאת, בניגוד לשימוש בסימון האובייקט או הסוגריים. עם זאת, תחביר זה יהיה שימושי ככל הנראה כאשר עובדים עם מערכים מורכבים או פונקציות המחזירות מערכים או מחרוזות.
בדוק את הקוד לדוגמה למטה:
const [יום, חודש, תאריך, שנה, זמן, אזור זמן] = תַאֲרִיך().לְפַצֵל(' ')
// Calling Date() מחזירה את התאריך הנוכחי בפורמט:
// שני 20 בפברואר 2023 13:07:29 GMT+0000
לְנַחֵם.log (יום) // מדפיס יום שני
לְנַחֵם.log (חודש) // מדפיס בפברואר
לְנַחֵם.log (תאריך) // מדפיס 20
בדוגמת קוד זו, אנו יוצרים מחרוזת חדשה עם התאריך הנוכחי על ידי קריאה תַאֲרִיך(). לאחר מכן, אנו משתמשים לְפַצֵל(), א שיטת מחרוזת JavaScript, כדי להפריד פריטים במחרוזת תוך שימוש ברווח כמפריד. פיצול(' ') מחזירה מערך, ואנו משתמשים ב-destructuring כדי להקצות את הערכים למשתנים בודדים.
זכור שאם המערך שלך מכיל יותר פריטים ממה שאתה פורק, JavaScript יתעלם מהפריטים הנוספים.
const arr = [1, 2, 3, 4];
const [א, ב] = arr;
לְנַחֵם.log (א) // מדפיס 1
לְנַחֵם.log (ב) // מדפיס 2
// הערכים 3 ו-4 אינם מוקצים לשום משתנה; מתעלמים מהם
במקרה זה, אם ברצונך לאחסן את שאר הפריטים במשתנה, השתמש בפרמטר rest כמו:
const arr = [1, 2, 3, 4];
const [a, b,... rest] = arr;
לְנַחֵם.log (מנוחה) // מדפיס [3,4]
לפעמים, ייתכן שלא אכפת לך מפריט ספציפי. דפוס ההרס של JavaScript מאפשר לך גם לדלג על אלמנטים מסוימים באמצעות פסיק ריק.
const arr = [1, 2, 3, 4];
const [a,, c] = arr;
לְנַחֵם.log (c) // מדפיס 3
הקוד למעלה משתמש ברווח הריק כדי להתעלם מהערך 2 במערך arr. במקום להקצות ערך 2 למשתנה ג, הוא מדלג לפריט הבא במערך. הוא גם מתעלם מהערך הרביעי מכיוון שהוא לא מציין משתנה לאחסון אותו.
לעומת זאת, אם אתה צריך פחות פריטים ממה שאתה פורק, התהליך יקצה את לא מוגדר ערך למשתנים הנוספים האלה.
const arr = [1];
const [א, ב] = arr;
לְנַחֵם.log (א) // מדפיס 1
לְנַחֵם.log (ב) // מדפיס לא מוגדר
כדי למנוע משתנים לא מוגדרים, אתה יכול להגדיר ערכי ברירת מחדל אם אינך בטוח לגבי אורך המערך באופן הבא (הקצאת ערכי ברירת מחדל אינה חובה):
const arr = [1];
const [א = '10', ב = 'לא מסופק'] = arr;
לְנַחֵם.log (א) // מדפיס 1
לְנַחֵם.log (ב) // מדפיס "לא מסופק"
הרס זה מקצה את הערך 1 למשתנה א, מחליף את ערך ברירת המחדל שלו. מִשְׁתַנֶה ב שומר על ברירת המחדל שלו מכיוון שלא מסופק ערך.
כיצד לפרק אובייקטים
הרס אובייקטים אינו שונה כל כך ממערכים. ההבדל היחיד הוא שמערכים ניתנים לחזרה ואובייקטים לא, וכתוצאה מכך דרך קצת שונה לעשות דברים.
בעת עבודה עם אובייקטים, המשתנים בצד שמאל של אופרטור ההקצאה מאותחלים כמו אובייקטים:
const אדם = {שֵׁם: 'אלווין', גיל: 10, גוֹבַה: 1};
const {שם, גיל, גובה} = אדם;
לְנַחֵם.log (שם) // מדפיס 'אלווין'
לְנַחֵם.log (גובה) // מדפיס 1
מהקוד, אנחנו משתמשים בשמות נכסים מה- אדם לְהִתְנַגֵד. עם זאת, אינך חייב להשתמש בשמות המאפיינים המדויקים באובייקט. ניתן לפרק ולאחסן את הערכים בשמות משתנים שונים באופן הבא:
const אדם = {שֵׁם: 'אלווין', גיל: 10, גוֹבַה: 1};
const {שֵׁם: שם פרטי, גיל: שנים, גוֹבַה: currentHeight} = אדם;
לְנַחֵם.log (firstName) // מדפיס 'אלווין'
לְנַחֵם.log (currentHeight) // מדפיס 1
אתה מתחיל בציון ערך המאפיין שברצונך לפרק, ואז ציין את שם המשתנה שבו תשתמש כדי לאחסן את הערך לאחר נקודתיים. וכמו מערכים, הרס של שם מאפיין שלא קיים יהיה לא מוגדר.
כדי להתמודד עם זה, תוכל לציין באופן דומה ערכי ברירת מחדל למקרה ששם המאפיין שברצונך להקצות למשתנה אינו זמין:
const אדם = {שֵׁם: 'אלווין', גיל: 10, גוֹבַה: 1};
const {name, age, height, location='עוֹלָמִי'} = אדם;
לְנַחֵם.log (שם) // מדפיס 'אלווין'
לְנַחֵם.log (מיקום) // מדפיס 'כל העולם'
סדר המשתנים בצד שמאל לא משנה עם אובייקט מכיוון שהאובייקטים מאחסנים ערכים בזוגות מפתח-ערך. ככזה, הקוד הבא יניב את אותן תוצאות:
const אדם = {שֵׁם: 'אלווין', גיל: 10, גוֹבַה: 1};
const {גיל, גובה, שם} = אדם;
לְנַחֵם.log (שם) // מדפיס 'אלווין'
לְנַחֵם.log (גובה) // מדפיס 1
לבסוף, בדומה למערכים, אתה יכול גם להשתמש בפרמטר rest כדי לפרק כמה ערכים במשתנה אחד כך:
const אדם = {שֵׁם: 'אלווין', גיל: 10, גוֹבַה: 1};
const {name, ...rest} = אדם;
לְנַחֵם.log (שם) // מדפיס 'אלווין'
לְנַחֵם.log (מנוחה) // מדפיסים { גיל: 10, גובה: 1 }
רק שימו לב שפרמטר המנוחה חייב להיות תמיד אחרון. אחרת, JavaScript יזרוק חריג.
שפר את איכות הקוד שלך עם הרס של JavaScript
התכונות המודרניות של Javascript, כמו הרס, מאפשרות לך לכתוב קוד קריא מאוד. באמצעות הרס מבנה, אתה יכול לפרוק במהירות ערכים ממערכים ואובייקטים. ביטול המבנה יכול להיות שימושי גם במצבים אחרים, כמו החלפת ערכים של שני משתנים. אני מקווה שכעת אתה מבין מה המשמעות של הרס ב-JavaScript, ותוכל להיות מסוגל להשתמש בו בזמן כתיבת קוד.