सामग्री की तालिका

• परिचय
• संरचितक्लोन को समझना और उसका उपयोग करना
• निष्कर्ष

परिचय

क्या आपने कभी स्प्रेड ऑपरेटर (...) का उपयोग करके जावास्क्रिप्ट में किसी ऑब्जेक्ट को कॉपी करने का प्रयास किया है, केवल यह महसूस करने के लिए कि मूल में परिवर्तन अभी भी कॉपी को प्रभावित करते हैं? यह निराशाजनक हो सकता है जब आप मूल से स्वतंत्र प्रतिलिपि की अपेक्षा करते हैं लेकिन अंततः वह मूल से लिंक हो जाती है। गहरी वस्तुओं से निपटने के दौरान यह एक सामान्य समस्या है, और इससे अप्रत्याशित बग पैदा हो सकते हैं। शुक्र है, जावास्क्रिप्ट में इस समस्या को हल करने के लिए संरचितक्लोन() विधि है

संरचितक्लोन() को समझना और उसका उपयोग करना

शुरू करने के लिए, जावास्क्रिप्ट में संरचित क्लोन() विधि का उपयोग वस्तुओं की गहरी प्रतियां बनाने के लिए किया जाता है, जिसमें सरणी, ऑब्जेक्ट और अन्य जटिल डेटा प्रकारों जैसी नेस्टेड संरचनाएं शामिल हैं।

आप सोच रहे होंगे: वास्तव में कॉपी क्या है, और जावास्क्रिप्ट में हमारे पास कितने प्रकार की कॉपी हैं? खैर, हमारे पास उथली और गहरी प्रतियां हैं। जबकि हम जानते हैं कि स्ट्रक्चर्डक्लोन() बाद वाला बनाता है, स्प्रेड ऑपरेटर का उपयोग करके पहले वाला बनाता है।

एक उथली प्रतिलिपि किसी ऑब्जेक्ट के केवल शीर्ष-स्तरीय गुणों की प्रतिलिपि बनाती है, जिसका अर्थ है कि नेस्टेड ऑब्जेक्ट या सरणियाँ अभी भी मूल से संदर्भित हैं। दूसरी ओर, एक डीप कॉपी नेस्टेड संरचनाओं सहित हर चीज की नकल करती है, यह सुनिश्चित करती है कि क्लोन मूल से पूरी तरह स्वतंत्र है।

आइए जावास्क्रिप्ट में शैलो और डीप प्रतियों के कुछ उदाहरण देखें

उथला प्रतिलिपि उदाहरण

const person = {
    name: "John Doe", 
    languages: [
       "English", 
       "German"
    ]
};

const personClone = {...person}; // shallow copy

// Modify the languages array in the cloned object
personClone.languages.push("Spanish");

// Check the original and the cloned object
console.log(person.languages);  // Output: ["English", "German", "Spanish"]
console.log(personClone.languages);  // Output: ["English", "German", "Spanish"]
console.log(person.languages === personClone.languages) // true

// However, changing a primitive value won't affect the original
personClone.name = "Jane Doe";

console.log(person.name);  // Output: "John Doe"
console.log(personClone.name);  // Output: "Jane Doe"
console.log(person.name === personClone.name) // false

उपरोक्त कोड से, हम निम्नलिखित कह सकते हैं:

• name संपत्ति एक आदिम मूल्य है, इसलिए इसे उथली प्रतिलिपि (personClone.name = "जेन डो";) में बदलने से मूल (person.name) प्रभावित नहीं होता है
• भाषाएं सरणी गैर-आदिम है, इसलिए मूल (व्यक्ति) और क्लोन (व्यक्तिक्लोन) दोनों एक ही संदर्भ साझा करते हैं। व्यक्ति क्लोन सरणी को संशोधित करने से मूल व्यक्ति सरणी प्रभावित होती है

डीप कॉपी उदाहरण

const person = {
    name: "John Doe", 
    languages: [
       "English", 
       "German"
    ]
};

// Create a deep copy using structuredClone
const deepClonedPerson = structuredClone(person);

// Modify the deep cloned object
deepClonedPerson.languages.push("Spanish");

// Check if the original and the deep clone are equal
console.log(person === deepClonedPerson);  // Output: false
console.log(person.languages) // ['English', 'German']
console.log(deepClonedPerson.languages) // ['English', 'German', 'Spanish']
console.log(person.languages === deepClonedPerson.languages);  // Output: false

// Check if the properties are equal
console.log(person.name === deepClonedPerson.name);  // Output: false

// Changes in the deep cloned object don't affect the original
deepClonedPerson.name = "Jane Doe";

console.log(person.name);  // Output: "John Doe"
console.log(deepClonedPerson.name);  // Output: "Jane Doe"

उपरोक्त कोड से, हम निम्नलिखित निष्कर्ष निकाल सकते हैं:

• व्यक्ति === डीपक्लोन्डपर्सन पुष्टि करता है कि संरचितक्लोन() एक नई, स्वतंत्र वस्तु बनाता है।
• व्यक्ति.भाषाएं === डीपक्लोन्डपर्सन.भाषाएं दर्शाती हैं कि नेस्टेड सरणी भी स्वतंत्र रूप से कॉपी की गई है।
• person.name === DeepClonedPerson.name की जांच करने से यह सत्यापित होता है कि डीप क्लोन में परिवर्तन मूल ऑब्जेक्ट को प्रभावित नहीं करते हैं।
• भाषाओं के मान दर्शाते हैं कि डीप क्लोन (डीपक्लोन्डपर्सन) में संशोधन मूल (व्यक्ति) में प्रतिबिंबित नहीं होते हैं

निष्कर्ष

इस आलेख में, हमने पता लगाया कि कैसे संरचितक्लोन() विधि वस्तुओं की गहरी प्रतियां बनाने का एक विश्वसनीय तरीका प्रदान करती है, यह सुनिश्चित करती है कि नेस्टेड संरचनाएं मूल से पूरी तरह से स्वतंत्र हैं।

इस लेख को पढ़ने के लिए धन्यवाद। यदि आपको यह लेख उपयोगी लगा, तो कृपया इसे लाइक करें और इसे अन्य लोगों के साथ साझा करें, जिन्हें जावास्क्रिप्ट में डीप कॉपीिंग के बारे में सीखने से लाभ हो सकता है

इस विषय पर आपके क्या विचार हैं? क्या आपने जावास्क्रिप्ट में वस्तुओं की प्रतिलिपि बनाने की अन्य तकनीकों का सामना किया है? बेझिझक नीचे टिप्पणी अनुभाग में अपनी अंतर्दृष्टि साझा करें।

पी.एस. मैं वर्तमान में फ्रंटएंड डेवलपर अवसरों की तलाश में हूं। यदि आपके पास कोई सुराग है या आप नियुक्ति कर रहे हैं, तो बेझिझक मेरा बायोडाटा देखें या लिंक्डइन पर मेरे साथ जुड़ें। मुझे आपसे सुनना अच्छा लगेगा!