पवित्रा 2019: सेमरश से भाग (भाग 2)

24-25 मई को सेंट पीटर्सबर्ग में आयोजित होलीजेएस सम्मेलन में हमारे बूथ से कार्यों के विश्लेषण का यह दूसरा भाग है। एक बड़े संदर्भ के लिए, यह अनुशंसा की जाती है कि आप पहले इस सामग्री का पहला भाग पढ़ें। और अगर उलटी गिनती अभिव्यक्ति पहले ही पूरी हो चुकी है, तो अगले चरण में आपका स्वागत है।

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

कार्य 2 ~ लोगों द्वारा किया गया

यह मान लिया गया था कि कोड तीन अनुरोधों के जवाब में कंसोल को उत्तर निष्पादित और प्रिंट करेगा, और फिर "किया गया"। लेकिन कुछ गलत हो गया ... स्थिति को ठीक करें।

;(function() { let iter = { [Symbol.iterator]: function* iterf() { let fs = ['/1', '/2', '/3']; for (const req in fs) { yield fetch(req); } } }; for (const res of iter) { console.log(res); } console.log('done'); })(); 

शोध समस्या

हमारे यहाँ क्या है? यह एक iterable iter ऑब्जेक्ट है जिसमें एक प्रसिद्ध प्रतीक है । जनरेटर प्रतीक एक जनरेटर फ़ंक्शन के माध्यम से परिभाषित किया गया है । फ़ंक्शन के शरीर में एक सरणी fs घोषित किया जाता है, जिनमें से तत्वों को अनुरोध भेजने के लिए भ्रूण समारोह में आते हैं और प्रत्येक फ़ंक्शन कॉल का परिणाम उपज के माध्यम से वापस आ जाता है । भ्रूण के कार्य क्या अनुरोध भेजते हैं? एफएस सरणी के सभी तत्व क्रमशः संख्या 1, 2 और 3 के साथ संसाधनों के सापेक्ष पथ हैं। इसलिए पूरा URL स्थान के आधार पर प्राप्त किया जाएगा। उदाहरण के लिए, अगले नंबर के साथ:

GET https://www.example.com/1

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

Promise {pending}
Promise {pending}
Promise {pending}
done

वास्तव में, कार्य इन्हीं वादों को हल करने के लिए नीचे आता है।

हमारे पास async / प्रतीक्षा है

पहला विचार Promise.all के साथ खेलना हो सकता है: इसे हमारी चलने योग्य वस्तु दें, फिर कंसोल को "किया"। लेकिन वह हमें अनुरोधों के अनुक्रमिक निष्पादन (जैसा कि शर्त के अनुसार आवश्यक है) प्रदान नहीं करेगा, लेकिन बस उन सभी को भेजें और सामान्य संकल्प से पहले अंतिम उत्तर की प्रतीक्षा करें।

कंसोल के आउटपुट से पहले अगले वादे के समाधान की प्रतीक्षा करने के लिए यहां सबसे सरल समाधान शरीर के लिए प्रतीक्षा में होगा:

 for (const res of iter) { console.log(await res); } 

अंत में प्रदर्शित होने के लिए काम करने और "किए जाने" का इंतजार करने के लिए , आपको मुख्य कार्य को एसिंक्रोनस के माध्यम से एसिंक्रोनस बनाने की आवश्यकता है:

 ;(async function() { let iter = { /* ... */ }; for (const res of iter) { console.log(await res); } console.log('done'); })(); 

इस मामले में, समस्या पहले ही हल हो गई है (लगभग):

GET 1st
Response 1st
GET 2nd
Response 2nd
GET 3rd
Response 3rd
done


अतुल्यकालिक Iterator और जनरेटर

हम मुख्य कार्य को अतुल्यकालिक छोड़ देंगे, लेकिन प्रतीक्षा के लिए इस कार्य में शरीर की तुलना में अधिक सुरुचिपूर्ण स्थान है: यह है कि अतुल्यकालिक पुनरावृत्ति का उपयोग फॉर-वेइट-इन के माध्यम से किया गया है :

 for await (const res of iter) { console.log(res); } 

सब कुछ काम करेगा! लेकिन यदि आप अतुल्यकालिक पुनरावृत्ति के बारे में इस प्रस्ताव के विवरण की ओर मुड़ते हैं, तो यहाँ क्या दिलचस्प है:

हम पुनरावृति विवरण के लिए भिन्नता का परिचय देते हैं जो async iterable ऑब्जेक्ट्स पर पुनरावृत्त करता है। केवल Async फ़ंक्शन और Async जनरेटर फ़ंक्शंस के लिए Async ऑफ़-स्टेटमेंट की अनुमति है

