मुख्य सामग्री पर जाएं
मॉड्यूल 3 · पाठ 3 का 4पाठ्यक्रम में 11/32~12 min
मॉड्यूल पाठ (3/4)

विध्वंस और प्रसार

एक ही परिवार के दो सहोदर सिंटैक्स, ES6 द्वारा प्रस्तुत किए गए और अब दैनिक आधुनिक जेएस लिखने वाले किसी भी व्यक्ति के लिए रोटी:

  • डिस्ट्रक्चरिंग: एक ही बार में सरणियों/ऑब्जेक्ट्स से कई मान निकालें लाइन.
  • स्प्रेड ...: एक ऐरे या ऑब्जेक्ट को दूसरे के अंदर "फैलाता" है।

साथ में वे कोड को अधिक संक्षिप्त और पठनीय बनाते हैं।

वस्तु का विध्वंस करना

ज़ोर से पढ़ें: "के मानों के साथ स्थिरांक 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} di ${city}\`` लौटाएं ('मार्को डि टोरिनो' के बराबर होना चाहिए)।

संपादक लोड हो रहा है...
संकेत दिखाएँ

स्थिरांक { नाम, शहर } = उपयोगकर्ता; फिर दो मानों के साथ एक टेम्पलेट शाब्दिक।

3 प्रयासों के बाद समाधान उपलब्ध है

व्यायाम की समीक्षा करें

व्यायाम#js.m3.l3.e2
प्रयास: 0लोड हो रहा है...

दिया गया `आधार = { थीम: 'डार्क', आकार: 'एमडी' }`, एक नई समान वस्तु लौटाएं लेकिन स्प्रेड का उपयोग करके `आकार` को 'एलजी' पर सेट करें।

संपादक लोड हो रहा है...
संकेत दिखाएँ

अंतिम अभिव्यक्ति वस्तु होनी चाहिए. इसे कोष्ठकों में लपेटें: ({ ...आधार, ... })।

3 प्रयासों के बाद समाधान उपलब्ध है