דילוג לתוכן המרכזי
מודול 3 · שיעור 3 מתוך 411/32 בקורס~12 min
שיעורי מודול (3/4)

הרס והפצה

שני תחבירי אחים מאותה משפחה, שהוצג על ידי ES6 ועכשיו מדי יום לחם לכל מי שכותב JS מודרני:

  • Destructuring: חלץ ערכים מרובים ממערכים/אובייקטים ביחיד קו.
  • מרח ...: "מפיץ" מערך או אובייקט בתוך אחר.

יחד הם הופכים את הקוד להרבה יותר תמציתי וקריא.

הרס אובייקט

קרא בקול רם: "צור את הקבועים nome ו-eta עם הערכים של המאפיינים בעלי השם הזהה של utente".

JS
const utente = { nome: 'Anna', eta: 28, ruolo: 'admin' };

const { nome, eta } = utente;
console.log(nome); // 'Anna'
console.log(eta); // 28

שינוי שם

הוסף את : newName אחרי המפתח:

JS
const { nome: n, eta: years } = utente;
// creates the variables n and years

ערך ברירת מחדל

אם המאפיין חסר (או שהוא undefined), נעשה שימוש ברירת המחדל:

JS
const { ruolo = 'reader', telefono = 'n/d' } = utente;
// ruolo = 'admin' (present), telefono = 'n/d' (missing)

הרס מערך

זה עובד לפי מיקום:

JS
const colori = ['rosso', 'verde', 'blu'];
const [primo, secondo] = colori;
// primo = 'rosso', secondo = 'verde'

const [, , terzo] = colori; // skips the first two
const [a, ...resto] = colori; // a = 'rosso', resto = ['verde','blu']

מורחים על מערכים

...arr "מפיץ" את האלמנטים:

JS
const a = [1, 2, 3];
const b = [4, 5];

const unione = [...a, ...b]; // [1, 2, 3, 4, 5]
const copia = [...a]; // shallow copy of a
const conPiu = [0, ...a, 4]; // [0, 1, 2, 3, 4]

מורחים על חפצים

מקשים מאוחרים יותר עוקפים מפתחות קודמים - בסיסי לעדכונים בלתי ניתנים לשינוי:

JS
const utente = { nome: 'Anna', eta: 28 };

const aggiornato = { ...utente, eta: 29 };
// { nome: 'Anna', eta: 29 } — utente was NOT touched

const con = { ...utente, attivo: true };
// { nome: 'Anna', eta: 28, attivo: true }

נסה את זה

פעילות גופנית#js.m3.l3.e1
ניסיונות: 0טוען...

בהינתן `user = { name: 'Marco', age: 34, city: 'Torino' }`, השתמש ב-destructuring כדי לחלץ רק `name` ו-`city` לשני קבועים ולהחזיר `\`${name} di ${city}\`` (חייב להיות שווה ל-'Marco di Torino').

טוען עורך...
הצג רמז

const { שם, עיר } = משתמש; ואז תבנית מילולית עם שני הערכים.

הפתרון זמין לאחר 3 ניסיונות

סקירת התרגיל

פעילות גופנית#js.m3.l3.e2
ניסיונות: 0טוען...

בהינתן `base = { theme: 'dark', size: 'md' }`, החזר אובייקט חדש זהה אך עם `size` מוגדר ל-'lg' באמצעות spread.

טוען עורך...
הצג רמז

הביטוי האחרון חייב להיות האובייקט. עטפו אותו בסוגריים: ({ ...base, ... }).

הפתרון זמין לאחר 3 ניסיונות