👩‍🎓 📽️ 💐 हम जावास्क्रिप्ट में वस्तुओं से निपटते हैं 💍 🆓 🔧

इस लेख में, लेखक, एक फ्रंट-एंड डेवलपर, ने जावास्क्रिप्ट ऑब्जेक्ट बनाने, संशोधित करने और तुलना करने के मुख्य तरीकों का अवलोकन दिया।

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

कुछ समय बाद ही मुझे महसूस होने लगा कि विषय मेरे विचार से कहीं अधिक जटिल है। और फिर मैंने विभिन्न स्रोतों से जानकारी का अध्ययन करना शुरू किया। उनमें से कुछ ने विषय के बारे में एक अच्छा विचार दिया, लेकिन मैं तुरंत पूरी तस्वीर नहीं देख सका।

इस पोस्ट में, मैंने जेएस में वस्तुओं के साथ काम करने के सभी पहलुओं को कवर करने की कोशिश की, व्यक्तिगत विवरणों में बहुत गहराई तक जाने के बिना, लेकिन महत्वपूर्ण विवरणों को याद किए बिना, जो आपको विषय को समझने में मदद करेगा और इसके आगे के अध्ययन के दौरान अधिक आत्मविश्वास महसूस करेगा।

तो चलिए मूल बातें से शुरू करते हैं।

वस्तु

जावास्क्रिप्ट में एक वस्तु केवल गुणों का एक संग्रह है, जिनमें से प्रत्येक एक कुंजी-मूल्य जोड़ी है। डॉटेड ( obj.a ) या ब्रैकेटेड नोटेशन ( obj ['a'] ) का उपयोग करके कुंजी तक पहुँचा जा सकता है।

याद रखें कि कुंजी होने पर कोष्ठक का उपयोग किया जाना चाहिए:

एक मान्य जावास्क्रिप्ट पहचानकर्ता नहीं है (इसमें एक स्थान है, एक डैश है, यह एक नंबर से शुरू होता है ...)
एक चर है।

जेएस में वस्तुओं के बनने पर उनमें से एक गुण को प्रोटोटाइप कहा जाता है, और यह एक बहुत ही महत्वपूर्ण अवधारणा है।

प्रोटोटाइप

जावास्क्रिप्ट में प्रत्येक वस्तु में एक आंतरिक गुण है जिसे प्रोटोटाइप कहा जाता है। अधिकांश ब्राउज़रों में, आप इसे __proto__ पदनाम द्वारा संदर्भित कर सकते हैं।

प्रोटोटाइप जावास्क्रिप्ट में संपत्ति विरासत प्रदान करने का एक तरीका है। तो आप मेमोरी में कोड डुप्लिकेट किए बिना कार्यक्षमता साझा कर सकते हैं। विधि दो वस्तुओं के बीच संबंध बनाकर काम करती है।

सीधे शब्दों में कहें तो प्रोटोटाइप एक वस्तु से दूसरी वस्तु के लिए एक सूचक बनाता है।

प्रोटोटाइप श्रृंखला

हर बार जेएस ऑब्जेक्ट में एक संपत्ति की खोज करता है और इसे सीधे ऑब्जेक्ट पर ही नहीं खोजता है, यह प्रोटोटाइप ऑब्जेक्ट में संपत्ति की उपस्थिति की जांच करता है। यदि इसमें कोई संपत्ति नहीं है, तो जेएस संबंधित वस्तु के प्रोटोटाइप में खोज जारी रखेगा। यह तब तक जारी रहेगा जब तक जेएस को एक उपयुक्त संपत्ति नहीं मिलती या श्रृंखला के अंत तक नहीं पहुंच जाता।

आइए एक उदाहरण देखें:

var cons = function () {   this.a = 1;   this.b = 2; } var obj = new cons(); </i>  cons.prototype.b = 3; cons.prototype.c = 4;

विपक्ष एक कंस्ट्रक्टर है (बस एक फ़ंक्शन जिसे नए ऑपरेटर का उपयोग करके बुलाया जा सकता है)।

पांचवीं पंक्ति पर, हम एक नई वस्तु बनाते हैं - विपक्ष की एक नई प्रति। बनाने के तुरंत बाद, obj को एक प्रोटोटाइप संपत्ति भी मिलती है।

और अब हम ऑब्जेक्ट ऑब्जेक्ट के प्रोटोटाइप में ( 'बी', 'सी' ) जोड़ते हैं।
Obj पर विचार करें:

obj.a // 1 - सब कुछ पहले जैसा है, obj.a अभी भी 1 है।
obj.c - obj के पास कोई सी संपत्ति नहीं है! हालांकि, जैसा कि पहले उल्लेख किया गया है, जेएस अब obj प्रोटोटाइप में इसकी तलाश करेगा और 4 का मान लौटाएगा।

अब चलिए सोचते हैं कि obj.b का मूल्य क्या है और जब हम obj.b को हटाते हैं तो यह क्या बन जाता है ?

Obj.b 2 है। हमने प्रॉपर्टी b को असाइन किया है, लेकिन हमने इसे प्रोटोटाइप के लिए दिया है, इसलिए जब हम obj.b की जांच करते हैं , तब भी हमें 2 मिलते हैं। हालाँकि, obj.b को हटाने के तुरंत बाद , JS अब o b पर b नहीं खोज पाएगा। , और इसलिए प्रोटोटाइप में खोज जारी रखेंगे और मान 3 लौटाएंगे।

आगे, मैं संक्षेप में एक वस्तु बनाने के लिए विभिन्न तरीकों के बारे में बात करना चाहता हूं और प्रोटोटाइप के बारे में थोड़ा और जानना चाहता हूं।

वस्तु निर्माण

ऑब्जेक्ट शाब्दिक: आज्ञा देना obj = {a: 1};
हमने निम्नलिखित प्रोटोटाइप श्रृंखला के साथ एक ऑब्जेक्ट बनाया: obj ---> Object.prototype ---> null
जैसा कि आप अनुमान लगा सकते हैं, object.prototyp ऑब्जेक्ट का प्रोटोटाइप है, साथ ही प्रोटोटाइप चेन का अंत भी है।

Object.create (): var newObj = Object.create (obj);
NewObj में निम्नलिखित प्रोटोटाइप श्रृंखला होगी: newObj ---> obj ---> Object.prototype ---> null

डिजाइनर। जैसा कि ऊपर के उदाहरण में, कंस्ट्रक्टर सिर्फ एक जेएस फ़ंक्शन है जो हमें नए ऑपरेटर का उपयोग करने के लिए इसके नए उदाहरण बनाने की अनुमति देता है।

ES6 वर्ग:

 class rectangle { constructor(height, width) { this.height = height; this.width = width; } getArea() { return this.height * this.width; } } let square = new rectangle(2, 2);

स्क्वायर आयत निर्माता का एक उदाहरण है, और इसलिए हम square.getArea () // 4 , square. उपलब्धता , साथ ही object.prototype से विरासत में प्राप्त सभी कार्यों को कॉल कर सकते हैं।

कौन सा तरीका बेहतर है? यदि आप कई उदाहरण बनाने की योजना बनाते हैं, तो आप ES6 या कंस्ट्रक्टर का उपयोग कर सकते हैं। यदि आप एक बार एक ऑब्जेक्ट बनाने की योजना बनाते हैं, तो शाब्दिक निर्दिष्ट करना बेहतर है, क्योंकि यह सबसे आसान तरीका है।

और अब, जब हमने प्रोटोटाइप के बारे में सीखा और नई वस्तुओं को बनाने के सभी तरीकों से परिचित हो गए, तो हम वस्तुओं से जुड़े सबसे भ्रामक पहलुओं में से एक पर चर्चा करने के लिए आगे बढ़ सकते हैं।

वस्तुओं की तुलना और संशोधन करना

जावास्क्रिप्ट में, वस्तुएँ संदर्भ प्रकार की होती हैं

जब हम एक ऑब्जेक्ट बनाते हैं तो obj = {a: 1}; , चर obj को ऑब्जेक्ट की मेमोरी में पता मिलता है, लेकिन इसका मूल्य नहीं! इस अंतर को समझना अनिवार्य है, क्योंकि त्रुटियां अन्यथा हो सकती हैं। जब हम एक और ऑब्जेक्ट बनाते हैं newObj = obj , हम वास्तव में मेमोरी ओब्ज के एक निश्चित क्षेत्र के लिए एक पॉइंटर बनाते हैं, न कि पूरी तरह से नई ऑब्जेक्ट।

इसका मतलब यह है कि newObj.a = 2 को निष्पादित करके , हम वास्तव में obj को बदलते हैं ताकि obj.a 2 हो जाए!

