जावास्क्रिप्ट में उपयोगी ऐरे और ऑब्जेक्ट तरीके

लेख के लेखक, जिसका अनुवाद आज हम प्रकाशित कर रहे हैं, का कहना है कि सिंटेक्स एफएम पॉडकास्ट के मुद्दों में से एक, जिसने जावास्क्रिप्ट में वस्तुओं और सरणियों के उपयोगी तरीकों का अवलोकन दिया, ने उनके विचार को प्रेरित किया। ये तरीके डेवलपर्स को साफ, पठनीय कोड लिखने में मदद करते हैं। उनके उपयोग से लोदाश जैसे तीसरे पक्ष के पुस्तकालयों की आवश्यकता कम हो जाती है ।

Array.prototype.filter ()

Array.prototype.filter () विधि एक नई सरणी बनाता है जिसमें मूल सरणी के केवल वे तत्व हैं जो निर्दिष्ट निर्दिष्ट गिरावट से मेल खाते हैं।

▍ उदाहरण

छात्रों के बारे में जानकारी रखने वाले एक सरणी के आधार पर, हम एक नई सरणी बनाएंगे जिसमें रिकॉर्ड केवल उन छात्रों के बारे में शामिल होंगे जिनकी उम्र उन्हें शराब खरीदने की अनुमति देती है।

const studentsAge = [17, 16, 18, 19, 21, 17]; const ableToDrink = studentsAge.filter( age => age > 18 ); //  ableToDrink    : [19, 21] 

Array.prototype.map ()

Array.prototype.map () विधि आपको किसी अन्य सरणी के किसी भी संसाधित मान के आधार पर एक नई सरणी बनाने की अनुमति देती है। डेटा को संशोधित करने के लिए यह विधि महान है, इस तथ्य के कारण कि यह मूल सरणी में परिवर्तन नहीं करता है, इसका उपयोग अक्सर रिएक्ट में किया जाता है।

▍ उदाहरण

संख्या सरणी के आधार पर, प्रत्येक तत्व की शुरुआत में एक नया सरणी बनाएं, जिसमें $ चिन्ह रखा जाएगा।

 const numbers = [2, 3, 4, 5]; const dollars = numbers.map( number => '$' + number); //      dollars: ['$2', '$3', '$4', '$5'] 

Array.prototype.reduce ()

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

▍ उदाहरण

हम एक संख्यात्मक सरणी के तत्वों का योग प्राप्त करने के लिए .reduce() विधि का उपयोग करेंगे।

 const numbers = [5, 10, 15]; const total = numbers.reduce( (accumulator, currentValue) => accumulator + currentValue); //   total    30 

वास्तव में, इस पद्धति का उपयोग कई दिलचस्प तरीकों से किया जा सकता है। एमडीएन प्रलेखन में प्रासंगिक उदाहरण पाए जा सकते हैं। विशेष रूप से, हम सरणियों के विस्तार के बारे में बात कर रहे हैं, गुणों द्वारा वस्तुओं को समूहीकृत करने और सरणियों से डुप्लिकेट तत्वों को हटाने के बारे में।

Array.prototype.forEach ()

Array.prototype.forEach () विधि एरे के प्रत्येक तत्व के लिए इसमें दिए गए फंक्शन को लागू करती है।

▍ उदाहरण

यहाँ .forEach() पद्धति का उपयोग करके कंसोल के प्रत्येक तत्व को आउटपुट करने का तरीका बताया गया है।

 const emotions = ['happy', 'sad', 'angry']; emotions.forEach( emotion => console.log(emotion) ); //   : // 'happy' // 'sad' // 'angry' 

Array.prototype.some ()

Array.prototype.some () विधि जाँचता है कि सरणी का कम से कम एक तत्व इसके द्वारा पारित फ़ंक्शन द्वारा निर्दिष्ट स्थिति से मेल खाता है या नहीं। यह विधि, उदाहरण के लिए, उपयोगकर्ता विशेषाधिकारों के सत्यापन के कार्य को सुलझाने में स्वयं को अच्छी तरह से दिखाने में सक्षम है। इसे पहले .forEach() एक एनालॉग के रूप में माना जा सकता है, इस अंतर के साथ, जब इसे पारित करने वाले फ़ंक्शन की सहायता से उपयोग किया जाता है, तो सरणी तत्वों पर कुछ क्रियाओं को करना संभव है जब तक कि यह फ़ंक्शन सही मान नहीं लौटाता, तब प्रसंस्करण में बाधा।

▍ उदाहरण

जांचें कि क्या सरणी में कम से कम एक admin स्ट्रिंग है।

 const userPrivileges = ['user', 'user', 'user', 'admin']; const containsAdmin = userPrivileges.some( element => element === 'admin'); //  containsAdmin   true 

