जावास्क्रिप्ट ऐरे के बारे में आपको क्या जानना चाहिए

हम आपके लिए थॉमस लोम्बर्ट के एक लेख का अनुवाद प्रस्तुत करते हैं, जो कि medium.freecodecamp.org पर प्रकाशित हुआ था। लेखक की अनुमति से अनुवाद प्रकाशित किया जाता है।


एक सरणी को कम करने के लिए कम करने की विधि का उपयोग करने का एक उदाहरण

मुझे एक साहसिक बयान देने दें: लूप अक्सर बेकार होते हैं और कोड को पढ़ना मुश्किल बना देता है। सरणियों, खोज, तत्वों को छांटने और अन्य समान क्रियाओं में पुनरावृत्तियों के लिए, आप नीचे दिए गए तरीकों में से एक का उपयोग कर सकते हैं।

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

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

यह लेख मूल रूप से thomlom.dev पर प्रकाशित किया गया था, जहां आप अधिक वेब विकास सामग्री पा सकते हैं।

मूल बातें

अगर आप सरणियों के साथ काम कर रहे हैं तो जानने के लायक चार तरीके हैं। ये map , filter , reduce और spread ऑपरेटर हैं। वे प्रभावी और उपयोगी हैं।

नक्शा
आप अक्सर map विधि का उपयोग करेंगे। सामान्य तौर पर, हर बार आपको किसी सरणी के तत्वों को बदलने की आवश्यकता होती है, इस विकल्प पर विचार करें।

यह एक पैरामीटर लेता है - एक फ़ंक्शन जिसे सरणी के प्रत्येक तत्व पर बुलाया जाता है, और फिर एक नया सरणी देता है ताकि कोई साइड इफेक्ट न हो सके।

 const numbers = [1, 2, 3, 4] const numbersPlusOne = numbers.map(n => n + 1) console.log(numbersPlusOne) // [2, 3, 4, 5] 

आप एक नया सरणी भी बना सकते हैं जो ऑब्जेक्ट की केवल एक विशिष्ट संपत्ति को संग्रहीत करता है।

 const allActivities = [ { title: 'My activity', coordinates: [50.123, 3.291] }, { title: 'Another activity', coordinates: [1.238, 4.292] } ] const allCoordinates = allActivities.map(activity => activity.coordinates) console.log(allCoordinates) // [[50.123, 3.291], [1.238, 4.292]] 

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

फिल्टर
इस पद्धति का नाम स्वयं के लिए बोलता है: जब आप किसी सरणी को फ़िल्टर करना चाहते हैं तो इसका उपयोग करें।

map तरह, filter एकल पैरामीटर के रूप में एक फ़ंक्शन लेता है जिसे सरणी के प्रत्येक तत्व पर कहा जाता है। इस फ़ंक्शन को एक बूलियन मान वापस करना चाहिए:

• true - अगर आप एरे में तत्व को बचाना चाहते हैं;
• false - यदि आप इसे सहेजना नहीं चाहते हैं।

नतीजतन, आपके पास सही नए सरणी होंगे उन तत्वों के साथ जिन्हें आप छोड़ना चाहते हैं।

उदाहरण के लिए, केवल विषम संख्याओं को किसी सरणी में संग्रहीत किया जा सकता है।

 const numbers = [1, 2, 3, 4, 5, 6] const oddNumbers = numbers.filter(n => n % 2 !== 0) console.log(oddNumbers) // [1, 3, 5] 

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

 const participants = [ { id: 'a3f47', username: 'john' }, { id: 'fek28', username: 'mary' }, { id: 'n3j44', username: 'sam' }, ] function removeParticipant(participants, id) { return participants.filter(participant => participant.id !== id) } console.log(removeParticipant(participants, 'a3f47')) // [{ id: 'fek28', username: 'mary' }, { id: 'n3j44', username: 'sam' }]; 

को कम
मेरी राय में, इस विधि को समझना सबसे कठिन है। लेकिन जैसे ही आप इसमें महारत हासिल करते हैं, आपके पास अवसरों का एक गुच्छा होगा।

आमतौर पर, reduce विधि मानों की एक सरणी लेती है और उन्हें एक एकल मान में समेटती है। यह दो पैरामीटर लेता है, एक कॉलबैक फ़ंक्शन (जो रिड्यूसर है ) और एक वैकल्पिक प्रारंभिक मूल्य (जो डिफ़ॉल्ट रूप से एरे का पहला तत्व है)। गियरबॉक्स स्वयं चार पैरामीटर लेता है:

