முக்கிய உள்ளடக்கத்திற்குச் செல்லவும்
தொகுதி 3 · பாடம் 3 இன் 4பாடத்திட்டத்தில் 11/32~12 min
தொகுதி பாடங்கள் (3/4)

அழித்தல் மற்றும் பரவுதல்

ஒரே குடும்பத்தைச் சேர்ந்த இரண்டு உடன்பிறப்புகள் தொடரியல், ES6 ஆல் அறிமுகப்படுத்தப்பட்டு இப்போது தினசரி நவீன JS எழுதும் அனைவருக்கும் ரொட்டி:

  • அழித்தல்: வரிசைகள்/ஆப்ஜெக்ட்களில் இருந்து பல மதிப்புகளைப் பிரித்தெடுக்கவும். வரி.
  • Spread ...: ஒரு வரிசை அல்லது ஒரு பொருளை மற்றொன்றின் உள்ளே "பரவுகிறது".

ஒன்றாக அவர்கள் குறியீட்டை மிகவும் சுருக்கமாகவும் படிக்கக்கூடியதாகவும் ஆக்குகிறார்கள்.

பொருள் அழித்தல்

சத்தமாக வாசிக்கவும்: "மாற்றுநிலைகளை உருவாக்கவும் 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ஏற்றுகிறது…

கொடுக்கப்பட்ட `பயனர் = {பெயர்: 'மார்கோ', வயது: 34, நகரம்: 'டொரினோ' }`, வெறும் `பெயர்` மற்றும் `நகரம்` ஆகியவற்றை இரண்டு மாறிலிகளாகப் பிரித்தெடுத்து, `\`${name} டி ${நகரம்}\`` ('மார்கோ டி டோரினோ' க்கு சமமாக இருக்க வேண்டும்) ஆகியவற்றைப் பிரித்தெடுக்க டிஸ்ட்ரக்சரிங் பயன்படுத்தவும்.

எடிட்டரை ஏற்றுகிறது…
குறிப்பைக் காட்டு

const {பெயர், நகரம்} = பயனர்; பின்னர் இரண்டு மதிப்புகள் கொண்ட ஒரு டெம்ப்ளேட்.

3 முயற்சிகளுக்குப் பிறகு தீர்வு கிடைக்கும்

மதிப்பாய்வு பயிற்சி

உடற்பயிற்சி#js.m3.l3.e2
முயற்சிகள்: 0ஏற்றுகிறது…

கொடுக்கப்பட்ட `base = { theme: 'dark', size: 'md' }`, ஒரு புதிய ஒத்த பொருளைத் தரவும், ஆனால் `size` ஐப் பயன்படுத்தி 'lg' ஆக அமைக்கப்பட்டுள்ளது.

எடிட்டரை ஏற்றுகிறது…
குறிப்பைக் காட்டு

கடைசி வெளிப்பாடு பொருளாக இருக்க வேண்டும். அடைப்புக்குறிக்குள் அதை மடிக்கவும்: ({ ...அடிப்படை, ... }).

3 முயற்சிகளுக்குப் பிறகு தீர்வு கிடைக்கும்