यह दृष्टिकोण आसानी से कीड़े की उपस्थिति की ओर जाता है, इसलिए कई कंपनियां अपरिवर्तनीय वस्तुओं के साथ काम करती हैं। पहले से बनाई गई वस्तु को बदलने के बजाय, आपको फिर से एक नई वस्तु (मूल की एक प्रति) बनानी होगी और उसमें पहले से ही बदलाव करने होंगे। यह है कि Redux जैसे महत्वपूर्ण पुस्तकालय कैसे काम करते हैं, और कुल मिलाकर यह कार्यात्मक प्रोग्रामिंग की बुनियादी अवधारणाओं में से एक है। और पढ़ें यहाँ

समानता

ऊपर से यह भी है कि दो वस्तुएं कभी भी समान नहीं हो सकती हैं, भले ही उनके गुण समान हों। यह इस तथ्य के कारण है कि जेएस वास्तव में स्मृति में वस्तुओं के स्थान की तुलना करता है, और दो वस्तुएं एक ही मेमोरी सेल में कभी नहीं होती हैं।

 // Two distinct objects with the same properties are not equal var fruit = {name: 'apple'}; var fruitbear = {name: 'apple'}; fruit === fruitbear; // return false // here fruit and fruitbear are pointing to same object var fruit = {name: 'apple'}; var fruitbear = fruit; fruit === fruitbear; // return true

तो, आप सबसे पहले से ही सोच रहे थे कि वस्तुओं की तुलना कैसे करें या वस्तुओं के साथ विभिन्न जोड़तोड़ कैसे करें, उनकी अपरिवर्तनीयता की आवश्यकता को देखते हुए।

कुछ संभावनाओं पर विचार करें।

वस्तु परिवर्तन

माना कि यह स्पष्ट है कि अच्छे तरीके से हमें वस्तुओं को नहीं बदलना चाहिए, इसलिए हम संबंधित वस्तु की एक प्रति बनाना चाहते हैं और इसके गुणों को बदलना चाहते हैं। Object.assign () बचाव के लिए आता है।

 var obj = { a : 1, b : 2}; var newObj = Object.assign({}, obj,{a:2}) // {a : 2, b : 2 }

यदि हम obj की संपत्ति का मूल्य बदलना चाहते हैं, तो हम obj की एक प्रति बनाने और उसे बदलने के लिए object.assign का उपयोग कर सकते हैं।

उदाहरण दिखाता है कि हम पहले एक खाली वस्तु बनाते हैं, फिर obj मानों की नकल करते हैं और हमारे परिवर्तन करते हैं, अंत में एक नई और तैयार-से-उपयोग वाली वस्तु प्राप्त करते हैं।

कृपया ध्यान दें कि यह विधि गहरी नकल के लिए काम नहीं करेगी। गहरी नकल की बात करते हुए, हमारा मतलब है कि आपको किसी वस्तु को एक या अधिक गुणों से कॉपी करने की आवश्यकता है।

 const obj = {a : 1, b : { a : 1 } }; // b property is an object

Object.assign () ऑब्जेक्ट के गुणों की प्रतिलिपि बनाता है, इसलिए यदि संपत्ति का मूल्य किसी ऑब्जेक्ट का पॉइंटर है, तो केवल पॉइंटर की प्रतिलिपि बनाई जाती है।

डीप कॉपी करने के लिए एक पुनरावर्ती ऑपरेशन की आवश्यकता होती है। आप यहां एक फ़ंक्शन लिख सकते हैं या केवल लोदश लाइब्रेरी से _.cloneDeep विधि का उपयोग कर सकते हैं।

वस्तु तुलना

वस्तुओं के साथ काम करने का एक अच्छा तरीका है - लाइन रूपांतरण। निम्नलिखित उदाहरण में, हम दोनों वस्तुओं को स्ट्रिंग्स में बदलते हैं और उनकी तुलना करते हैं:

 JSON.stringify(obj1) === JSON.stringify(obj2)

यह दृष्टिकोण उचित है, क्योंकि अंत में हम एक सूचक का प्रतिनिधित्व करने वाले तार की तुलना एक मूल्य प्रकार से करते हैं। बुरी खबर यह है कि यह हमेशा काम नहीं करता है, मुख्य रूप से क्योंकि वस्तु के गुणों के एक या दूसरे आदेश की गारंटी नहीं है।

एक और अच्छा समाधान है लोदश से _.इसक्वाल विधि का उपयोग करना, जो वस्तुओं की गहरी तुलना करता है।