• एक बैटरी जो गियरबॉक्स में दिए गए मानों को इकट्ठा करती है;
• सरणी का वर्तमान मूल्य;
• वर्तमान सूचकांक;
• वह सरणी जिसके लिए reduce विधि को बुलाया गया था।

मूल रूप से आप केवल पहले दो मापदंडों - बैटरी और वर्तमान मूल्य का उपयोग करेंगे।

लेकिन चलो सिद्धांत में गहराई से नहीं जाते हैं और reduce करने के सबसे सामान्य उदाहरण पर विचार करते हैं।

 const numbers = [37, 12, 28, 4, 9] const total = numbers.reduce((total, n) => total + n) console.log(total) // 90 

पहले पुनरावृत्ति में, संचायक, जो कि राशि है, प्रारंभिक मूल्य 37 लेता है। लौटाया गया मान 37 + n है, जहां n = 12. हमें 49 मिलता है।

दूसरी पुनरावृत्ति के दौरान, संचायक 49 है, लौटाया गया मान 49 + 28 = 77 है। और इसी तरह।

reduce विधि इतनी कार्यात्मक है कि आप इसका उपयोग map या filter जैसी कई सरणी विधियों के निर्माण के लिए कर सकते हैं।

 const map = (arr, fn) => { return arr.reduce((mappedArr, element) => { return [...mappedArr, fn(element)] }, []) } console.log(map([1, 2, 3, 4], n => n + 1)) // [2, 3, 4, 5] const filter = (arr, fn) => { return arr.reduce((filteredArr, element) => { return fn(element) ? [...filteredArr] : [...filteredArr, element] }, []) } console.log(filter([1, 2, 3, 4, 5, 6], n => n % 2 === 0)) // [1, 3, 5] 

एक नियम के रूप में, हम प्रारंभिक विधि [] को reduce विधि - संचायक को असाइन करते हैं। map हम एक फ़ंक्शन चलाते हैं जिसका परिणाम प्रसार ऑपरेटर का उपयोग करके बैटरी के अंत में जोड़ा जाता है (हम इसके बारे में नीचे बात करेंगे, चिंता न करें)। filter लगभग एक ही काम कर filter हैं, हम केवल तत्व पर फ़िल्टर फ़ंक्शन चलाते हैं। यदि यह सही है, तो हम पिछली सरणी वापस करते हैं। अन्यथा, तत्व को सरणी के अंत में जोड़ें।

आइए एक अधिक जटिल उदाहरण देखें: सरणी को कम करें [1, 2, 3, [4, [[[5, [6, 7]]]], 8]] से [1, 2, 3, 4, 5, 6, 7, 8] ।

 function flatDeep(arr) { return arr.reduce((flattenArray, element) => { return Array.isArray(element) ? [...flattenArray, ...flatDeep(element)] : [...flattenArray, element] }, []) } console.log(flatDeep([1, 2, 3, [4, [[[5, [6, 7]]]], 8]])) // [1, 2, 3, 4, 5, 6, 7, 8] 

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

स्प्रेड स्टेटमेंट (ES2015)
मैं मानता हूं, यह कोई विधि नहीं है। हालांकि, फैलाने वाला ऑपरेटर सरणियों के साथ काम करते समय विभिन्न लक्ष्यों को प्राप्त करने में मदद करता है। आप एक सरणी के मूल्यों को दूसरे में विस्तारित करने के लिए इसे लागू कर सकते हैं, और फिर एक साथ कई सरणियों की प्रतिलिपि या लिंक बना सकते हैं।

 const numbers = [1, 2, 3] const numbersCopy = [...numbers] console.log(numbersCopy) // [1, 2, 3] const otherNumbers = [4, 5, 6] const numbersConcatenated = [...numbers, ...otherNumbers] console.log(numbersConcatenated) // [1, 2, 3, 4, 5, 6] 

नोट : फैला हुआ स्टेटमेंट मूल सरणी की उथली प्रति बनाता है। लेकिन "सतही" का क्या अर्थ है?

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

 const arr = ['foo', 42, { name: 'Thomas' }] let copy = [...arr] copy[0] = 'bar' console.log(arr) // No mutations: ["foo", 42, { name: "Thomas" }] console.log(copy) // ["bar", 42, { name: "Thomas" }] copy[2].name = 'Hello' console.log(arr) // /!\ MUTATION ["foo", 42, { name: "Hello" }] console.log(copy) // ["bar", 42, { name: "Hello" }] 

