इस "हैक" को समझने के लिए कई चीजों को समझने की आवश्यकता है:
- हम ऐसा क्यों नहीं करते
Array(5).map(...)
- कैसे
Function.prototype.applyतर्कों को संभालता है
- कैसे
Arrayकई तर्कों को संभालता है
- कैसे
Numberफ़ंक्शन तर्कों को संभालता है
- क्या
Function.prototype.callकरता है
वे बल्कि जावास्क्रिप्ट में उन्नत विषय हैं, इसलिए यह अधिक-से-अधिक लंबा होगा। हम ऊपर से शुरू करेंगे। सीट बेल्ट लगा लो!
1. सिर्फ क्यों नहीं Array(5).map?
क्या एक सरणी है, वास्तव में? एक नियमित ऑब्जेक्ट, जिसमें पूर्णांक कुंजियाँ होती हैं, जो मानों के लिए मैप करती हैं। उदाहरण के लिए, जादुई lengthचर में इसकी अन्य विशेष विशेषताएं हैं, लेकिन key => valueकिसी भी अन्य वस्तु की तरह , यह एक नियमित मानचित्र है। चलो सरणियों के साथ थोड़ा खेलते हैं, हम करेंगे?
var arr = ['a', 'b', 'c'];
arr.hasOwnProperty(0); //true
arr[0]; //'a'
Object.keys(arr); //['0', '1', '2']
arr.length; //3, implies arr[3] === undefined
//we expand the array by 1 item
arr.length = 4;
arr[3]; //undefined
arr.hasOwnProperty(3); //false
Object.keys(arr); //['0', '1', '2']
हमें सरणी में आइटमों arr.lengthकी संख्या, और key=>valueसरणी की मैपिंग की संख्या के बीच अंतर्निहित अंतर मिलता है, जो इससे भिन्न हो सकता है arr.length।
सरणी का विस्तार करके कोई नया मैपिंग arr.length नहीं बनाता है key=>value, इसलिए ऐसा नहीं है कि सरणी में अपरिभाषित मान हैं, लेकिन इसमें कोई कुंजी नहीं है । और जब आप किसी गैर-मौजूद संपत्ति तक पहुँचने की कोशिश करते हैं तो क्या होता है? आपको मिलता है undefined।
अब हम अपने सिर को थोड़ा ऊपर उठा सकते हैं, और देख सकते हैं कि arr.mapइन गुणों पर कार्य क्यों नहीं चलते हैं। यदि arr[3]इसे केवल अपरिभाषित किया गया था, और कुंजी मौजूद थी, तो ये सभी सरणी कार्य किसी अन्य मूल्य की तरह ही इस पर चले जाएंगे:
//just to remind you
arr; //['a', 'b', 'c', undefined];
arr.length; //4
arr[4] = 'e';
arr; //['a', 'b', 'c', undefined, 'e'];
arr.length; //5
Object.keys(arr); //['0', '1', '2', '4']
arr.map(function (item) { return item.toUpperCase() });
//["A", "B", "C", undefined, "E"]
मैंने जानबूझकर आगे की बात साबित करने के लिए एक मेथड कॉल का इस्तेमाल किया जो कि खुद ही कभी नहीं था: कॉलिंग undefined.toUpperCaseने एक त्रुटि उठाई होगी, लेकिन यह नहीं हुआ। साबित करने के लिए कि :
arr[5] = undefined;
arr; //["a", "b", "c", undefined, "e", undefined]
arr.hasOwnProperty(5); //true
arr.map(function (item) { return item.toUpperCase() });
//TypeError: Cannot call method 'toUpperCase' of undefined
और अब हम अपनी बात पर आते हैं: Array(N)चीजें कैसी होती हैं। धारा 15.4.2.2 प्रक्रिया का वर्णन करती है। मुम्बो जंबो का एक समूह है जिसकी हम परवाह नहीं करते हैं, लेकिन यदि आप लाइनों के बीच पढ़ने का प्रबंधन करते हैं (या आप सिर्फ इस एक पर मुझ पर भरोसा कर सकते हैं, लेकिन नहीं), यह मूल रूप से इस पर उबलता है:
function Array(len) {
var ret = [];
ret.length = len;
return ret;
}
(इस धारणा के तहत संचालित होता है (जो वास्तविक कल्पना में जांचा जाता है) जो कि lenएक मान्य uint32 है, और न ही किसी भी मूल्य का)
तो अब आप देख सकते हैं कि काम क्यों Array(5).map(...)नहीं करेगा - हम lenसरणी पर आइटम को परिभाषित नहीं करते हैं , हम key => valueमैपिंग नहीं बनाते हैं , हम बस lengthसंपत्ति में परिवर्तन करते हैं।
अब जब कि हमारे पास है, तो दूसरी जादुई चीज़ देखें:
2. कैसे Function.prototype.applyकाम करता है
applyमूल रूप से एक सरणी क्या है, और इसे फ़ंक्शन कॉल के तर्कों के रूप में अनियंत्रित करें। इसका मतलब है कि निम्नलिखित बहुत अधिक समान हैं:
function foo (a, b, c) {
return a + b + c;
}
foo(0, 1, 2); //3
foo.apply(null, [0, 1, 2]); //3
अब, हम यह देखने की प्रक्रिया को आसान कर सकते हैं कि कैसे विशेष चर को applyलॉग करके काम करता है arguments:
function log () {
console.log(arguments);
}
log.apply(null, ['mary', 'had', 'a', 'little', 'lamb']);
//["mary", "had", "a", "little", "lamb"]
//arguments is a pseudo-array itself, so we can use it as well
(function () {
log.apply(null, arguments);
})('mary', 'had', 'a', 'little', 'lamb');
//["mary", "had", "a", "little", "lamb"]
//a NodeList, like the one returned from DOM methods, is also a pseudo-array
log.apply(null, document.getElementsByTagName('script'));
//[script, script, script, script, script, script, script, script, script, script, script, script, script, script, script, script, script, script, script, script]
//carefully look at the following two
log.apply(null, Array(5));
//[undefined, undefined, undefined, undefined, undefined]
//note that the above are not undefined keys - but the value undefined itself!
log.apply(null, {length : 5});
//[undefined, undefined, undefined, undefined, undefined]
दूसरे-से-अंतिम उदाहरण में अपना दावा साबित करना आसान है:
function ahaExclamationMark () {
console.log(arguments.length);
console.log(arguments.hasOwnProperty(0));
}
ahaExclamationMark.apply(null, Array(2)); //2, true
(हाँ, इरादा इरादा)। key => valueमानचित्रण सरणी हम करने के लिए पर पारित में ही अस्तित्व में नहीं हो सकता है apply, लेकिन यह निश्चित रूप में मौजूद है argumentsचर। यही कारण है कि अंतिम उदाहरण काम करता है: हम जिस वस्तु से गुजरते हैं, उस पर चाबियाँ मौजूद नहीं हैं, लेकिन वे मौजूद नहीं हैं arguments।
ऐसा क्यों है? आइए धारा 15.3.4.3 को देखें , जहां Function.prototype.applyपरिभाषित किया गया है। ज्यादातर चीजें जिनके बारे में हम परवाह नहीं करते हैं, लेकिन यहां दिलचस्प हिस्सा है:
- आइए हम तर्क [लंबाई] के साथ argArray की [[प्राप्त करें]] आंतरिक पद्धति को कॉल करने का परिणाम बनें।
जिसका मूल अर्थ है argArray.length:। तब आइटम एक साधारण forलूप को lengthआइटम पर करने के लिए आगे बढ़ता है , listइसी मूल्यों को बनाता है ( listकुछ आंतरिक जादू है, लेकिन यह मूल रूप से एक सरणी है)। बहुत, बहुत ढीले कोड के संदर्भ में:
Function.prototype.apply = function (thisArg, argArray) {
var len = argArray.length,
argList = [];
for (var i = 0; i < len; i += 1) {
argList[i] = argArray[i];
}
//yeah...
superMagicalFunctionInvocation(this, thisArg, argList);
};
तो argArrayइस मामले में हम सभी की नकल करने की जरूरत है एक lengthसंपत्ति के साथ एक वस्तु है । और अब हम देख सकते हैं कि मान अपरिभाषित क्यों हैं, लेकिन कुंजियाँ नहीं हैं, पर arguments: हम key=>valueमैपिंग बनाते हैं ।
काहे, तो यह पिछले हिस्से से कम नहीं हो सकता है। लेकिन जब हम खत्म करेंगे तो केक होगा, इसलिए धैर्य रखें! हालाँकि, निम्न अनुभाग के बाद (जो छोटा होगा, मैं वादा करता हूँ) हम अभिव्यक्ति को विच्छेदित करना शुरू कर सकते हैं। यदि आप भूल गए हैं, तो सवाल यह है कि निम्नलिखित कार्य कैसे किया गया था:
Array.apply(null, { length: 5 }).map(Number.call, Number);
3. कैसे Arrayकई तर्कों को संभालता है
इसलिए! हमने देखा कि जब आप किसी lengthतर्क को पास करते हैं तो क्या होता है Array, लेकिन अभिव्यक्ति में, हम कई चीजों को तर्क के रूप में पारित करते हैं ( undefinedसटीक होने के लिए 5 की एक सरणी )। धारा 15.4.2.1 हमें बताती है कि क्या करना है। आखिरी पैराग्राफ वह सब है जो हमारे लिए मायने रखता है, और यह वास्तव में अजीब तरह से शब्द है , लेकिन यह इस तरह से उबलता है:
function Array () {
var ret = [];
ret.length = arguments.length;
for (var i = 0; i < arguments.length; i += 1) {
ret[i] = arguments[i];
}
return ret;
}
Array(0, 1, 2); //[0, 1, 2]
Array.apply(null, [0, 1, 2]); //[0, 1, 2]
Array.apply(null, Array(2)); //[undefined, undefined]
Array.apply(null, {length:2}); //[undefined, undefined]
टाडा! हमें कई अपरिभाषित मानों की एक सरणी मिलती है, और हम इन अपरिभाषित मूल्यों की एक सरणी लौटाते हैं।
अभिव्यक्ति का पहला भाग
अंत में, हम निम्नलिखित को समझ सकते हैं:
Array.apply(null, { length: 5 })
हमने देखा कि यह एक सरणी देता है जिसमें 5 अपरिभाषित मान होते हैं, जिसमें सभी अस्तित्व में चाबियाँ होती हैं।
अब, अभिव्यक्ति के दूसरे भाग में:
[undefined, undefined, undefined, undefined, undefined].map(Number.call, Number)
यह आसान, गैर-जटिल हिस्सा होगा, क्योंकि यह अस्पष्ट हैक पर इतना भरोसा नहीं करता है।
4. Numberइनपुट कैसे व्यवहार करता है
डूइंग Number(something)( सेक्शन 15.7.1 ) somethingएक नंबर में कनवर्ट करता है, और वह सब है। यह कैसे होता है कि यह थोड़ा जटिल है, विशेष रूप से स्ट्रिंग्स के मामलों में, लेकिन यह खंड 9.3 में परिभाषित किया गया है , यदि आप रुचि रखते हैं।
5. का खेल Function.prototype.call
callहै apply'भाई, में परिभाषित खंड 15.3.4.4 । तर्कों की एक सरणी लेने के बजाय, यह केवल प्राप्त तर्कों को लेता है, और उन्हें आगे बढ़ाता है।
चीजें दिलचस्प हो जाती हैं जब आप एक से अधिक श्रृंखला बनाते callहैं, तो अजीब को 11 तक क्रैंक करते हैं:
function log () {
console.log(this, arguments);
}
log.call.call(log, {a:4}, {a:5});
//{a:4}, [{a:5}]
//^---^ ^-----^
// this arguments
यह काफी wtf योग्य है जब तक आप समझ नहीं लेते कि क्या हो रहा है। log.callकेवल एक फ़ंक्शन है, जो किसी अन्य फ़ंक्शन की callविधि के बराबर है , और जैसे कि, अपने आप में एक callविधि भी है:
log.call === log.call.call; //true
log.call === Function.call; //true
और क्या करता callहै? यह thisArgतर्कों का एक गुच्छा स्वीकार करता है , और इसके मूल कार्य को कहता है। हम इसे apply फिर से परिभाषित कर सकते हैं (फिर से, बहुत ढीला कोड, काम नहीं करेगा):
Function.prototype.call = function (thisArg) {
var args = arguments.slice(1); //I wish that'd work
return this.apply(thisArg, args);
};
आइए देखें कि यह कैसे नीचे जाता है:
log.call.call(log, {a:4}, {a:5});
this = log.call
thisArg = log
args = [{a:4}, {a:5}]
log.call.apply(log, [{a:4}, {a:5}])
log.call({a:4}, {a:5})
this = log
thisArg = {a:4}
args = [{a:5}]
log.apply({a:4}, [{a:5}])
बाद का हिस्सा, या .mapयह सब
यह अभी तक खत्म नहीं हुआ है। आइए देखें कि क्या होता है जब आप किसी फ़ंक्शन को अधिकांश सरणी विधियों में आपूर्ति करते हैं:
function log () {
console.log(this, arguments);
}
var arr = ['a', 'b', 'c'];
arr.forEach(log);
//window, ['a', 0, ['a', 'b', 'c']]
//window, ['b', 1, ['a', 'b', 'c']]
//window, ['c', 2, ['a', 'b', 'c']]
//^----^ ^-----------------------^
// this arguments
यदि हम thisस्वयं एक तर्क प्रदान नहीं करते हैं, तो यह चूक है window। उस आदेश पर ध्यान दें जिसमें तर्क हमारे कॉलबैक को प्रदान किए गए हैं, और चलो इसे फिर से 11 तक पूरे करने के लिए अजीब है:
arr.forEach(log.call, log);
//'a', [0, ['a', 'b', 'c']]
//'b', [1, ['a', 'b', 'c']]
//'b', [2, ['a', 'b', 'c']]
// ^ ^
वाहा वो कौन… थोडा ऊपर चलो। यहाँ क्या चल रहा है? हम खंड 15.4.4.18 में देख सकते हैं , जहां forEachपरिभाषित किया गया है, निम्नलिखित बहुत कुछ होता है:
var callback = log.call,
thisArg = log;
for (var i = 0; i < arr.length; i += 1) {
callback.call(thisArg, arr[i], i, arr);
}
तो, हम इसे प्राप्त करते हैं:
log.call.call(log, arr[i], i, arr);
//After one `.call`, it cascades to:
log.call(arr[i], i, arr);
//Further cascading to:
log(i, arr);
अब हम देख सकते हैं कि कैसे .map(Number.call, Number)काम करता है:
Number.call.call(Number, arr[i], i, arr);
Number.call(arr[i], i, arr);
Number(i, arr);
जो iएक नंबर पर, वर्तमान सूचकांक के परिवर्तन को लौटाता है ।
निष्कर्ष के तौर पर,
भाव
Array.apply(null, { length: 5 }).map(Number.call, Number);
दो भागों में काम करता है:
var arr = Array.apply(null, { length: 5 }); //1
arr.map(Number.call, Number); //2
पहला भाग 5 अपरिभाषित वस्तुओं की एक सरणी बनाता है। दूसरा उस सरणी पर जाता है और उसके सूचकांकों को लेता है, जिसके परिणामस्वरूप तत्व सूचकांकों की एक सरणी होती है:
[0, 1, 2, 3, 4]
Array.apply(null, Array(30)).map(Number.call, Number)को पढ़ना आसान है क्योंकि यह दिखावा करने से बचता है कि एक सादा वस्तु एक ऐरे है।