Array.prototyp.every ()

Array.prototype.every () विधि ऊपर वर्णित .some () विधि के समान है, लेकिन यह केवल तभी true होती है जब सरणी के सभी तत्व इस विधि को दी गई फ़ंक्शन द्वारा निर्दिष्ट शर्त को पूरा करते हैं।

▍ उदाहरण

जांचें कि क्या सरणी में संग्रहीत सभी अनुमान 3 के बराबर या उससे अधिक हैं।

 const ratings = [3, 5, 4, 3, 5]; const goodOverallRating = ratings.every( rating => rating >= 3 ); //goodOverallRating   true 

Array.prototype.includes ()

Array.prototype.includes () विधि आपको बताती है कि किसी सरणी में कोई मान दिया गया है या नहीं। यह .some() विधि के समान है, लेकिन यह जाँच नहीं करता है कि सरणी के तत्व एक निश्चित स्थिति से मेल खाते हैं, लेकिन इसे कहा जाने पर सरणी में निर्दिष्ट मूल्य की उपस्थिति।

▍ उदाहरण

जांचें कि क्या सरणी में कोई स्ट्रिंग तत्व waldo है:

 const names = ['sophie', 'george', 'waldo', 'stephen', 'henry']; const includesWaldo = names.includes('waldo'); // includesWaldo   true 

Array.from ()

स्थिर विधि Array.from () आपको अन्य सरणियों या स्ट्रिंग्स के आधार पर सरणियाँ बनाने की अनुमति देता है। यदि आवश्यक हो, तो इस विधि को मानचित्रण करने के लिए एक फ़ंक्शन पारित किया जा सकता है, जो आपको नए सरणी में गिरने वाले डेटा को प्रभावित करने की अनुमति देता है। वास्तव में, मैपिंग के लिए एक विशेष विधि प्रदान की जाती है - Array.prototyp.map () , इसलिए यह पूरी तरह से स्पष्ट नहीं है कि किसी को भी Array.from() विधि की इस सुविधा की आवश्यकता हो सकती है।

▍ उदाहरण

स्ट्रिंग के आधार पर एक सरणी बनाएं।

 const newArray = Array.from('hello'); // newArray    ['h', 'e', 'l', 'l', 'o'] 

एक सरणी बनाएँ जिसमें मूल संख्यात्मक सरणी के तत्वों का दोगुना मूल्य हो।

 const doubledValues = Array.from([2, 4, 6], number => number * 2); //   doubleValues    : [4, 8, 12] 

Object.values ​​()

Object.values ​​() पद्धति उस ऑब्जेक्ट के गुण मानों की एक सरणी लौटाती है, जो उसके पास है।

▍ उदाहरण

हम ऑब्जेक्ट प्रॉपर्टी वैल्यूज की एक सरणी बनाते हैं।

 const icecreamColors = {   chocolate: 'brown',   vanilla: 'white',   strawberry: 'red', } const colors = Object.values(icecreamColors); //  colors    ["brown", "white", "red"] 

Object.keys ()

Object.keys () विधि ऑब्जेक्ट सरणी नामों (कुंजियों) से मिलकर एक सरणी देता है।

▍ उदाहरण

हम ऑब्जेक्ट प्रॉपर्टी नामों की एक सरणी बनाएंगे।

 const icecreamColors = { chocolate: 'brown', vanilla: 'white', strawberry: 'red', } const types = Object.keys(icecreamColors); //     types: ["chocolate", "vanilla", "strawberry"] 

Object.entries ()

Object.entries () पद्धति रिटर्न करती है, इसमें पारित वस्तु को संसाधित करने के बाद, सरणी युक्त सारणी जो कि प्रपत्र [, ] जोड़े हैं, जो इन गुणों के गुण नाम और मान हैं।

▍ उदाहरण

हम एक सरणी युक्त बनाते हैं, हमारे हित के लिए, गुणों के नाम और उनके मूल्यों पर डेटा।

 const weather = { rain: 0, temperature: 24, humidity: 33, } const entries = Object.entries(weather); //   entries    // [['rain', 0], ['temperature', 24], ['humidity', 33]] 

एक्सटेंशन ऑपरेटर और सरणियाँ

विस्तार ऑपरेटर ( प्रसार ऑपरेटर , ...), जैसा कि सरणियों पर लागू होता है, आपको उनके तत्वों को उनसे निकालकर उन्हें विस्तारित करने की अनुमति देता है। यह ऑपरेटर उपयोगी है, उदाहरण के लिए, जब आपको कई सरणियों को संयोजित करने की आवश्यकता होती है। इसके अलावा, इसका उपयोग .splice() विधि का उपयोग करने की आवश्यकता को समाप्त करता है यदि आपको सरणी से कुछ तत्वों को निकालने की आवश्यकता है, क्योंकि इसे .slice() विधि के साथ जोड़ा जा सकता है, जो मूल सरणी को बदलने से बचता है।