इसलिए, यदि आप किसी ऐसी सरणी की वास्तविक प्रतिलिपि बनाना चाहते हैं जिसमें कोई ऑब्जेक्ट या सरणियाँ हैं, तो आप cladDeep जैसे एक लॉश फ़ंक्शन का उपयोग कर सकते हैं। लेकिन ऐसा करने के लिए खुद को बाध्य न समझें। आपका लक्ष्य यह पता लगाना है कि हुड के नीचे सब कुछ कैसे काम करता है ।

उपयोगी तरीके

नीचे आपको ऐसी अन्य विधियाँ मिलेंगी जिनके बारे में जानना भी उपयोगी है और जो किसी समस्या को हल करने के लिए उपयोगी हो सकती हैं जैसे कि किसी एरे में तत्व खोजना, किसी ऐरे के हिस्से को हटाना और बहुत कुछ।

शामिल हैं (ES2015)
क्या आपने कभी यह पता लगाने के लिए indexOf का उपयोग किया है कि क्या किसी सरणी में कोई तत्व है या नहीं? जाँच करने का एक भयानक तरीका है, है ना?

सौभाग्य से, includes विधि हमारे लिए सत्यापन करती है। के लिए पैरामीटर सेट करें, और यह एरे में तत्व की खोज करेगा।

 const sports = ['football', 'archery', 'judo'] const hasFootball = sports.includes('football') console.log(hasFootball) // true 

concat
समवर्ती विधि का उपयोग दो या अधिक सरणियों को मर्ज करने के लिए किया जा सकता है।

 const numbers = [1, 2, 3] const otherNumbers = [4, 5, 6] const numbersConcatenated = numbers.concat(otherNumbers) console.log(numbersConcatenated) // [1, 2, 3, 4, 5, 6] // You can merge as many arrays as you want function concatAll(arr, ...arrays) { return arr.concat(...arrays) } console.log(concatAll([1, 2, 3], [4, 5, 6], [7, 8, 9], [10, 11, 12])) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] 

foreach
यदि आप ऐरे के प्रत्येक तत्व के लिए कोई क्रिया करना चाहते हैं, तो आप forEach विधि का उपयोग कर सकते हैं। यह एक पैरामीटर के रूप में एक फ़ंक्शन लेता है, जो बदले में तीन पैरामीटर भी लेता है: वर्तमान मूल्य, सूचकांक और सरणी।

 const numbers = [1, 2, 3, 4, 5] numbers.forEach(console.log) // 1 0 [ 1, 2, 3 ] // 2 1 [ 1, 2, 3 ] // 3 2 [ 1, 2, 3 ] 

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

 const sports = ['football', 'archery', 'judo'] const judoIndex = sports.indexOf('judo') console.log(judoIndex) // 2 

खोज
find विधि filter समान है। आपको इसे एक फ़ंक्शन के साथ प्रदान करना होगा जो सरणी के प्रत्येक तत्व का परीक्षण करता है। हालाँकि, जैसे ही यह परीक्षण पास करता है, वैसे ही आइटमों का परीक्षण रोक देता है। यह एक filter नहीं है जो परिस्थितियों की परवाह किए बिना पूरे सरणी पर पुनरावृत्त करता है।

 const users = [ { id: 'af35', name: 'john' }, { id: '6gbe', name: 'mary' }, { id: '932j', name: 'gary' }, ] const user = users.find(user => user.id === '6gbe') console.log(user) // { id: '6gbe', name: 'mary' } 

इसलिए, जब आप संपूर्ण सरणी को फ़िल्टर करना चाहते हैं तो filter विधि का उपयोग करें, और जब आप सुनिश्चित करें कि आप सरणी में एक अद्वितीय तत्व की तलाश कर रहे हैं, तो खोज विधि।
findIndex
यह विधि खोजने के लिए लगभग समान है, लेकिन यह तत्व के बजाय पहले तत्व के सूचकांक को वापस करता है।

 const users = [ { id: 'af35', name: 'john' }, { id: '6gbe', name: 'mary' }, { id: '932j', name: 'gary' }, ] const user = users.findIndex(user => user.id === '6gbe') console.log(user) // 1 

