परिभाषित या अपरिभाषित? जावास्क्रिप्ट में सरणियाँ बनाने की मात्रा

कुछ महीने पहले मैंने स्टैकओवरफ्लो पर एक दिलचस्प सवाल पर ठोकर खाई थी, जहां, संक्षेप में, एक व्यक्ति एक खाली 5x5 मैट्रिक्स बनाना चाहता था, और एक विधि का उपयोग करके वह सफल हुआ, लेकिन दूसरे का उपयोग नहीं किया। आगामी चर्चा में, इस विषय पर दिलचस्प विचारों का हवाला दिया गया था।

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

नोट: मैंने उस चर्चा के तहत, एंड्रीजीएस उपनाम के तहत भी जवाब दिया - वहां मैंने संक्षेप में उत्तर दिया, यहां मैं पूरी तरह से समस्या को कवर करने का प्रयास करूंगा।

सामान्य तौर पर, एक सरणी बनाने के लिए चुनौती है। हम यह कैसे करने जा रहे हैं? अजीब तरह से पर्याप्त, अलग-अलग विकल्प हैं, जो हम प्राप्त करना चाहते हैं उसके आधार पर।

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

सरणियों का निर्माण करते समय, एक ख़ासियत है: अगर हम ऐरे (...) या नए ऐरे (...) का उपयोग करते हैं, तो यह कोई मायने नहीं रखता है - ECMAScript विनिर्देश उनके बीच अंतर नहीं करता है और इसके अलावा, इसे समकक्ष मानता है।

22.1.1 The Array Constructor The Array constructor is the %Array% intrinsic object and the initial value of the Array property of the global object. When called as a constructor it creates and initializes a new exotic Array object. When Array is called as a function rather than as a constructor, it also creates and initializes a new Array object. Thus the function call Array(…) is equivalent to the object creation expression new Array(…) with the same arguments. 

इसलिए, मैं शरारती रूप से दर्शन नहीं दूंगा, और उदाहरणों में मैं केवल नए ऐरे (...) निर्माण का उपयोग करूंगा, ताकि किसी को भ्रमित न करें।

चलिए शुरू करते हैं।

एक सरणी बनाएँ:

 let arr = new Array(5); 

हमें क्या मिला?

 console.log(arr); // Array(5) [ <5 empty slots> ] console.log(arr[0]); // undefined console.log(Object.getOwnPropertyDescriptor(arr,"0")); // undefined 

हम्म ... ठीक है, सिद्धांत रूप में, यह ऐसा होना चाहिए - हमने लंबाई निर्धारित की और पांच खाली कोशिकाएं प्राप्त कीं , जिनका मूल्य अपरिभाषित है , जिसे आगे भी काम किया जा सकता है, है ना? सच है, कुछ ऐसे बिंदु हैं जो मुझे भ्रमित करते हैं। आइए इसे देखें।

 let arr = new Array(5).map(function() { return new Array(5); }); console.log(arr); // Array(5) [ <5 empty slots> ] console.log(arr[0]); // undefined console.log(Object.getOwnPropertyDescriptor(arr,"0")); // undefined console.log(arr[0][0]); // TypeError: arr[0] is undefined 

यह कैसा है, आखिरकार, हमें एक मैट्रिक्स प्राप्त करना था, और प्रत्येक कोशिका में, तदनुसार, 5 तत्वों की एक सरणी होनी चाहिए ...

आइए हम फिर से ECMAScript डॉक्यूमेंट की ओर मुड़ें और देखें कि एक तर्क के साथ सरणियाँ बनाने की विधि के बारे में इसमें क्या लिखा है:

 22.1.1.2 Array (len) This description applies if and only if the Array constructor is called with exactly one argument. 1. Let numberOfArgs be the number of arguments passed to this function call. 2. Assert: numberOfArgs = 1. 3. If NewTarget is undefined, let newTarget be the active function object, else let newTarget be NewTarget. 4. Let proto be GetPrototypeFromConstructor(newTarget, "%ArrayPrototype%"). 5. ReturnIfAbrupt(proto). 6. Let array be ArrayCreate(0, proto). 7. If Type(len) is not Number, then 1. Let defineStatus be CreateDataProperty(array, "0", len). 2. Assert: defineStatus is true. 3. Let intLen be 1. 8. Else, 1. Let intLen be ToUint32(len). 2. If intLen ≠ len, throw a RangeError exception. 9. Let setStatus be Set(array, "length", intLen, true). 10. Assert: setStatus is not an abrupt completion. 11. Return array. 

