JavaScript Academy · पाठ

गहरी प्रतियों के लिए structuredClone

जटिल ऑब्जेक्ट को सुरक्षित रूप से क्लोन कीजिए।

पाठ 4, कुल 4 में से13 चरण

गहरी प्रतियों के लिए structuredClone, CoddyKit पर JavaScript Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह JavaScript Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। JavaScript Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

deep प्रतिलिपि की समस्या

स्प्रेड और Object.assign shallow प्रतिलिपियाँ बनाते हैं: भीतरी ऑब्जेक्ट संदर्भ के ज़रिए साझा रहते हैं। किसी भीतरी संरचना की पूरी प्रतिलिपि बनाने के लिए आपको deep प्रतिलिपि चाहिए।

structuredClone इसका अंतर्निर्मित समाधान है।

स्प्रेड पर्याप्त क्यों नहीं है

स्प्रेड से बनी प्रतिलिपि भीतरी ऑब्जेक्ट साझा करती है। प्रतिलिपि के भीतरी भाग में बदलाव करने पर original भी प्रभावित होता है।

const original = { user: { name: 'Ada' } };
const shallow = { ...original };

shallow.user.name = 'Grace';
console.log(original.user.name);

structuredClone समाधान है

structuredClone पूरी संरचना की पुनरावर्ती रूप से प्रतिलिपि बनाता है। clone में किए गए बदलाव original को कभी प्रभावित नहीं करते।

const original = { user: { name: 'Ada' } };
const deep = structuredClone(original);

deep.user.name = 'Grace';
console.log(original.user.name);
console.log(deep.user.name);

स्वतंत्र भीतरी ऑब्जेक्ट

क्लोन बनाने के बाद, हर भीतरी ऑब्जेक्ट एक अलग संदर्भ होता है, इसलिए हर स्तर पर पहचान की तुलना false होती है।

const original = { a: { b: { c: 1 } } };
const clone = structuredClone(original);

console.log(original === clone);
console.log(original.a === clone.a);
console.log(original.a.b === clone.a.b);

ऐरे का क्लोन बनाना

भीतरी ऐरे समेत ऐरे भी deep रूप से क्लोन होते हैं। clone के किसी भीतरी ऐरे में कुछ जोड़ने पर स्रोत अपरिवर्तित रहता है।

const original = { tags: ['a', 'b'], meta: { nested: [1] } };
const clone = structuredClone(original);

clone.meta.nested.push(2);
console.log(original.meta.nested);
console.log(clone.meta.nested);

Map और Set को संभालना

JSON.parse(JSON.stringify(...)) के विपरीत, structuredClone कई अंतर्निर्मित प्रकारों का समर्थन करता है, जिनमें Map, Set और Date शामिल हैं।

const original = { items: new Set([1, 2, 3]), when: new Date(0) };
const clone = structuredClone(original);

clone.items.add(4);
console.log([...original.items]);
console.log([...clone.items]);
console.log(clone.when instanceof Date);

चक्रीय संदर्भों को संभालना

स्वयं को संदर्भित करने वाला ऑब्जेक्ट JSON वाले तरीके को विफल कर देता है, लेकिन structuredClone से आसानी से क्लोन हो जाता है।

const node = { name: 'root' };
node.self = node;

const clone = structuredClone(node);
console.log(clone.name);
console.log(clone.self === clone);

यह क्या क्लोन नहीं कर सकता

structuredClone फ़ंक्शन या DOM नोड की प्रतिलिपि नहीं बना सकता; यह DataCloneError उत्पन्न करता है। यह प्रोटोटाइप शृंखलाओं को भी हटा देता है और साधारण ऑब्जेक्ट लौटाता है।

try {
  structuredClone({ fn: () => 1 });
} catch (e) {
  console.log(e.name);
}

प्रोटोटाइप सुरक्षित नहीं रहते

किसी क्लोन किए गए क्लास इंस्टेंस का रूप साधारण ऑब्जेक्ट जैसा हो जाता है: डेटा कॉपी हो जाता है, लेकिन विधियाँ और प्रोटोटाइप खो जाते हैं।

class Point {
  constructor(x) { this.x = x; }
  show() { return this.x; }
}
const p = new Point(5);
const clone = structuredClone(p);

console.log(clone.x);
console.log(clone instanceof Point);

structuredClone बनाम JSON तरीका

पुराना JSON.parse(JSON.stringify(x)) undefined को हटा देता है, तारीखें स्ट्रिंग बन जाती हैं और यह चक्रों पर विफल हो जाता है। structuredClone क्रमबद्ध किए जा सकने वाले डेटा के लिए इन समस्याओं से बचाता है।

const data = { when: new Date(0), missing: undefined, n: 5 };
const viaJson = JSON.parse(JSON.stringify(data));
const viaClone = structuredClone(data);

console.log(typeof viaJson.when);
console.log(viaClone.when instanceof Date);

यह क्यों महत्वपूर्ण है

structuredClone साधारण डेटा के लिए एक विश्वसनीय, अंतर्निर्मित deep प्रतिलिपि देता है और नाज़ुक, हाथ से बनाए गए क्लोन का स्थान लेता है। जब आपको नेस्टेड state की पूरी तरह स्वतंत्र प्रतिलिपि चाहिए, तब इसका उपयोग करें और याद रखें कि यह फ़ंक्शन और प्रोटोटाइप हटा देता है।

const state = { list: [{ id: 1 }], settings: { theme: 'dark' } };
const snapshot = structuredClone(state);
snapshot.list[0].id = 99;
console.log(state.list[0].id);
console.log(snapshot.list[0].id);

त्वरित जाँच

नेस्टेड डेटा के लिए स्प्रेड ऑपरेटर के बजाय structuredClone का उपयोग क्यों करना चाहिए?

इंटरैक्टिव पाठ में इसका उत्तर दें

दोहराव: structuredClone

आपने विश्वसनीय deep प्रतिलिपि बनाना सीखा:

स्प्रेड shallow होता है; structuredClone deep प्रतिलिपि बनाता है।
यह Map, Set, Date और चक्रीय संदर्भों का समर्थन करता है।
यह फ़ंक्शन या DOM नोड का क्लोन नहीं बना सकता और प्रोटोटाइप हटा देता है।
यह JSON.parse(JSON.stringify()) वाले तरीके का अधिक सुरक्षित विकल्प है।

शुरुआत निःशुल्क

एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 59
पाठ: 200

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “गहरी प्रतियों के लिए structuredClone” पाठ निःशुल्क है?

हाँ — JavaScript Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “गहरी प्रतियों के लिए structuredClone” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। JavaScript Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“गहरी प्रतियों के लिए structuredClone” में मैं क्या सीखूँगा?

जटिल ऑब्जेक्ट को सुरक्षित रूप से क्लोन कीजिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ JavaScript Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या JavaScript Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर JavaScript Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“गहरी प्रतियों के लिए structuredClone” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस JavaScript Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर JavaScript Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← JavaScript Academy पर वापस जाएँ