आप सोच सकते हैं कि findIndex और indexOf एक ही चीज हैं। वास्तव में नहीं। indexOf का पहला पैरामीटर एक आदिम मान (एक बूलियन मान, संख्या, स्ट्रिंग, अपरिभाषित मान या वर्ण) है, जबकि पहला पैरामीटर, findIndex कॉलबैक फ़ंक्शन है।

इसलिए, जब आपको किसी तत्व के सूचकांक को आदिम मूल्यों की एक सरणी में खोजने की आवश्यकता होती है, तो आप indexOf साथ काम कर सकते हैं। यदि आपके पास अधिक जटिल तत्व हैं, जैसे कि ऑब्जेक्ट, तो findIndex उपयोग findIndex ।

टुकड़ा
जब आपको किसी सरणी का हिस्सा लेने या किसी सरणी की प्रतिलिपि बनाने की आवश्यकता होती है, तो आप slice विधि का उल्लेख कर सकते हैं। लेकिन सावधान रहें: प्रसार ऑपरेटर की तरह, slice एक उथली प्रति देता है।

 const numbers = [1, 2, 3, 4, 5] const copy = numbers.slice() 

लेख की शुरुआत में, मैंने उल्लेख किया कि लूप अक्सर बेकार होते हैं। मैं आपको दिखाऊं कि इनसे कैसे छुटकारा पाया जाए।

मान लीजिए कि आप एपीआई से एक निश्चित संख्या में संदेश वापस करना चाहते हैं और आपको केवल उनमें से पांच को देखना होगा। नीचे दो दृष्टिकोण हैं: एक छोरों के साथ, दूसरा slice विधि के साथ।

 // The "traditional way" to do it: // Determine the number of messages to take and use a for loop const nbMessages = messages.length < 5 ? messages.length : 5 let messagesToShow = [] for (let i = 0; i < nbMessages; i++) { messagesToShow.push(posts[i]) } // Even if "arr" has less than 5 elements, // slice will return an entire shallow copy of the original array const messagesToShow = messages.slice(0, 5) 

कुछ
यदि आप जांचना चाहते हैं कि सरणी का कम से कम एक तत्व परीक्षण पास करता है, तो आप some उपयोग कर सकते हैं। map , filter या find , some विधि कॉलबैक फ़ंक्शन को एकमात्र पैरामीटर के रूप में लेती है, और फिर true हो जाता true अगर कम से कम एक तत्व चेक पास करता है, और यदि नहीं तो false ।

some अनुमतियों के साथ काम करने के लिए भी उपयुक्त है।

 const users = [ { id: 'fe34', permissions: ['read', 'write'], }, { id: 'a198', permissions: [], }, { id: '18aa', permissions: ['delete', 'read', 'write'], } ] const hasDeletePermission = users.some(user => user.permissions.includes('delete') ) console.log(hasDeletePermission) // true 

प्रत्येक
यह विधि some समान है, सिवाय इसके कि यह जांचती है कि प्रत्येक तत्व (और एक नहीं ) स्थिति से मेल खाता है।

 const users = [ { id: 'fe34', permissions: ['read', 'write'], }, { id: 'a198', permissions: [], }, { id: '18aa', permissions: ['delete', 'read', 'write'], } ] const hasAllReadPermission = users.every(user => user.permissions.includes('read') ) console.log(hasAllReadPermission) // false 

फ्लैट (ES2019)
ये जावास्क्रिप्ट दुनिया में पूरी तरह से नए तरीके हैं। आमतौर पर flat एक नया सरणी बनाता है, एक नेस्टेड सरणी के सभी तत्वों को जोड़ता है। यह एक पैरामीटर लेता है - एक संख्या जो इंगित करती है कि आप सरणी के आयाम को कितना कम करना चाहते हैं।

 const numbers = [1, 2, [3, 4, [5, [6, 7]], [[[[8]]]]]] const numbersflattenOnce = numbers.flat() console.log(numbersflattenOnce) // [1, 2, 3, 4, Array[2], Array[1]] const numbersflattenTwice = numbers.flat(2) console.log(numbersflattenTwice) // [1, 2, 3, 4, 5, Array[2], Array[1]] const numbersFlattenInfinity = numbers.flat(Infinity) console.log(numbersFlattenInfinity) // [1, 2, 3, 4, 5, 6, 7, 8] 

