Array.reduce () और (एक उबाऊ तरीका) का उपयोग करने के पांच दिलचस्प तरीके

नमस्कार, हेब्र! मैं आपके लिए क्रिस फर्डिनंडी के लेख "फाइव इंटरेस्टिंग तरीके टू यूज एरे.्रेड्यूस () (एंड वन बोरिंग वे) प्रस्तुत करता हूं ।

सरणियों के साथ काम करने के सभी आधुनिक तरीकों में से, सबसे ज्यादा मुश्किल जो मुझे इस्तेमाल करना पड़ा, वह था Array.reduce ()।

पहली नज़र में, यह एक सरल, उबाऊ तरीका लगता है जो बहुत कम करता है। लेकिन, अपनी मामूली उपस्थिति के बावजूद, Array.reduce () डेवलपर टूल के आपके सेट के लिए एक शक्तिशाली और लचीला जोड़ है।

आज, आइए कुछ दिलचस्प चीजों को देखें जो आप Array.reduce () के साथ कर सकते हैं।

कैसे Array.reduce () काम करता है

अधिकांश आधुनिक सरणी विधियाँ एक नई सरणी लौटाती हैं। Array.reduce () विधि थोड़ी अधिक लचीली है। वह कुछ भी वापस कर सकता है। इसका उद्देश्य एक सरणी लेना और इसकी सामग्री को एक मूल्य में संपीड़ित करना है।

यह मान एक संख्या, एक स्ट्रिंग या एक वस्तु या एक नया सरणी हो सकता है। यह वह हिस्सा है जो मुझे हमेशा चकित करता है - मुझे समझ नहीं आया कि यह कितना लचीला है!

वाक्य-विन्यास

Array.reduce () दो तर्क लेता है: कॉलबैक विधि, जिसे एरे में प्रत्येक तत्व को लॉन्च करने के लिए निष्पादित किया जाता है, और प्रारंभिक मूल्य initialValue।

कॉलबैक दो तर्क भी लेता है: संचायक, जो वर्तमान संयुक्त मूल्य है, और वर्तमान आइटम वर्तमानव्यू लूप में है। आप जो भी लौटाते हैं उसका उपयोग लूप में अगले तत्व के लिए एक संचायक के रूप में किया जाता है। बहुत पहले लूप इसके बजाय प्रारंभिक मूल्य का उपयोग करता है।

var myNewArray = [].reduce(function (accumulator, current) { return accumulator;}, starting); }, starting); 

आइए कुछ उदाहरण देखें।

 var myNewArray = [].reduce(function (accumulator, current) { return accumulator;}, starting); 

1. संख्याओं का योग

मान लीजिए कि आपके पास एक संख्या है, जिसे आप एक साथ जोड़ना चाहते हैं। Array.forEach () का उपयोग करके, हम ऐसा कुछ कर सकते हैं:

 var total = 0; [1, 2, 3].forEach(function (num) { total += num; }); 

यह Array.reduce () का उपयोग करने के लिए एक उदाहरण क्लिच है। शब्द "संचायक" भ्रामक है, इसलिए इस उदाहरण में हम इसे "योग" कहेंगे क्योंकि यह वही है जो स्वाभाविक है।

 var total = [1, 2, 3].reduce(function (sum, current) { return sum + current; }, 0);    0    . 

कॉलबैक में, हम वर्तमान मूल्य को उस राशि में जोड़ते हैं जिसका पहले चक्र में 0 का प्रारंभिक मूल्य है, फिर 1 (प्रारंभिक मूल्य 0 प्लस तत्व मूल्य 1), फिर 3 (कुल मूल्य 1 प्लस तत्व मूल्य 2) और इसी तरह।
एक उदाहरण है।

2. एक कदम में Array.map () और Array.filter () सरणी विधियों के संयोजन के लिए वैकल्पिक

