उच्चतर फ़ंक्शंस, जैसे .map (), जावास्क्रिप्ट में आंतरिक रूप से कैसे काम करते हैं?

Question

आजकल हर कोई कम कोड लिखने के साथ आशाजनक परिणाम प्राप्त करने के लिए इस तरह के उच्च-क्रम के कार्यों का उपयोग करने की कोशिश करता है । लेकिन मुझे आश्चर्य है कि ये कार्य आंतरिक रूप से कैसे काम करते हैं।

मान लीजिए अगर मैं कुछ ऐसा लिखूं

var numbers = [16, 25, 36];
var results = numbers.map(Math.sqrt);
console.log(results); // [4, 5, 6]

मुझे पता है कि 'संख्या' सरणी का प्रत्येक तत्व एक-एक करके पुनरावृत्ति कर रहा है, लेकिन कैसे ?

मैंने इसके लिए खोज करने की कोशिश की, लेकिन मुझे अभी तक कोई संतोषजनक जवाब नहीं मिला।

Comments

Array.map की पॉलीफ़िल

— AZ_

यह एक फ़ंक्शन है जिसे mapटाइप एरे में जोड़ा गया था। यह फ़ंक्शन एक पैरामीटर के रूप में एक फ़ंक्शन लेता है जिसे तब सरणी के माध्यम से लूप करते समय कहा जाता है। फ़ंक्शन कॉल के रिटर्न मान फिर एक सरणी में वापस आ जाते हैं।

— ssc-hrep3

नक्शा मूल रूप से सरणी को पुनरावृत्त करने के लिए फॉर्च की तरह काम करता है इसका मतलब है कि यह एक-एक करके सरणी के सभी तत्वों को प्राप्त करेगा और फिर प्रत्येक तत्व पर दिए गए कमांड / ऑपरेशन को लागू करेगा और फिर इसे नए सरणी में धकेल देगा।

— अदनान तारिक

Answer 1

.mapकेवल एक विधि है जो कॉलबैक स्वीकार करती है, सरणी के प्रत्येक आइटम के लिए कॉलबैक को आमंत्रित करती है, और एक नए सरणी के लिए मान असाइन करती है। इसके बारे में कुछ खास नहीं है। तुम भी इसे अपने आप को आसानी से लागू कर सकते हैं:

Array.prototype.myMap = function(callback) {
  const newArr = [];
  for (let i = 0; i < this.length; i++) {
    newArr.push(callback(this[i], i, this));
  }
  return newArr;
}

var numbers = [16, 25, 36];
var results = numbers.myMap(Math.sqrt);
console.log(results); // [4, 5, 6]

पूरी तरह से युक्ति-संगत होने के लिए, आपको अन्य चीज़ों के बीच भी जाँच करने की आवश्यकता होगी , जो कि thisएक वस्तु है, जो कि callbackकॉल करने योग्य है, और .callकॉलबैक में दूसरे पैरामीटर के साथ myMapयदि कोई है, तो पास कर दिया जाएगा , लेकिन वे विवरण नहीं हैं उच्च-क्रम के कार्यों की शुरुआत के लिए महत्वपूर्ण है।

Comments

यह मुझे कुछ अन्य जवाबों की याद दिलाता है ...

— बर्गी

Answer 2

मुझे लगता है कि प्रत्येक विक्रेता कल्पना के अनुसार इसे लागू करने वाला है

वास्तविक कार्यान्वयन, उदाहरण के लिए V8 थोड़ा जटिल हो सकता है, एक शुरुआत के लिए इस उत्तर को देखें । आप github में v8 स्रोत को भी संदर्भित कर सकते हैं लेकिन अलगाव में केवल एक भाग को समझना आसान नहीं हो सकता है।

उपरोक्त उत्तर से उद्धृत:

यहां V8 डेवलपर। हमारे पास "बिल्डिंस" के लिए कई अलग-अलग कार्यान्वयन तकनीकें हैं: कुछ सी ++ में लिखे गए हैं, कुछ टोक़ में, कुछ हम जिसे कोडस्टबएस्लेम्बलर कहते हैं, और कुछ सीधे विधानसभा में। V8 के पुराने संस्करणों में, कुछ को जावास्क्रिप्ट में लागू किया गया था। इन रणनीतियों में से प्रत्येक की अपनी ताकत है (कोड जटिलता, डिबगैबिलिटी, विभिन्न स्थितियों में प्रदर्शन, द्विआधारी आकार और मेमोरी खपत को बंद करना); प्लस हमेशा ऐतिहासिक कारण है कि कोड समय के साथ विकसित हुआ है।

ES2015 कल्पना:

1. आज्ञा देना ओ ToObject ( यह मान)।
2. ReturnIfAbrupt ( O )।
3. आइए लेन टू टेंप्रोवेरी (Get ( O , "length")) बनें ।
4. ReturnIfAbrupt ( लेन )।
5. यदि IsCallable ( callbackfn ) गलत है , तो TypeError अपवाद फेंकें ।
6. अगर इस आर्ग की आपूर्ति की गई थी, तो टी को इस आर्ग करें ; वरना T को अपरिभाषित किया जाए ।
7. आज्ञा देना एक ArraySpeciesCreate ( हे , लेन )।
8. ReturnIfAbrupt ( A )।
9. चलो कश्मीर 0 हो।
10. दोहराएँ, जबकि के < लेन
    1. चलो पी ToString (होना कश्मीर )।
    2. चलो kPresent HasProperty (हो हे , पी )।
    3. ReturnIfAbrupt ( kPresent )।
    4. यदि kPresent है सच है, तो
       1. चलो kValue प्राप्त करें (हो हे , पी )।
       2. ReturnIfAbrupt ( kValue )।
       3. चलो mappedValue कॉल (होना callbackfn , टी , « kValue , कश्मीर , हे »)।
       4. ReturnIfAbrupt ( mappedValue )।
       5. चलो स्थिति CreateDataPropertyOrThrow (होना एक , पी , mappedValue )।
       6. ReturnIfAbrupt ( स्थिति )।
    5. 1 से k बढ़ाएँ ।
11. वापसी ए ।

Comments

मैं उत्सुक हूँ, कल्पना की <li> list-style-typeक्रोम या FF में प्रतिलिपि नहीं है। क्या आपने संख्याओं को मैन्युअल रूप से लिखा था, या क्या मैं याद कर रहा हूं एक बेहतर तरीका है?

— निश्चितप्रक्रिया

@CertainPerformance योग्य। ऑनलाइन स्रोत से HTML कॉपी करें, ऑनलाइन टूल मार्कडाउन करें।

— सबिथपॉकर