▍ उदाहरण

दो सरणियों को मिलाएं।

 const spreadableOne = [1, 2, 3, 4]; const spreadableTwo = [5, 6, 7, 8]; const combined = [...spreadableOne, ...spreadableTwo]; //  combined   : [1, 2, 3, 4, 5, 6, 7, 8] 

हम एक नई सरणी बनाते हैं, जो मूल सरणी है जिसमें से तत्व हटा दिया गया था। इस स्थिति में, मूल सरणी को परिवर्तित नहीं किया जाना चाहिए।

 const animals = ['squirrel', 'bear', 'deer', 'salmon', 'rat']; const mammals = [...animals.slice(0,3), ...animals.slice(4)]; // mammals   : ['squirrel', 'bear', 'deer', 'rat'] 

एक्सटेंशन ऑपरेटर और ऑब्जेक्ट

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

▍ उदाहरण

मूल वस्तु को बदले बिना मूल वस्तु में नई संपत्ति जोड़कर एक नई वस्तु बनाएं।

 const spreadableObject = { name: 'Robert', phone: 'iPhone' }; const newObject = { ...spreadableObject, carModel: 'Volkswagen' } //  newObject   : // { carModel: 'Volkswagen', name: 'Robert', phone: 'iPhone' } 

शेष फ़ंक्शन मापदंडों का सिंटैक्स

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

▍ उदाहरण

हम एक सरणी को मुद्रित करते हैं जिसमें फ़ंक्शन के पास दिए गए तर्क होते हैं।

 function displayArgumentsArray(...theArguments) { console.log(theArguments); } displayArgumentsArray('hi', 'there', 'bud'); //      ['hi', 'there', 'bud'] 

ऑब्जेक्ट.फ्रीज ()

ऑब्जेक्ट.फ़्रीज़ () विधि एक ऑब्जेक्ट को "जमा देता है", इस ऑब्जेक्ट के मौजूदा गुणों को ऑब्जेक्ट में नए गुणों और मूल्यों को बदलने या रोकने से रोकता है। एक गलत धारणा है कि यह विधि const कीवर्ड का उपयोग करके वस्तुओं को घोषित करने के समान है, हालांकि, निरंतर वस्तुओं को संशोधित किया जा सकता है।

▍ उदाहरण

हम एक ऑब्जेक्ट को "फ्रीज" करते हैं, जिसके बाद हम इसकी संपत्ति को बदलने की कोशिश करते हैं और सुनिश्चित करते हैं कि यह नहीं किया जा सकता है।

 const frozenObject = { name: 'Robert' } Object.freeze(frozenObject); frozenObject.name = 'Henry'; //  frozenObject  ,     { name: 'Robert' } 

Object.seal ()

Object.seal () विधि आपको ऑब्जेक्ट को "सील" करने की अनुमति देती है, जिससे नए गुणों को जोड़ा जा सके। इसी समय, मौजूदा गुणों को बदला जा सकता है।

▍ उदाहरण

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

 const sealedObject = { name: 'Robert' } Object.seal(sealedObject); sealedObject.name = 'Bob'; sealedObject.wearsWatch = true; //  sealedObject   : { name: 'Bob' } 

Object.assign ()

Object.assign () विधि आपको ऑब्जेक्ट को एक ऑब्जेक्ट से दूसरे ऑब्जेक्ट में कॉपी करके संयोजित करने की अनुमति देती है। वास्तव में, ऊपर वर्णित विस्तार ऑपरेटर का उपयोग करके एक ही प्रभाव प्राप्त किया जा सकता है, इसलिए इस विधि के साथ पूरी तरह से फैलाया जा सकता है। यह ध्यान दिया जाना चाहिए कि विस्तार ऑपरेटर की तरह यह विधि, वस्तुओं की गहरी क्लोनिंग नहीं करती है। यदि आपको वस्तुओं की गहरी क्लोनिंग के लिए एक तैयार-किए गए उपकरण की आवश्यकता है - लॉडश लाइब्रेरी के उपकरणों पर एक नज़र डालें।

▍ उदाहरण

चलो दो वस्तुओं में से एक बनाते हैं।

 const firstObject = { firstName: 'Robert' } const secondObject = { lastName: 'Cooper' } const combinedObject = Object.assign(firstObject, secondObject); //      combinedObjec : { firstName: 'Robert', lastName: 'Cooper' } 

परिणाम

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

प्रिय पाठकों! जावास्क्रिप्ट में ऐरे और ऑब्जेक्ट्स के कौन से तरीके आप सबसे अधिक बार उपयोग करते हैं?