कल्पना कीजिए कि हॉगवर्ट्स में कई जादूगर हैं।

 var wizards = [ { name: 'Harry Potter', house: 'Gryfindor' }, { name: 'Cedric Diggory', house: 'Hufflepuff' }, { name: 'Tonks', house: 'Hufflepuff' }, { name: 'Ronald Weasley', house: 'Gryfindor' }, { name: 'Hermione Granger', house: 'Gryfindor' }]; 

हम एक नई सरणी बनाना चाहते हैं जिसमें केवल हाफ़लफ़फ़ के स्वामी के नाम होंगे। ऐसा करने का एक तरीका यह है कि Array.filter () पद्धति का उपयोग केवल उन जादूगरों को वापस लाने के लिए किया जाए जिनके पास घर पर एक Hufflepuff संपत्ति है। फिर हम Array.map () विधि का उपयोग करते हुए एक नया सरणी बनाते हैं जिसमें केवल शेष स्वामी के लिए नाम संपत्ति होती है।

 //      var hufflepuff = wizards.filter(function (wizard) { return wizard.house === 'Hufflepuff'; }).map(function (wizard) { return wizard.name; }); 

Array.reduce () विधि का उपयोग करके, आप एक पास में एक ही सरणी प्राप्त कर सकते हैं, जो हमारे प्रदर्शन में सुधार करेगा। हम प्रारंभिक मान के रूप में एक खाली सरणी ([]) पास करते हैं। प्रत्येक पास पर, हम यह देखने के लिए जांचते हैं कि क्या विज़ार्ड .हाउस एक हफलपफ है। यदि हां, तो इसे newArr (इस उदाहरण में हमारा संचायक) पर भेजें। यदि नहीं, तो कुछ न करें।

किसी भी स्थिति में, अगले पास में संचायक प्राप्त करने के लिए newArr लौटाएं।

 //      var hufflepuff = wizards.reduce(function (newArr, wizard) { if (wizard.house === 'Hufflepuff') { newArr.push(wizard.name); } return newArr; }, []); 

एक उदाहरण है।

3. सरणी से एक चिह्न बनाएँ

क्या होगा, अगर नामों की एक सरणी बनाने के बजाय, हम हफलपफ में स्वामी की एक अनियंत्रित सूची बनाना चाहते हैं? हमारे प्रारंभिक मान के रूप में Array.reduce () में एक खाली सरणी के बजाय, एक खाली स्ट्रिंग ('') पास करें और इसे html कहें।

अगर विज़ार्ड.हाउस हफलपफ के बराबर है, तो हम विज़ार्ड और नाम सूची तत्वों (ली) में लिपटे विज़ार्ड के साथ हमारे html स्ट्रिंग को जोड़ते हैं। फिर अगले लूप में HTML को संचायक के रूप में लौटाएं।

 //      var hufflepuffList = wizards.reduce(function (html, wizard) { if (wizard.house === 'Hufflepuff') { html += '<li>' + wizard.name + '</li>'; } return html; }, ''); 

Array.reduce () से पहले और बाद में अनियंत्रित सूची आइटम को खोलना और बंद करना जोड़ें। अब आप DOM में मार्कअप जोड़ने के लिए तैयार हैं।

 //      var hufflepuffList = '<ul>' + wizards.reduce(function (html, wizard) { if (wizard.house === 'Hufflepuff') { html += '<li>' + wizard.name + '</li>'; } return html; }, '') + '</ul>'; 

एक उदाहरण है।

4. एक सरणी में समान तत्वों को समूहीकृत करना

लॉश लाइब्रेरी में एक ग्रुपबी () पद्धति है जो तत्वों के एक संग्रह को एक सरणी के रूप में लेती है और उन्हें कुछ मानदंडों के आधार पर एक वस्तु में समूहित करती है।

मान लीजिए कि हमें कई संख्याओं की आवश्यकता है।

यदि हम सभी तत्वों को उनके पूर्णांक मान द्वारा संख्याओं में समूहित करना चाहते हैं, तो यह लॉश का उपयोग करके किया जाना चाहिए।

 var numbers = [6.1, 4.2, 6.3]; // returns {'4': [4.2], '6': [6.1, 6.3]} _.groupBy(numbers, Math.floor); 