और, जो हम देखते हैं, यह पता चला है कि वस्तु बनाई गई है, लंबाई संपत्ति ArrayCreate प्रक्रिया (बिंदु 6) में बनाई गई है, लंबाई संपत्ति में मान नीचे सेट किया गया है (बिंदु 9), और कोशिकाओं के बारे में क्या? विशेष मामले के अलावा जब तर्क पारित किया गया है तो कोई संख्या नहीं है, और एक सरणी एक सेल "0" के साथ इसी मूल्य (बिंदु 7) के साथ बनाई गई है, उनके बारे में एक शब्द नहीं है ... अर्थात, वहाँ == 5 लंबाई है, लेकिन कोई पांच सेल नहीं है। हां, कंपाइलर हमें भ्रमित करता है जब हम किसी एकल कक्ष तक पहुंचने का प्रयास करते हैं, तो यह पता चलता है कि इसका मूल्य अपरिभाषित है , जबकि यह वास्तव में नहीं है।

यहां, तुलना के लिए, कंस्ट्रक्टर को भेजे गए कई तर्कों के साथ ऐरे बनाने की विधि:

 22.1.1.3 Array (...items ) This description applies if and only if the Array constructor is called with at least two arguments. When the Array function is called the following steps are taken: 1. Let numberOfArgs be the number of arguments passed to this function call. 2. Assert: numberOfArgs ≥ 2. 3. If NewTarget is undefined, let newTarget be the active function object, else let newTarget be NewTarget. 4. Let proto be GetPrototypeFromConstructor(newTarget, "%ArrayPrototype%"). 5. ReturnIfAbrupt(proto). 6. Let array be ArrayCreate(numberOfArgs, proto). 7. ReturnIfAbrupt(array). 8. Let k be 0. 9. Let items be a zero-origined List containing the argument items in order. 10. Repeat, while k < numberOfArgs 1. Let Pk be ToString(k). 2. Let itemK be items[k]. 3. Let defineStatus be CreateDataProperty(array, Pk, itemK). 4. Assert: defineStatus is true. 5. Increase k by 1. 11. Assert: the value of array's length property is numberOfArgs. 12. Return array. 

यहां, कृपया - 10 बिंदु, उन्हीं कोशिकाओं का निर्माण।

और अब, Array.prototyp.map () आगे क्या करता है?

 22.1.3.15 Array.prototype.map ( callbackfn [ , thisArg ] ) 1. Let O be ToObject(this value). 2. ReturnIfAbrupt(O). 3. Let len be ToLength(Get(O, "length")). 4. ReturnIfAbrupt(len). 5. If IsCallable(callbackfn) is false, throw a TypeError exception. 6. If thisArg was supplied, let T be thisArg; else let T be undefined. 7. Let A be ArraySpeciesCreate(O, len). 8. ReturnIfAbrupt(A). 9. Let k be 0. 10. Repeat, while k < len 1. Let Pk be ToString(k). 2. Let kPresent be HasProperty(O, Pk). 3. ReturnIfAbrupt(kPresent). 4. If kPresent is true, then 1. Let kValue be Get(O, Pk). 2. ReturnIfAbrupt(kValue). 3. Let mappedValue be Call(callbackfn, T, «kValue, k, O»). 4. ReturnIfAbrupt(mappedValue). 5. Let status be CreateDataPropertyOrThrow (A, Pk, mappedValue). 6. ReturnIfAbrupt(status). 5. Increase k by 1. 11. Return A. 

खण्ड 7 - मूल सरणी की एक प्रति बनाई गई है, खण्ड में 10 लेन पुनरावृत्तियों को इसके तत्वों पर किया जाता है, और, विशेष रूप से, यह देखने के लिए कि स्रोत सरणी में कोई विशिष्ट सेल है, तो यह देखने के लिए 10.2 जाँच करें, ताकि, यदि सफल हो, तो मानचित्र (10.4) और प्रतिलिपि में उपयुक्त सेल बनाएं - 10.4.5। चूंकि 5.2 में से प्रत्येक के लिए 10.2 गलत है, इसलिए सरणी की लौटी हुई कॉपी में एक भी सेल नहीं बनाई जाएगी।