यही है, हमारी वस्तु न केवल चलने योग्य होनी चाहिए, बल्कि नए जाने-माने प्रतीक Symbol.asyncIterator के माध्यम से "asyncIterable" होनी चाहिए और हमारे मामले में, पहले से ही एक अतुल्यकालिक जनरेटर फ़ंक्शन:

 let iter = { [Symbol.asyncIterator]: async function* iterf() { let fs = ['/1', '/2', '/3']; for (const req in fs) { yield await fetch(req); } } }; 

फिर यह एक नियमित पुनरावृत्ति और जनरेटर पर कैसे काम करता है? हां, सिर्फ संक्षेप में, इस भाषा में इतना अधिक पसंद है। यह प्रतीक्षा-की- ट्रिक है: यदि ऑब्जेक्ट केवल चलने योग्य है, तो जब एसिंक्रोनस रूप से पुनरावृति होती है , तो यह ऑब्जेक्ट को (यदि आवश्यक हो) रिज़ॉल्यूशन की उम्मीद के साथ तत्वों को लपेटकर asyncIterable में "कनवर्ट करता है"। उन्होंने एक्सल रौशमायर के एक लेख में अधिक विस्तार से बात की।

संभवतः, Symbol.asyncIterator के माध्यम से यह अभी भी अधिक सही होगा, क्योंकि हमने स्पष्ट रूप से प्रतीक्षा के लिए, के माध्यम से अपने अतुल्यकालिक पुनरावृत्ति के लिए asyncIterable ऑब्जेक्ट बनाया है , जबकि यदि आवश्यक हो, तो इसके लिए एक नियमित पुनरावृत्ति के साथ वस्तु को पूरक करने का अवसर छोड़ते हुए। यदि आप जावास्क्रिप्ट में अतुल्यकालिक पुनरावृत्तियों के बारे में एक लेख में कुछ उपयोगी और पर्याप्त पढ़ना चाहते हैं, तो यहाँ यह है !

अतुल्यकालिक के लिए अभी भी आंशिक रूप से मसौदे में है, लेकिन यह पहले से ही आधुनिक ब्राउज़रों (एज को छोड़कर) और Node.js द्वारा 10.x से समर्थित है। यदि यह किसी को परेशान करता है, तो आप हमेशा वादों की श्रृंखला के लिए अपनी छोटी पॉलीफाइल लिख सकते हैं, उदाहरण के लिए, एक पुनरावृत्ति के लिए

 const chain = (promises, callback) => new Promise(resolve => function next(it) { let i = it.next(); i.done ? resolve() : i.value.then(res => { callback(res); next(it); }); }(promises[Symbol.iterator]()) ); ;(async function() { let iter = { /* iterable */ }; await chain(iter, console.log); console.log('done'); })(); 

इस तरह और इस तरीके से, हमने बदले में अनुरोध और प्रसंस्करण प्रतिक्रियाएं भेज दीं। लेकिन इस समस्या में एक और छोटी लेकिन कष्टप्रद समस्या है ...

माइंडफुलनेस टेस्ट

हम इस सभी अतुल्यकालिकता से दूर हो गए थे, जैसा कि अक्सर होता है, हमने एक छोटे से विस्तार की दृष्टि खो दी। क्या वे अनुरोध हमारी लिपि द्वारा भेजे गए हैं? आइए देखते हैं नेटवर्क :

GET https://www.example.com/0
GET https://www.example.com/1
GET https://www.example.com/2

लेकिन हमारी संख्या 1, 2, 3 है। मानो कि गिरावट आई थी। ऐसा क्यों? बस कार्य के स्रोत कोड में पुनरावृत्ति के साथ एक और समस्या है, यहां:

 let fs = ['/1', '/2', '/3']; for (const req in fs) { yield fetch(req); } 

यहां एक फॉर-इन का उपयोग किया जाता है , जो एरे वैल्यू के बजाय अपने एन्यूमरेटेड गुणों को दरकिनार कर देता है: और ये 0 से 2 तक के तत्वों के सूचक हैं। भ्रूण फ़ंक्शन अभी भी उन्हें तार की ओर ले जाता है और पहले स्लैश की अनुपस्थिति के बावजूद (यह अब पथ नहीं है ), यह अपेक्षाकृत हल करता है वर्तमान पृष्ठ का URL। ठीक करने के लिए नोटिस की तुलना में बहुत आसान है। दो विकल्प:

 let fs = ['/1', '/2', '/3']; for (const req of fs) { yield fetch(req); } let fs = ['/1', '/2', '/3']; for (const req in fs) { yield fetch(fs[req]); } 