फ्लैटपाइप (ES2019)
लगता है कि यह विधि क्या करती है? मुझे यकीन है आप एक नाम को समझेंगे।

सबसे पहले, यह प्रत्येक तत्व के लिए मैपिंग फ़ंक्शन चलाता है, और फिर एक समय में सरणी को सिकोड़ता है। उस के रूप में सरल!

 const sentences = [ 'This is a sentence', 'This is another sentence', "I can't find any original phrases", ] const allWords = sentences.flatMap(sentence => sentence.split(' ')) console.log(allWords) // ["This", "is", "a", "sentence", "This", "is", "another", "sentence", "I", "can't", "find", "any", "original", "phrases"] 

इस उदाहरण में, आपके पास सरणी में कई वाक्य हैं और आप सभी शब्दों को प्राप्त करना चाहते हैं। map विधि का उपयोग करने और सभी वाक्यों को शब्दों में विभाजित करने और फिर सरणी को छोटा करने के बजाय, आप flatMap उपयोग कर सकते हैं।

फिर आप reduce फ़ंक्शन के साथ शब्दों की संख्या की गणना कर सकते हैं (यह flatMap लागू नहीं होता है, मैं सिर्फ आपको reduce विधि का उपयोग reduce का एक और उदाहरण दिखाना चाहता हूं)।

 const wordsCount = allWords.reduce((count, word) => { count[word] = count[word] ? count[word] + 1 : 1 return count }, {}) console.log(wordsCount) // { This: 2, is: 2, a: 1, sentence: 2, another: 1, I: 1, "can't": 1, find: 1, any: 1, original: 1, phrases: 1, } 

flatMap विधि flatMap उपयोग अक्सर प्रतिक्रियाशील प्रोग्रामिंग में भी किया जाता है। आप यहां एक उदाहरण देख सकते हैं।

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

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

 const participants = ['john', 'mary', 'gary'] const participantsFormatted = participants.join(', ') console.log(participantsFormatted) // john, mary, gary 

और यह एक अधिक यथार्थवादी उदाहरण है जहां आप पहले प्रतिभागियों को फ़िल्टर कर सकते हैं और उनके नाम प्राप्त कर सकते हैं।

 const potentialParticipants = [ { id: 'k38i', name: 'john', age: 17 }, { id: 'baf3', name: 'mary', age: 13 }, { id: 'a111', name: 'gary', age: 24 }, { id: 'fx34', name: 'emma', age: 34 }, ] const participantsFormatted = potentialParticipants .filter(user => user.age > 18) .map(user => user.name) .join(', ') console.log(participantsFormatted) // gary, emma 

से
यह एक स्टैटिक विधि है, जो एक अरेंज-लाइक या iterable ऑब्जेक्ट जैसे कि एक स्ट्रिंग से एक नया एरे बनाता है। जब आप दस्तावेज़ ऑब्जेक्ट मॉडल के साथ काम करते हैं तो यह काम में आ सकता है।

 const nodes = document.querySelectorAll('.todo-item') // this is an instance of NodeList const todoItems = Array.from(nodes) // now, you can use map, filter, etc. as you're workin with an array! 

क्या आपने देखा कि हमने एक सरणी उदाहरण के बजाय एक सरणी प्रकार का उपयोग किया है? इसीलिए इस विधि को स्थैतिक कहा जाता है।

फिर आप नोड्स के साथ मज़े कर सकते हैं, उदाहरण के लिए, उनमें से प्रत्येक के लिए ईवेंट विधि का उपयोग करके श्रोताओं को पंजीकृत करना।

 todoItems.forEach(item => { item.addEventListener('click', function() { alert(`You clicked on ${item.innerHTML}`) }) }) 

एरे मॉडिफिकेशन वर्थ के बारे में जानना

निम्नलिखित अन्य मानक विधियाँ हैं। उनका अंतर यह है कि वे मूल सरणी को संशोधित करते हैं। परिवर्तन के साथ कुछ भी गलत नहीं है, लेकिन आपको काम करते समय इस पर विचार करना चाहिए।

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

 const arr = [1, 2, 3, 4, 5] const copy = [...arr] // or arr.slice() 

तरह
हां, sort मूल सरणी को संशोधित करता है। वास्तव में, यह जगह में सरणी के तत्वों को हल करता है। डिफ़ॉल्ट सॉर्टिंग विधि सभी तत्वों को तार में बदल देती है और उन्हें वर्णानुक्रम में क्रमबद्ध करती है।

 const names = ['john', 'mary', 'gary', 'anna'] names.sort() console.log(names) // ['anna', 'gary', 'john', 'mary'] 