तो, सरणी कंस्ट्रक्टर और Array.prototype.map () विधि कैसे काम करती है, हमने इसे समझ लिया था, लेकिन कार्य अनसुलझा होने से पहले बना रहा, क्योंकि मैट्रिक्स का निर्माण नहीं हुआ था। फंक्शन.प्रोटोटाइप.apply () बचाव के लिए आएगा!
आइए इसे तुरंत कार्रवाई में देखें:

 let arr = Array.apply(null, new Array(5)); console.log(arr); // Array(5) [ undefined, undefined, undefined, undefined, undefined ] console.log(arr[0]); // undefined console.log(Object.getOwnPropertyDescriptor(arr,"0")); // Object { value: undefined, writable: true, enumerable: true, configurable: true } 

हुर्रे, सभी पांच कोशिकाओं को यहां स्पष्ट रूप से देखा गया है, और पहले, परीक्षण, संख्या "0" के साथ सेल में एक डिस्क्रिप्टर है।

इस मामले में, कार्यक्रम ने निम्नानुसार काम किया:

1. हमने Function.prototype.apply () विधि को कॉल किया और इसे शून्य संदर्भ पास किया, और सरणी नया ऐरे (5) के रूप में ।
2. नई ऐरे (5) ने कोशिकाओं के बिना एक सरणी बनाई, लेकिन 5 की लंबाई के साथ।
3. Function.prototyp.apply () ने सरणी को अलग-अलग तर्कों में तोड़ने की आंतरिक विधि का उपयोग किया, परिणामस्वरूप, Array कंस्ट्रक्टर को अपरिभाषित मान के साथ पांच तर्क पारित किए।
4. एरे ने अपरिभाषित मूल्यों के साथ 5 तर्क प्राप्त किए, उन्हें संबंधित कोशिकाओं में जोड़ा।

सब कुछ स्पष्ट होने लगता है, सिवाय फ़ंक्शन की यह आंतरिक विधि क्या है ।prototype.apply () , जो 5 तर्कों को कुछ भी नहीं करता है - मैं फिर से सुझाव देता हूं कि आप ECMAScript दस्तावेज को देखें:

 19.2.3.1 Function.prototype.apply 1. If IsCallable(func) is false, throw a TypeError exception. 2. If argArray is null or undefined, then Return Call(func, thisArg). 3. Let argList be CreateListFromArrayLike(argArray). 7.3.17 CreateListFromArrayLike (obj [, elementTypes] ) 1. ReturnIfAbrupt(obj). 2. If elementTypes was not passed, let elementTypes be (Undefined, Null, Boolean, String, Symbol, Number, Object). 3. If Type(obj) is not Object, throw a TypeError exception. 4. Let len be ToLength(Get(obj, "length")). 5. ReturnIfAbrupt(len). 6. Let list be an empty List. 7. Let index be 0. 8. Repeat while index < len a. Let indexName be ToString(index). b. Let next be Get(obj, indexName). c. ReturnIfAbrupt(next). d. If Type(next) is not an element of elementTypes, throw a TypeError exception. e. Append next as the last element of list. f. Set index to index + 1. 9. Return list. 

हम सबसे दिलचस्प बिंदुओं को देखते हैं:

19.2.3.1 - पैराग्राफ 3: एक सरणी के समान ऑब्जेक्ट से तर्कों की एक सूची बनाना (जैसा कि हम याद करते हैं, ऐसी वस्तुओं की लंबाई संपत्ति होनी चाहिए)।

7.3.17 - सूची निर्माण विधि स्वयं। यह जांचता है कि वस्तु है या नहीं, और, यदि हां, तो लंबाई क्षेत्र के लिए एक अनुरोध (पैराग्राफ 4)। फिर "0" के बराबर एक इंडेक्स बनाया जाता है (पैराग्राफ 7)। एक लूप लंबाई क्षेत्र (पैराग्राफ 8) से लिया मूल्य के लिए सूचकांक की वृद्धि के साथ बनाया गया है। इस चक्र में, हम संबंधित सूचकांकों (खंड 8 ए और 8 बी) के साथ संचरित सरणी के सेल मूल्यों को संदर्भित करते हैं। और जैसा कि हम याद करते हैं, जब किसी सरणी में किसी एकल कक्ष के मूल्य तक पहुंच होती है जिसमें वास्तव में कोई कोशिका नहीं होती है, तब भी यह एक मान देता है - अपरिभाषित । परिणामी मूल्य तर्क सूची (पैरा 8e) के अंत में जोड़ा जाता है।

