ప్రధాన కంటెంట్‌కు వెళ్లండి
మాడ్యూల్ 3 · 4లో పాఠం 3కోర్సులో 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లోడ్ అవుతోంది...

అందించిన `బేస్ = {థీమ్: 'డార్క్', సైజు: 'md' }`, స్ప్రెడ్‌ని ఉపయోగించి ఒక కొత్త సారూప్య వస్తువుని అందించండి కానీ `పరిమాణం`తో 'lg'కి సెట్ చేయబడింది.

ఎడిటర్ లోడ్ అవుతోంది…
సూచనను చూపించు

చివరి వ్యక్తీకరణ తప్పనిసరిగా వస్తువు అయి ఉండాలి. దీన్ని కుండలీకరణాల్లో చుట్టండి: ({ ...బేస్, ... }).

3 ప్రయత్నాల తర్వాత పరిష్కారం లభిస్తుంది