सावधान रहें: यदि आप, उदाहरण के लिए, पायथन भाषा से स्विच किए गए हैं, तो संख्याओं की एक सरणी के साथ काम करते समय sort विधि आपको वांछित परिणाम नहीं देगी।

 const numbers = [23, 12, 17, 187, 3, 90] numbers.sort() console.log(numbers) // [12, 17, 187, 23, 3, 90] 

फिर एक सरणी को कैसे सॉर्ट करें? sort विधि एक फ़ंक्शन - एक तुलनात्मक फ़ंक्शन लेती है। यह दो पैरामीटर लेता है: पहला तत्व ( ) और दूसरा तत्व तुलना ( b ) के लिए। इन दो तत्वों के बीच की तुलना के लिए एक अंक लौटाया जाना चाहिए:

• यदि मान ऋणात्मक है - a b से पहले क्रमबद्ध किया a ;
• यदि मान धनात्मक है, तो b पहले छांटा b a ;
• यदि मान 0 है, तो कोई परिवर्तन नहीं।

फिर आप संख्याओं को क्रमबद्ध कर सकते हैं।

 const numbers = [23, 12, 17, 187, 3, 90] numbers.sort((a, b) => a - b) console.log(numbers) // [3, 12, 17, 23, 90, 187] 

या आप नवीनतम से तारीखों को सॉर्ट कर सकते हैं।

 const posts = [ { title: 'Create a Discord bot under 15 minutes', date: new Date(2018, 11, 26), }, { title: 'How to get better at writing CSS', date: new Date(2018, 06, 17) }, { title: 'JavaScript arrays', date: new Date() }, ] posts.sort((a, b) => a.date - b.date) // Substracting two dates returns the difference in millisecond between them console.log(posts) // [ { title: 'How to get better at writing CSS', // date: 2018-07-17T00:00:00.000Z }, // { title: 'Create a Discord bot under 15 minutes', // date: 2018-12-26T00:00:00.000Z }, // { title: 'Learn Javascript arrays the functional way', // date: 2019-03-16T10:31:00.208Z } ] 

भरण
fill विधि निर्दिष्ट इंडेक्स के साथ शुरू इंडेक्स से अंत तक सरणी के सभी तत्वों को संशोधित या भरता है। fill के उत्कृष्ट उपयोग का एक उदाहरण प्रारंभिक डेटा के साथ एक नया सरणी fill है।

 // Normally I would have called a function that generates ids and random names but let's not bother with that here. function fakeUser() { return { id: 'fe38', name: 'thomas', } } const posts = Array(3).fill(fakeUser()) console.log(posts) // [{ id: "fe38", name: "thomas" }, { id: "fe38", name: "thomas" }, { id: "fe38", name: "thomas" }] 

उलटा
यह मुझे लगता है कि विधि का नाम पूरी तरह से इसका सार बताता है।

 const numbers = [1, 2, 3, 4, 5] numbers.reverse() console.log(numbers) // [5, 4, 3, 2, 1] 

पॉप
यह विधि अंतिम तत्व को सरणी से निकालती है और उसे वापस करती है।

 const messages = ['Hello', 'Hey', 'How are you?', "I'm fine"] const lastMessage = messages.pop() console.log(messages) // ['Hello', 'Hey', 'How are you?'] console.log(lastMessage) // I'm fine 

ऐसे तरीके जिन्हें बदला जा सकता है

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

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

 const todoItems = [1, 2, 3, 4, 5] const itemsIncremented = [] for (let i = 0; i < items.length; i++) { itemsIncremented.push(items[i] + 1) } console.log(itemsIncremented) // [2, 3, 4, 5, 6] const todos = ['Write an article', 'Proofreading'] todos.push('Publish the article') console.log(todos) // ['Write an article', 'Proofreading', 'Publish the article'] 

यदि आपको किसी अन्य के आधार पर एक सरणी बनाने की आवश्यकता है, जैसा कि itemsIncremented विधि में है, तो उपयुक्त map , filter या reduce itemsIncremented जो पहले से ही हमारे परिचित हैं। उदाहरण के लिए, हम ऐसा करने के लिए map ले सकते हैं।

 const itemsIncremented = todoItems.map(x => x + 1) 