पहले में, हमने सरणी के मूल्यों पर पुनरावृति के लिए समान उपयोग किया, दूसरे में - सूचकांक द्वारा सरणी तत्व तक पहुंच।

प्रेरणा

हमने 3 समाधानों पर विचार किया: 1) शरीर के लिए प्रतीक्षा के माध्यम से, 2) फॉर- वेट -ऑफ के माध्यम से , और 3) हमारे पॉलीफाइल (पुनरावर्ती कार्य, पाइप पाइपलाइन, आदि) के माध्यम से। यह उत्सुक है कि इन विकल्पों ने सम्मेलन के प्रतिभागियों को लगभग समान रूप से विभाजित किया और कोई भी पसंदीदा पसंदीदा प्रकट नहीं हुआ। बड़ी परियोजनाओं में, ऐसे वास्तविक कार्यों के लिए, एक प्रतिक्रियाशील पुस्तकालय (उदाहरण के लिए, आरएक्सजेएस ) आमतौर पर उपयोग किया जाता है, लेकिन यह एक अतुल्यकालिक प्रकृति वाली भाषा की आधुनिक देशी विशेषताओं के बारे में याद रखने योग्य है।

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

समस्या 3 ~ कारक 19

2019 की संख्या के रिकॉर्ड में कितनी बार! (2019 से गुटबाजी) संख्या 19 होती है? उत्तर के साथ, एक जावास्क्रिप्ट समाधान प्रदान करें।

शोध समस्या

समस्या सतह पर है: हमें इसे खोजने के लिए एक बहुत बड़ी संख्या के रिकॉर्ड की आवश्यकता है "19" के साथ घटित होने वाली सभी घटनाओं की संख्या। नंबर की समस्या का समाधान करते हुए, हम बहुत तेज़ी से इन्फिनिटी (170 के बाद) में भाग गए और कुछ भी नहीं मिला। इसके अलावा, संख्याओं का प्रतिनिधित्व करने के लिए प्रारूप float64 केवल 15-17 वर्णों की सटीकता की गारंटी देता है, और हमें न केवल एक पूर्ण, बल्कि संख्या का एक सटीक रिकॉर्ड भी प्राप्त करने की आवश्यकता है। इसलिए, मुख्य कठिनाई इस बड़ी संख्या के संचय के लिए संरचना का निर्धारण करना है।

बड़ा पूर्णांक

यदि आप भाषा के नवाचारों का पालन करते हैं, तो कार्य केवल हल किया जाता है: प्रकार संख्या के बजाय , आप नए प्रकार का उपयोग कर सकते हैं BigInt (चरण 3) , जो आपको मनमाने ढंग से सटीक संख्याओं के साथ काम करने की अनुमति देता है। String.prototyp.split के माध्यम से फैक्टरियल की गणना और मैच खोजने के लिए क्लासिक पुनरावर्ती कार्य के साथ , पहला समाधान इस तरह दिखता है:

 const fn = n => n > 1n ? n * fn(n - 1n) : 1n; console.log(fn(2019n).toString().split('19').length - 1); // 50 

हालांकि, स्टैक पर दो हजार फ़ंक्शन कॉल पहले से ही खतरनाक हो सकते हैं। यहां तक ​​कि अगर आप पूंछ पुनरावृत्ति के लिए समाधान लाते हैं, तो टेल कॉल अनुकूलन अभी भी केवल सफारी का समर्थन करता है। अंकगणित चक्र या Array.prototype.reduce के माध्यम से हल करने के लिए यहाँ की समस्या अधिक सुखद है:

 console.log([...Array(2019)].reduce((p, _, i) => p * BigInt(i + 1), 1n).toString().match(/19/g).length); // 50 

यह एक लंबी लंबी प्रक्रिया की तरह लग सकता है। लेकिन यह धारणा भ्रामक है। यदि आप अनुमान लगाते हैं, तो हमें केवल दो हजार गुणा से थोड़ा अधिक खर्च करने की आवश्यकता है। क्रोम में i5-4590 3.30GHz पर, समस्या 4-5ms (!) में औसत रूप से हल हो गई है।

एक गणना के परिणाम के साथ एक स्ट्रिंग में मैच खोजने के लिए एक अन्य विकल्प वैश्विक खोज ध्वज के साथ नियमित अभिव्यक्ति द्वारा String.prototyp.match है: / 19 / g ।

बड़ा अंकगणित