और खत्म होने से पहले, आइए वस्तुओं के बारे में अक्सर पूछे जाने वाले प्रश्नों पर जाएं। यह विषय में गहराई से तल्लीन करने और अधिग्रहीत ज्ञान को व्यवहार में लाने में मदद करेगा।

उत्तर पढ़ने से पहले समाधान के बारे में स्वयं सोचने की कोशिश करें।

किसी वस्तु की लंबाई का पता कैसे लगाएं?

उत्तर प्राप्त करने के लिए, एक-एक करके वस्तु के सभी गुणों को छाँटना और उन्हें गिनना आवश्यक है। इस पुनरावृत्ति को करने के कई तरीके हैं:

के लिए यह विधि किसी ऑब्जेक्ट और उसके प्रोटोटाइप श्रृंखला के सभी गणनीय गुणों को कवर करती है। हम प्रोटोटाइप के साथ परिचित हो गए (और, मुझे आशा है, सामग्री सीखी), इसलिए यह स्पष्ट होना चाहिए कि ऑब्जेक्ट के गुणों को प्राप्त करने के लिए इनका उपयोग हमेशा सही नहीं होगा।
ऑब्जेक्ट । यह विधि एक सरणी देता है जिसमें सभी की अपनी (निर्दिष्ट ऑब्जेक्ट से संबंधित) महत्वपूर्ण गुण हैं। यह दृष्टिकोण बेहतर है, क्योंकि हम केवल प्रोटोटाइप के गुणों का सहारा लिए बिना, ऑब्जेक्ट के गुणों पर काम करते हैं। हालाँकि, ऐसी स्थितियाँ होती हैं जब आप किसी गुण के गुण को असत्य पर सेट करते हैं, और object.keys अंततः इसे छोड़ देता है, और आपको एक गलत परिणाम मिलता है। यह शायद ही कभी होता है, लेकिन ऐसे मामलों में getOwnPropertyNames काम आएगा ।
getOwnPropertyNames एक सरणी देता है जिसमें सभी ऑब्जेक्ट की अपनी कुंजियाँ होती हैं (दोनों गणनीय और बेशुमार)।

इसके अलावा उल्लेख के लायक:

Object.values अपने स्वयं के गिनती गुणों पर पुनरावृत्त करता है और संबंधित मानों के साथ एक सरणी देता है।
Object.entries अपने स्वयं के गिनती गुणों पर पुनरावृत्त करता है और कुंजियों और उनके मूल्यों के साथ एक सरणी देता है ।

मुझे लगता है कि आपने देखा है कि ऊपर सूचीबद्ध अधिकांश विधियाँ एक सरणी लौटाती हैं। यह सरणियों के साथ काम करने के लिए जावास्क्रिप्ट विधियों का पूरा लाभ उठाने का एक अवसर है।

ऐसी ही एक विधि है अरेंजमेंट । अंत में, हम बस लिख सकते हैं

 let objLength = Object.getOwnPropertyNames(obj).length;

यदि कोई वस्तु खाली है तो कैसे जांचें?

JSON.stringify (myObj) === "{}" । यहां हम फिर से स्ट्रिंग रूपांतरण टूल का उपयोग करते हैं, जिससे यह जांचना आसान हो जाता है कि कोई वस्तु खाली है (तारों की तुलना नहीं, वस्तुओं की)।
ऑब्जेक्ट .keys (myobj) .length // true । जैसा कि मैंने उल्लेख किया है, किसी वस्तु की कुंजियों को किसी सरणी में परिवर्तित करना बहुत उपयोगी हो सकता है। यहां हम Array.prototype से विरासत में मिली सुविधाजनक संपत्ति की लंबाई का उपयोग करते हैं, इसके साथ सरणी में कुंजियों की लंबाई की जाँच करते हैं। जेएस में, 0 गलत हो जाता है, इसलिए जोड़ रहा है ! हम इसे सच में बदलते हैं। कोई भी अन्य संख्या झूठी हो जाएगी।

निष्कर्ष में

मुझे उम्मीद है कि अब आप वस्तुओं को बनाने और उनके साथ काम करने में अधिक आत्मविश्वास महसूस करेंगे। आइए संक्षेप:

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

जावास्क्रिप्ट वस्तुओं को सीखने का सौभाग्य।

हम जावास्क्रिप्ट में वस्तुओं से निपटते हैं