खैर, अब जब सब कुछ गिर गया है, तो आप सुरक्षित रूप से बहुत खाली मैट्रिक्स का निर्माण कर सकते हैं।

 let arr = Array.apply(null, new Array(5)).map(function(){ return Array.apply(null,new Array(5)); }); console.log(arr); // Array(5) [ (5) […], (5) […], (5) […], (5) […], (5) […] ] console.log(arr[0]); // Array(5) [ undefined, undefined, undefined, undefined, undefined ] console.log(Object.getOwnPropertyDescriptor(arr,"0")); // Object { value: (5) […], writable: true, enumerable: true, configurable: true } console.log(arr[0][0]); // undefined console.log(Object.getOwnPropertyDescriptor(arr[0],"0")); // Object { value: undefined, writable: true, enumerable: true, configurable: true } 

अब, जैसा कि आप देख सकते हैं, सब कुछ बहुत सरल है और दिखता है: हम, जिस तरह से हम पहले से ही जानते हैं, एक साधारण खाली Array.apply (अशक्त, नया ऐरे (5)) सरणी बनाएं और फिर इसे मैप विधि में पास करें, जो उसी सरणी को बनाता है। कोशिकाओं में से प्रत्येक।

इसके अलावा, आप इसे और भी आसान बना सकते हैं। प्रसार - ... ऑपरेटर ECMAScript6 में दिखाई दिया, और, जो विशिष्ट है, यह विशेष रूप से सरणियों के साथ भी काम करता है। इसलिए, हम बस में ड्राइव कर सकते हैं:

 let arr = new Array(...new Array(5)).map(() => new Array(...new Array(5))); 

या हम इसे पूरी तरह से सरल करेंगे, भले ही मैंने पहले नया वादा किया था कि स्पर्श न करें ...

 let arr = Array(...Array(5)).map(() => Array(...Array(5))); 

ध्यान दें: यहां हमने एरो फ़ंक्शंस का भी उपयोग किया है, क्योंकि हम अभी भी एक प्रसार ऑपरेटर के साथ काम कर रहे हैं जो उनके समान विनिर्देश में दिखाई दिए।

हम प्रसार ऑपरेटर के सिद्धांत में नहीं जाएंगे, हालांकि, सामान्य विकास के लिए, मेरा मानना ​​है कि यह उदाहरण भी उपयोगी था।

इसके अलावा, हम, निश्चित रूप से, अपने कार्यों का निर्माण कर सकते हैं, जो फंक्शन .prototype.apply () सॉर्टिंग का उपयोग करके, खाली कोशिकाओं के साथ हमारे लिए सामान्य सरणियों का निर्माण करेगा, हालांकि, जावास्क्रिप्ट के आंतरिक सिद्धांतों को समझने और, तदनुसार, सही और पर्याप्त उपयोग। अंतर्निहित कार्य, मास्टर के लिए एक आधार है जो एक प्राथमिकता है। ठीक है, और, ज़ाहिर है, यह इतना सरल तेज़ और अधिक सुविधाजनक है।

और अंत में, स्टैकओवरफ्लो पर उसी प्रश्न पर वापस लौटते हुए - वहाँ, मुझे याद है, उस व्यक्ति ने गलती से विचार किया कि उसे प्राप्त विधि सही उत्तर के लिए प्रेरित करती है, और उसे 5x5 मैट्रिक्स प्राप्त हुआ, हालांकि - वहां एक छोटी सी त्रुटि।

वह अंदर चला गया:

Array.apply(null, new Array(5)).map(function(){
return new Array(5);
});

आपको क्या लगता है कि वास्तविक परिणाम यहाँ होगा?


यह नहीं है, वह नहीं है जो वह चाहता था ...

संदर्भ:

→ ECMAScript 2015 भाषा की विशिष्टता
→ क्या है Array.apply वास्तव में कर रहे हैं