שימוש ב-Destructuring Assignment עם useState
const name = cat.name, const age = cat.age וכן הלאה.const { name, age, color } = cat, ו-JavaScript משלימה כל משתנה מהפרופרטי שבאותו שם - בלי קשר לסדר הרשימה.const [first, second, third] = array - כאן הסדר במערך קובע לאיזה משתנה מגיע כל ערך.const [item, setItem] = useState(""), בלי ליצור לפני כן משתנה ביניים למערך.item ל-setItem.פרקי ההרצאה: שימוש ב-Destructuring Assignment עם useState
תמלול ההרצאה: שימוש ב-Destructuring Assignment עם useState
הטקסט המלא של הדקות הראשונות בהרצאה «שימוש ב-Destructuring Assignment עם useState» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
באקמא סקריפט 6 הוסיפו כמובן המון המון פיצ'רים חדשים לשפת ג'אווה סקריפט. פיצ'ר אחד מגניב נקרא Distractoring Assignment.
בואו נסתכל רגע מה זה אומר. נניח שיש לנו כאן איזשהו אובייקט, בואו ניקח אובייקט קונסט קאם, יש לנו אובייקט חתול, לחתול יש name מיצי, לחתול יש age 4, לחתול יש color white.
עכשיו אנחנו רוצים להשתמש בלעשות console.log ו-cat.name אנחנו רוצים console.log של cat.name cat.age ו-cat.color אנחנו רוצים להציג אותם בצורה נפרדת אז בואו נריץ רגע את הפרויקט נראה שהוא עובד לנו ומציג את הדברים על הקונסול
ניגש רגע לקונסול ונעיל אותו טיפה טסט והנה יש לנו מיצי ארבע וייט הכל עובד אבל בוא נניח שאנחנו רוצים לשלוף את הפרופרטיז למשתנים אז היינו צריכים לגשת ולפתוח משתנה נניח name שווה cat נקודה name וconst age שווה cat נקודה age וconst color שווה cat נקודה color עכשיו למה לנו לעשות את זה אולי אנחנו לא רוצים להשתמש יותר עם האובייקט הזה כל הזמן cat נקודה
cat נקודה ויכול להיות שבכת זה הגיוני אבל אולי האובייקט אין לו כל כך משמעות ואנחנו כן רוצים את הפרופרטיז עצמן בואו נריץ את זה ונראה שזה עדיין עובד אז destructoring assignment אומר כזה דבר תראו יש לכם פה השמה אוקיי כאן אנחנו רואים את כל זה יש פה
השמה של האובייקט לאיזה שהוא משתנה אובייקט במקום לעשות את זה לתוך אובייקט ואז לשלוף את הפרטים אחד אחד בואו תעשו משהו אחר הנה האובייקט תשלפו ממנו ישירות את הפרטים למשתנים האלה בצורה של שורה אחת.
איך אתם עושים את זה? אתם פשוט, אולי באמת נעשה את זה כאן, תפתחו את המשתנים name age ו-color פה, name age ו-color אבל תעטפו אותם במסלולסלים ואז תכניסו אליהם את האובייקט.
ואז זה חוסך לי 1, 2, 3. בואו נסתכל על זה, נריץ, קיבלנו אותו דבר. מה זה הדבר המוזר הזה? מה זה הסיימנט הזה? ברגע ש-JavaScript רואה שהמשתנים שלנו נטופים בסוגריים, מסולסלים, אז היא מפרקת את האובייקט הזה ומכניסה את ה-Name
ל-Name, את ה-Age ל-Age, את ה-Color ל-Color, לא לפי הסדר, לפי השמות של המשתנים. כלומר, יכלנו גם פה לרשום Color פסיק Age, זה לא מעניין את-JavaScript איפה רשמנו אותו.
בסדר? הנה מי צי ארבע ווייט, אותו דבר. עובד פרפקט. כמובן שלא היינו צריכים עכשיו לבנות את האובייקט ואז לעשות את זה, יכלנו פשוט את כל זה לרשום כאן בלי האובייקט, אם אנחנו רוצים, אולי יש לנו פונקציה שמחזירה לנו את המידע וישירות אנחנו מכניסים את זה,
לא היינו צריכים לפני זה עוד משתנה. הדבר הזה זה Object Distractoring Assignment. אותו הדבר בדיוק יש גם למערך. בואו ניקח מערך ונכניס לתוך המערך Hello 10 to מותר.
בואו נבצע קונסול לוג לכל המערך. בואו נראה מה הוא כותב לנו. הוא פשוט מדפיס לנו את המערך. Hello, 10, true. עד כאן בסדר. עכשיו אנחנו רוצים לשלוף את הפריטים שלו.
אנחנו רוצים לשלוף את ה-first item. ה-first item יהיה הרי במיקום 0. אנחנו רוצים לשלוף את ה-second item. ה-second item יהיה במיקום 1. ה-third item אנחנו רוצים במיקום 2. נדפיס first, Second, Third, Go, לוחץ, Hello, 10, True, עובד.
גם כאן יש לנו אפשרות לעשות Distractoring Assignment עבור מערך. במקום לחלק את זה לשורות, בואו פשוט נגביר כאן קונסט את First, Second ו-Third בשורה אחת, אבל במקום לעטוף אותם במסולסלים, נעטוף אותם במרובעים ונכניס אותה, את המערך, לכל הקבוצה הזאת.
את זה נוריד, הנה יש לנו פירוק של המערך, ופה זה כן לפי מיקומים. Hello 10 True, Hello 10 True, נכנסים לכאן, נלחץ, הנה ה-Hello 10 True, עובד פרפקט.
כמובן שגם במקרה הזה לא הייתי חייב באמת אובייקט מערך, הייתי יכול לקחת אותו לכאן ולהיפטר מהאובייקט, והנה גם פה קיצרנו את הקוד בצורה משמעותית.
אנחנו יכולים כמובן את זה להוריד, נניח אני לא רוצה את ה-Second, במקרה הזה אני לא חייב שיהיה לי את האובייקט אז זה יהיה Hello וזה יהיה True את ה-10 לא הוצאתי החוצה ממערך אתם רואים שזה גם כן בסדר גמור אבל אני כן אחזיר את זה.