यदि शब्दों की एक सरणी है, और आपको तत्वों को उनकी लंबाई से शब्दों में समूहित करने की आवश्यकता है, तो हम ऐसा करेंगे।

 var words = ['one', 'two', 'three']; // returns {'3': ['one', 'two'], '5': ['three']} _.groupBy(words, 'length'); 

Array.reduce () का उपयोग करके एक GroupBy () फ़ंक्शन बनाना

आप Array.reduce () विधि का उपयोग करके उसी कार्यक्षमता को फिर से बना सकते हैं।

हम एक सहायक फ़ंक्शन समूह बनाते हैं (), जो तर्कों के रूप में छांटने के लिए एक सरणी और मानदंड लेता है। GroupBy () के अंदर, हम अपने सरणी के लिए Array.reduce () चलाएंगे, एक खाली वस्तु ({}) को एक प्रारंभिक बिंदु के रूप में पारित करते हैं और परिणाम लौटाते हैं।

 var groupBy = function (arr, criteria) { return arr.reduce(function (obj, item) { // Some code will go here... }, {}); }; 

Array.reduce () के अंदर, हम कॉलबैक फ़ंक्शन को यह जांचने के लिए कॉल करते हैं कि मानदंड एक तत्व या किसी तत्व की संपत्ति पर लागू फ़ंक्शन है या नहीं। तब हमें इसका मूल्य वर्तमान तत्व से मिलता है।

यदि ऑब्जेक्ट में अभी तक इस मान के साथ कोई संपत्ति नहीं है, तो इसे [संपत्ति] बनाएं और इसके मूल्य के रूप में एक खाली सरणी असाइन करें। अंत में, इस संपत्ति में एक तत्व जोड़ें और ऑब्जेक्ट को अगले चक्र के लिए एक संचायक के रूप में लौटाएं।

 var groupBy = function (arr, criteria) { return arr.reduce(function (obj, item) { //   ,        //  var key = typeof criteria === 'function' ? criteria(item) : item[criteria]; //    ,  . if (!obj.hasOwnProperty(key)) { obj[key] = []; } //     obj[key].push(item); //      return obj; }, {});}; 

एक पूर्ण सहायक समारोह का प्रदर्शन।

उनकी मदद के लिए टॉम ब्रेमर को विशेष धन्यवाद। यह सहायक कार्य और बहुत कुछ वेनिला जेएस टूलकिट में पाया जा सकता है।

5. दो स्रोतों से डेटा को एक सरणी में संयोजित करना

जादूगरों की हमारी सूची को याद करें।

 var wizards = [ { name: 'Harry Potter', house: 'Gryfindor' }, { name: 'Cedric Diggory', house: 'Hufflepuff' }, { name: 'Tonks', house: 'Hufflepuff' }, { name: 'Ronald Weasley', house: 'Gryfindor' }, { name: 'Hermione Granger', house: 'Gryfindor' }]; 

क्या होगा अगर एक अलग डेटा सेट था - एक घर के साथ एक वस्तु और प्रत्येक जादूगर द्वारा अर्जित अंक।

 var points = { HarryPotter: 500, CedricDiggory: 750, RonaldWeasley: 100, HermioneGranger: 1270 }; 

कल्पना करें कि हम विज़ार्ड में प्रत्येक विज़ार्ड के डेटा में जोड़े गए अंकों की संख्या के साथ डेटा के दोनों सेट को एक सरणी में संयोजित करना चाहते हैं। यह कैसे करना है?

Array.reduce () विधि इसके लिए एकदम सही है!

 var wizardsWithPoints = wizards.reduce(function (arr, wizard) { //     points,     // var key = wizard.name.replace(' ', ' '); //     ,  , //   0. if (points[key]) { wizard.points = points[key]; } else { wizard.points = 0; } //   wizard   . arr.push(wizard); //  . return arr; }, []); 

एक सरणी में दो स्रोतों से डेटा के संयोजन का एक उदाहरण ।

6. दो स्रोतों से डेटा को एक वस्तु में मिलाना

क्या होगा अगर इसके बजाय दो डेटा स्रोतों को एक वस्तु में संयोजित करना आवश्यक है जिसमें प्रत्येक विज़ार्ड का नाम कुंजी है, और उनके घर और चश्मा गुण हैं? फिर, Array.reduce () विधि इसके लिए एकदम सही है।

 var wizardsAsAnObject = wizards.reduce(function (obj, wizard) { //      points,     // var key = wizard.name.replace(' ', ' '); //     ,  , //   0. if (points[key]) { wizard.points = points[key]; } else { wizard.points = 0; } //   name delete wizard.name; //   wizard    obj[key] = wizard; //   return obj; }, {}); 

एक वस्तु में दो स्रोतों से डेटा के संयोजन का एक उदाहरण ।

क्या मुझे Array.reduce () का उपयोग करना चाहिए?

Array.reduce () विधि अर्थहीन से मेरी पसंदीदा जावास्क्रिप्ट विधि से विकसित हुई है। तो क्या यह इस्तेमाल करने लायक है? और कब?

Array.reduce () विधि में शानदार ब्राउज़र समर्थन है। यह सभी आधुनिक ब्राउज़रों में और IE9 में काम करता है। यह लंबे समय से मोबाइल ब्राउज़र द्वारा समर्थित है। यदि आपको और भी अधिक की आवश्यकता है, तो आप IE6 में समर्थन वापस करने के लिए एक पॉलीफ़िल जोड़ सकते हैं।

सबसे गंभीर समस्या यह हो सकती है कि Array.reduce () उन लोगों के लिए भ्रमित है, जिन्होंने पहले कभी इसका सामना नहीं किया है। Array.filter () Array.map () के तरीकों का संयोजन धीमा है और इसमें अतिरिक्त चरण शामिल हैं, लेकिन पढ़ने में आसान है। विधियों के नाम बताते हैं कि उन्हें क्या करना चाहिए।

जैसा कि पहले ही उल्लेख किया गया है, Array.reduce () विधि, सामान्य रूप से, अधिक जटिल चीजों को सरल करती है। एक अच्छा उदाहरण है हेल्पर फंक्शन ग्रुपबी ()।

अंततः, यह आपके टूलकिट के लिए एक और टूल है। एक उपकरण जो यदि सही तरीके से उपयोग किया जाता है, तो सुपरपॉवर दे सकता है।

लेखक के बारे में

क्रिस फर्डिनेंडी लोगों को वेनिला जावास्क्रिप्ट सीखने में मदद करता है। उनका मानना ​​है कि इंटरनेट के लिए चीजों को करने का एक सरल और अधिक विश्वसनीय तरीका है।

क्रिस वेनिला जेएस पॉकेट गाइड श्रृंखला के लेखक हैं, जो वैनिला जेएस अकादमी पाठ्यक्रम के निर्माता हैं, और वेनिला जेएस अकादमी के प्रस्तुतकर्ता हैं। इसके डेवलपर सलाहकार समाचार पत्र को हर सप्ताह हजारों डेवलपर्स द्वारा पढ़ा जाता है।

उन्होंने चोबानी और बोस्टन ग्लोब जैसे संगठनों में डेवलपर्स को प्रशिक्षित किया, और उनके जावास्क्रिप्ट प्लगइन्स का उपयोग ऐप्पल और हार्वर्ड बिजनेस स्कूल द्वारा किया गया था। CSS-ट्रिक्स और कोडपेन के संस्थापक क्रिस कॉयर ने उनके काम को "अंतहीन उद्धृत" के रूप में वर्णित किया।

क्रिस को समुद्री डाकू, पिल्लों और पिक्सर फिल्में पसंद हैं, और मैसाचुसेट्स ग्रामीण इलाकों में घोड़े के खेतों के पास भी रहता है। वह एक बेली पिल्ला के साथ गो मेक थिंग्स का नेतृत्व करता है।