और यदि आप एक नए तत्व को जोड़ने की आवश्यकता होने पर push का उपयोग करना चाहते हैं, तो प्रसार ऑपरेटर उपयोगी है।

 const todos = ['Write an article', 'Proofreading'] console.log([...todos, 'Publish the article']) 

ब्याह
किसी विशिष्ट इंडेक्स पर किसी तत्व को साफ करने के लिए splice अक्सर एक्सेस किया जाता है। आप filter विधि के साथ भी ऐसा कर सकते हैं।

 const months = ['January', 'February', 'March', 'April', ' May'] // With splice months.splice(2, 1) // remove one element at index 2 console.log(months) // ['January', 'February', 'April', 'May'] // Without splice const monthsFiltered = months.filter((month, i) => i !== 3) console.log(monthsFiltered) // ['January', 'February', 'April', 'May'] 

आप पूछ सकते हैं: क्या होगा यदि मुझे बहुत सारे तत्वों को निकालने की आवश्यकता है? फिर slice उपयोग करें।

 const months = ['January', 'February', 'March', 'April', ' May'] // With splice months.splice(1, 3) // remove thirds element starting at index 1 console.log(months) // ['January', 'February', 'April', 'May'] // Without splice const monthsFiltered = [...months.slice(0, 1), ...months.slice(4)] console.log(monthsFiltered) // ['January', 'February', 'April', 'May'] 

पाली
shift विधि सरणी के पहले तत्व को हटाती है और इसे वापस करती है। फ़ंक्शनल प्रोग्रामिंग की शैली में ऐसा करने के लिए, आप स्प्रेड या रेस्ट स्टेटमेंट का उपयोग कर सकते हैं।

 const numbers = [1, 2, 3, 4, 5] // With shift const firstNumber = numbers.shift() console.log(firstNumber) // 1 console.log(numbers) // [2, 3, 4, 5] // Without shift const [firstNumber, ...numbersWithoutOne] = numbers console.log(firstNumber) // 1 console.log(numbersWithoutOne) // [2, 3, 4, 5] 

unshift
अनशिफ्ट विधि आपको किसी सरणी के आरंभ में एक या अधिक तत्व जोड़ने की अनुमति देती है। shift तरह, आप इसे प्रसार ऑपरेटर के साथ कर सकते हैं।

 const numbers = [3, 4, 5] // With unshift numbers.unshift(1, 2) console.log(numbers) // [1, 2, 3, 4, 5] // Without unshift const newNumbers = [1, 2, ...numbers] console.log(newNumbers) // [1, 2, 3, 4, 5] 

टीएल, डॉ

• जब आप एक सरणी के साथ कुछ संचालन करना चाहते हैं, तो लूप के लिए उपयोग न करें और पहिया को सुदृढ़ न करें, क्योंकि सबसे अधिक संभावना है कि ऊपर से एक विधि है जो आप की आवश्यकता हो सकती है।
• सबसे अधिक बार आप map , filter , reduce तरीकों और प्रसार ऑपरेटर का उपयोग करेंगे - ये किसी भी डेवलपर के लिए महत्वपूर्ण उपकरण हैं।
• कई ऐरे तरीके भी हैं जिन्हें जानकर अच्छा लगेगा: slice , some , flatMap आदि। उन्हें जान लें और यदि आवश्यक हो तो आवेदन करें।
• साइड इफेक्ट से अवांछित परिवर्तन हो सकते हैं। ध्यान रखें कि कुछ विधियाँ आपके मूल सरणी को संशोधित करती हैं।
• slice विधि और प्रसार ऑपरेटर उथली प्रतियां बनाते हैं। नतीजतन, ऑब्जेक्ट और सबरेज़ में समान लिंक होंगे - यह भी ध्यान में रखने योग्य है।
• पुराने तरीके जो सरणी को संशोधित करते हैं, उन्हें नए के साथ बदला जा सकता है। आप तय करें कि क्या करना है।

अब आपको जावास्क्रिप्ट सरणियों के बारे में सब कुछ पता होना चाहिए। यदि आपको यह लेख पसंद आया है, तो "पैट" बटन पर क्लिक करें (50 बार तक, यदि आप :-) चाहते हैं) और इसे साझा करें। और टिप्पणी में अपने छापों को साझा करने के लिए स्वतंत्र महसूस करें!