लेकिन क्या होगा अगर हमारे पास यह बिगआईंट (और पुस्तकालय भी) नहीं है? इस मामले में, आप लंबी अंकगणित खुद कर सकते हैं। समस्या को हल करने के लिए, हमारे लिए यह आवश्यक है कि हम केवल छोटे से बड़े को गुणा करने के कार्य को कार्यान्वित करें (हम संख्या 1 से 2019 तक गुणा करें)। हम एक बड़ी संख्या और गुणा का परिणाम पकड़ सकते हैं, उदाहरण के लिए, लाइन में:

 /** * @param {string} big * @param {number} int * @returns {string} */ const mult = (big, int) => { let res = '', carry = 0; for (let i = big.length - 1; i >= 0; i -= 1) { let prod = big[i] * int + carry; res = prod % 10 + res; carry = prod / 10 | 0; } return (carry || '') + res; } console.log([...Array(2019)].reduce((p, _, i) => mult(p, i + 1), '1').match(/19/g).length); // 50 

यहाँ हम केवल पंक्ति के अंत से शुरुआत तक बिट्स में स्तंभ को गुणा करते हैं, जैसा कि हमें स्कूल में पढ़ाया गया था। लेकिन समाधान पहले से ही लगभग 170ms की आवश्यकता है।

हम एक समय में एक संख्या रिकॉर्ड में एक से अधिक अंकों को संसाधित करके कुछ हद तक एल्गोरिथ्म में सुधार कर सकते हैं। ऐसा करने के लिए, हम फ़ंक्शन को संशोधित करते हैं और उसी समय सरणियों में जाते हैं, ताकि हर बार लाइनों के साथ गड़बड़ न हो:

 /** * @param {Array<number>} big * @param {number} int * @param {number} digits * @returns {Array<number>} */ const mult = (big, int, digits = 1) => { let res = [], carry = 0, div = 10 ** digits; for (let i = big.length - 1; i >= 0 || carry; i -= 1) { let prod = (i < 0 ? 0 : big[i] * int) + carry; res.push(prod % div); carry = prod / div | 0; } return res.reverse(); } 

यहां, बड़ी संख्या को एक सरणी द्वारा दर्शाया गया है, जिनमें से प्रत्येक तत्व संख्या रिकॉर्ड का उपयोग करते हुए संख्या रिकॉर्ड से अंकों के बारे में जानकारी संग्रहीत करता है। उदाहरण के लिए, अंकों के साथ 2016201720182019 = 3 को निम्न रूप में दर्शाया जाएगा:

'2|016|201|720|182|019' => [2,16,201,720,182,19]

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

 const factor = (n, digits = 1) => [...Array(n)].reduce((p, _, i) => mult(p, i + 1, digits), [1]) .map(String) .map(el => '0'.repeat(digits - el.length) + el) .join('') .replace(/^0+/, ''); console.log(factor(2019, 3).match(/19/g).length); // 50 

सरणियों के माध्यम से "घुटने की लंबाई" कार्यान्वयन स्ट्रिंग्स के माध्यम से तेजी से निकला, और अंकों = 1 के साथ यह पहले से ही 90 के औसत पर जवाब की गणना करता है, अंक = 3 में 35ms, अंक = 6 में केवल 20ms। हालाँकि, याद रखें कि अंकों की संख्या बढ़ रही है, हम एक ऐसी स्थिति के निकट आ रहे हैं जहाँ संख्या "हूड के नीचे" से गुणा हो सकती है, सुरक्षित MAX_SAFE_INTEGER के बाहर हो सकती है। आप इसके साथ यहां खेल सकते हैं । इस कार्य के लिए हमारे द्वारा लिए जाने वाले अधिकतम अंकों का मूल्य क्या है?

परिणाम पहले से ही काफी संकेत कर रहे हैं, BigInt वास्तव में बहुत जल्दी है:

प्रेरणा

यह अच्छा है कि सम्मेलन के 2/3 प्रतिभागियों ने समाधान में नए बिगइंट प्रकार का इस्तेमाल किया (किसी ने स्वीकार किया कि यह पहला अनुभव था)। समाधान के शेष तीसरे में तार या सरणियों पर लंबे अंकगणित के अपने स्वयं के कार्यान्वयन शामिल थे। लागू किए गए कार्यों में से अधिकांश बड़ी संख्याओं को बड़े लोगों द्वारा गुणा करते हैं, जब एक समाधान के लिए यह एक "छोटी" संख्या से गुणा करने और थोड़ा कम समय बिताने के लिए पर्याप्त था। ठीक है काम, क्या आप पहले से ही अपनी परियोजनाओं में BigInt का उपयोग करते हैं?

धन्यवाद

सम्मेलन के ये दो दिन बहुत अधिक चर्चा और कुछ नया सीखने से भरे हुए थे। मैं कार्यक्रम समिति को अगले अविस्मरणीय सम्मेलन और सभी प्रतिभागियों को उनके अद्वितीय नेटवर्किंग और अच्छे मूड के लिए धन्यवाद देना चाहूंगा।