JQuery - सरणी, ऑब्जेक्ट और तत्वों के माध्यम से लूपिंग। जावास्क्रिप्ट में एक एसोसिएटिव ऐरे को वास्तविक ऐरे में परिवर्तित करने का तरीका कैसे बनाएं

I. वास्तविक सरणियों पर पुनरावृत्ति
प्रत्येक विधि और संबंधित विधियों के लिए
पाश के लिए
for...in लूप का उचित उपयोग
लूप के लिए (पुनरावर्तक का अंतर्निहित उपयोग)
पुनरावर्तक का स्पष्ट उपयोग
वास्तविक सरणियों पर पुनरावृति करने के तरीकों का उपयोग करना
वास्तविक सरणी में कनवर्ट करें
रनटाइम ऑब्जेक्ट पर एक नोट

I. वास्तविक सरणियों की गणना चालू इस पलवास्तविक सरणी के तत्वों पर पुनरावृति करने के तीन तरीके हैं:

विधि Array.prototype.forEach ;

लूप के लिए क्लासिक

लूप में... के लिए एक "सही ढंग से" निर्मित।

इसके अलावा, जल्द ही, नए ईसीएमएस्क्रिप्ट 6 (ईएस 6) मानक के आगमन के साथ, दो और तरीके अपेक्षित हैं:

for...of लूप (इटरेटर का अंतर्निहित उपयोग);

पुनरावर्तक का स्पष्ट उपयोग.

1. forEach विधि और संबंधित विधियाँ यदि आपका प्रोजेक्ट ECMAScript 5 (ES5) मानक की सुविधाओं का समर्थन करने के लिए डिज़ाइन किया गया है, तो आप इसके नवाचारों में से एक - forEach विधि का उपयोग कर सकते हैं।

उपयोग उदाहरण:
var a = ["a", "b", "c"]; a.forEach(function(entry) ( console.log(entry); ));
सामान्य तौर पर, forEach का उपयोग करने के लिए उन ब्राउज़रों के लिए es5-शिम इम्यूलेशन लाइब्रेरी को कनेक्ट करने की आवश्यकता होती है जो मूल रूप से इस पद्धति का समर्थन नहीं करते हैं। इनमें IE 8 और इसके बाद के संस्करण शामिल हैं प्रारंभिक संस्करणजो आज भी यत्र-तत्र प्रयोग में हैं।

forEach का लाभ यह है कि वर्तमान सरणी तत्व के सूचकांक और मूल्य को संग्रहीत करने के लिए स्थानीय चर घोषित करने की कोई आवश्यकता नहीं है, क्योंकि वे स्वचालित रूप से कॉलबैक फ़ंक्शन को तर्क के रूप में पारित कर दिए जाते हैं।

यदि आप प्रत्येक तत्व पर कॉलबैक करने की संभावित लागत के बारे में चिंतित हैं, तो चिंता न करें और इसे पढ़ें।

ForEach को किसी सरणी के सभी तत्वों को पुनरावृत्त करने के लिए डिज़ाइन किया गया है, लेकिन इसके अलावा, ES5 सभी या कुछ तत्वों के माध्यम से पुनरावृत्त करने के साथ-साथ उन पर कुछ क्रियाएं करने के लिए कई और उपयोगी तरीके प्रदान करता है:

प्रत्येक - सत्य लौटाता है यदि सरणी के प्रत्येक तत्व के लिए कॉलबैक एक मान देता है जिसे सत्य में परिवर्तित किया जा सकता है।
कुछ - सत्य लौटाता है यदि सरणी के कम से कम एक तत्व के लिए कॉलबैक एक मान लौटाता है जिसे सत्य में परिवर्तित किया जा सकता है।
फ़िल्टर - एक नई सरणी बनाता है जिसमें मूल सरणी के वे तत्व शामिल होते हैं जिनके लिए कॉलबैक सत्य लौटाता है।
मानचित्र - कॉलबैक द्वारा लौटाए गए मानों से युक्त एक नई सरणी बनाता है।
कम करें - एक सरणी को एक मान में कम कर देता है, पहले से शुरू करके सरणी के प्रत्येक तत्व पर कॉलबैक लागू करता है (सरणी तत्वों और अन्य सारांश कार्यों के योग की गणना के लिए उपयोगी हो सकता है)।
कम करें - कम करने के समान काम करता है, लेकिन तत्वों के माध्यम से उल्टे क्रम में पुनरावृत्त करता है।

2. लूप के लिए नियमों के लिए अच्छा पुराना:

वर ए = ["ए", "बी", "सी"]; वर सूचकांक; के लिए (सूचकांक = 0; सूचकांक< a.length; ++index) { console.log(a); }
यदि सरणी की लंबाई पूरे लूप में स्थिर है, और लूप स्वयं कोड के प्रदर्शन-महत्वपूर्ण अनुभाग से संबंधित है (जो कि संभावना नहीं है), तो आप सरणी की लंबाई को संग्रहीत करने के लिए "अधिक इष्टतम" संस्करण का उपयोग कर सकते हैं :

वर ए = ["ए", "बी", "सी"]; वर सूचकांक, लेन; के लिए (सूचकांक = 0, लेन = ए.लंबाई; सूचकांक< len; ++index) { console.log(a); }
सिद्धांत रूप में, यह कोड पिछले वाले की तुलना में थोड़ा तेज़ चलना चाहिए।

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

वर ए = ["ए", "बी", "सी"]; वर सूचकांक; के लिए (सूचकांक = ए.लंबाई - 1; सूचकांक >= 0; --सूचकांक) ( कंसोल.लॉग(ए); )
हालाँकि, आधुनिक जावास्क्रिप्ट इंजनों में ऐसे अनुकूलन गेम का आमतौर पर कोई मतलब नहीं होता है।

3. फॉर...इन लूप का उचित उपयोग यदि आपको फॉर...इन लूप का उपयोग करने की सलाह दी जाती है, तो याद रखें कि सरणियों पर पुनरावृत्ति करना वह नहीं है जिसके लिए इसका उद्देश्य है। एक आम ग़लतफ़हमी के विपरीत, for...in लूप सरणी सूचकांकों पर नहीं, बल्कि किसी ऑब्जेक्ट के असंख्य गुणों के माध्यम से पुनरावृत्त होता है।

हालाँकि, कुछ मामलों में, जैसे कि विरल सरणियों पर पुनरावृत्ति, for...in उपयोगी हो सकता है, जब तक आप सावधानी बरतते हैं, जैसा कि नीचे दिए गए उदाहरण में दिखाया गया है:

// ए - विरल सरणी var a = ; ए = "ए"; ए = "बी"; ए = "सी"; for (var key in a) ( if (a.hasOwnProperty(key) && /^0$|^\d*$/.test(key) && key 0) ( परिणाम = सत्य; ) वापसी परिणाम; ); var उत्तीर्ण = संख्याएँ.प्रत्येक(स्थिति); दस्तावेज़.लिखें(उत्तीर्ण); // असत्य

प्रत्येक() विधि को एक पैरामीटर के रूप में स्थिति का प्रतिनिधित्व करने वाला एक फ़ंक्शन पारित किया जाता है। यह फ़ंक्शन तीन पैरामीटर लेता है:

फ़ंक्शन स्थिति (मान, सूचकांक, सरणी) ( )

मान पैरामीटर वर्तमान सरणी तत्व को पुनरावृत्त होने का प्रतिनिधित्व करता है, सूचकांक पैरामीटर उस तत्व के सूचकांक का प्रतिनिधित्व करता है, और सरणी पैरामीटर सरणी के संदर्भ को पास करता है।

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

परिणामस्वरूप, जब number.every(condition) विधि को कॉल किया जाता है, तो यह संख्या सरणी के सभी तत्वों के माध्यम से पुनरावृत्त होता है और उन्हें एक-एक करके कंडीशन फ़ंक्शन में भेजता है। यदि यह फ़ंक्शन सभी तत्वों के लिए सत्य लौटाता है, तो प्रत्येक() विधि सत्य लौटाती है। यदि कम से कम एक तत्व शर्त से मेल नहीं खाता है, तो प्रत्येक() विधि गलत लौटाती है।

कुछ()

कुछ() विधि प्रत्येक() विधि के समान है, केवल यह जांचती है कि कम से कम एक तत्व किसी शर्त से मेल खाता है या नहीं। और इस मामले में, some() विधि true लौटाती है। यदि सरणी में स्थिति से मेल खाने वाले कोई तत्व नहीं हैं, तो गलत लौटाया जाता है:

वार संख्याएँ = [1, -12, 8, -4, 25, 42 ]; फ़ंक्शन स्थिति (मान, सूचकांक, सरणी) (var परिणाम = गलत; यदि (मूल्य === 8) (परिणाम = सत्य;) वापसी परिणाम;); var पारित = संख्याएँ.कुछ(स्थिति); // सत्य

फ़िल्टर()

फ़िल्टर() विधि, some() और Every() की तरह, एक शर्त फ़ंक्शन स्वीकार करती है। लेकिन साथ ही यह उन तत्वों की एक श्रृंखला लौटाता है जो इस शर्त को पूरा करते हैं:

वार संख्याएँ = [1, -12, 8, -4, 25, 42 ]; फ़ंक्शन स्थिति (मान, सूचकांक, सरणी) (var परिणाम = गलत; यदि (मान> 0) (परिणाम = सत्य;) वापसी परिणाम;); var फ़िल्टर किए गए नंबर = नंबर.फ़िल्टर (स्थिति); for(var i=0; i< filteredNumbers.length; i++) document.write(filteredNumbers[i] + "
");

ब्राउज़र आउटपुट:

1 8 25 42

प्रत्येक के लिए() और मानचित्र()

forEach() और मैप() विधियां तत्वों पर पुनरावृति करती हैं और उन पर कुछ ऑपरेशन करती हैं। उदाहरण के लिए, किसी सरणी में संख्याओं के वर्गों की गणना करने के लिए, आप निम्नलिखित कोड का उपयोग कर सकते हैं:

वर संख्याएँ = [1, 2, 3, 4, 5, 6]; for(var i = 0; i

एचटीएमएल
जावास्क्रिप्ट

$("ul#myList").children().each(function())( console.log($(this).text()); )); // परिणाम: // HTML // सीएसएस // जावास्क्रिप्ट

आइए अंतिम सूचकांक (तत्व) को निर्धारित करने का एक तरीका देखें jQuery विधिप्रत्येक।

// तत्वों का चयन करें var myList = $("ul li"); // चयन में तत्वों की संख्या निर्धारित करें var total = myList.length; // चयनित तत्वों के माध्यम से पुनरावृत्त करें myList.each(function(index) (यदि (सूचकांक === कुल - 1) ( // यह चयन में अंतिम तत्व है ) ));

परिभाषा और अनुप्रयोग

जावास्क्रिप्ट forEach() विधि आपको सरणी में प्रत्येक तत्व के लिए आरोही सूचकांक क्रम में पारित फ़ंक्शन को एक बार निष्पादित करने की अनुमति देती है।

कृपया ध्यान दें कि forEach() विधि के पैरामीटर के रूप में पारित कॉलबैक फ़ंक्शन को हटाए गए या गायब सरणी तत्वों के लिए नहीं बुलाया जाएगा।

forEach() पद्धति का उपयोग करके संसाधित तत्वों की श्रेणी पहले निर्धारित की गई है पहलाकॉलबैक फ़ंक्शन को कॉल करना। यदि तत्वों को उसके कॉल के बाद सरणी में जोड़ा गया था, तो ऐसे तत्वों पर फ़ंक्शन को कॉल नहीं किया जाएगा।

यदि मौजूदा सरणी तत्वों का मान निष्पादन समय पर बदलता है, तो फ़ंक्शन को दिया गया मान उस समय का मान होगा जब forEach() विधि उन पर जाती है। यदि तत्वों को विजिट करने से पहले हटा दिया जाता है, तो ऐसे तत्वों को विजिट नहीं किया जाएगा। यदि पहले से देखे जा चुके तत्वों को सरणी को पार करते समय हटा दिया जाता है, तो बाद के तत्वों को छोड़ दिया जाएगा।

ब्राउज़र समर्थन तरीका
ओपेरा
आईएक्सप्लोरर
किनारा

प्रत्येक के लिए()

हाँ

9.0

हाँ

जावास्क्रिप्ट सिंटैक्स: // केवल कॉलबैक फ़ंक्शन के साथ सरणी.प्रत्येक के लिए(फ़ंक्शन ( वर्तमान मूल्य, अनुक्रमणिका, आगमन)); // किसी ऑब्जेक्ट का उपयोग करना जिसे इस कीवर्ड द्वारा संदर्भित किया जा सकता है सरणी.प्रत्येक के लिए(फ़ंक्शन ( वर्तमान मूल्य, अनुक्रमणिका, आगमन), यह मान); जावास्क्रिप्ट संस्करण ईसीएमएस्क्रिप्ट 5.1 (जावास्क्रिप्ट 1.6 में लागू) पैरामीटर मान पैरामीटर विवरण

समारोह

कॉलबैक फ़ंक्शन निष्पादित किया जाना है एकसरणी में प्रत्येक तत्व के लिए समय। फ़ंक्शन निम्नलिखित पैरामीटर स्वीकार करता है:

वर्तमान मूल्य- वर्तमान तत्व का मूल्य
अनुक्रमणिका- वर्तमान तत्व का सरणी सूचकांक।
आगमन- वह सरणी जिससे वर्तमान तत्व संबंधित है (जिसके माध्यम से मार्ग होता है)।

यदि किसी विधि के पैरामीटर के रूप में कुछ पारित किया जाता है जो फ़ंक्शन ऑब्जेक्ट नहीं है, तो एक अपवाद फेंक दिया जाएगा त्रुटि प्रकार. आवश्यक पैरामीटर.

यह मान

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

उपयोग उदाहरण

निम्नलिखित उदाहरण में, हम देखेंगे कि किसी सरणी के सभी तत्वों का योग कैसे प्राप्त किया जाए जावास्क्रिप्टप्रत्येक के लिए() विधि:

वर सरणी = ; वर योग = 0 ; // संख्यात्मक मान वाले एक वेरिएबल को प्रारंभ करें सरणी.forEach(// सरणी के सभी तत्वों के माध्यम से पुनरावृत्त करें सरणी फ़ंक्शन sumNumber( वर्तमान मूल्य) { जोड़ += वर्तमान मूल्य; ) ); कंसोल .लॉग( जोड़); // योग चर का मान 50 के बराबर प्रदर्शित करें

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

वर संख्या = ; // संख्यात्मक मानों की एक सरणी वाले एक वैरिएबल को प्रारंभ करें var वर्ग =; // एक रिक्त सरणी वाले एक वेरिएबल को आरंभ करें var myObject = ( // एक ऑब्जेक्ट वर्ग वाले एक वेरिएबल को आरंभ करें: फ़ंक्शन ( वर्तमान मूल्य) ( // ऑब्जेक्ट विधि जो मान रिटर्न लेती है वर्तमान मूल्य * वर्तमान मूल्य; // और इसे चुकता करके लौटाता है ) ) ; नंबर.forEach(// सरणी संख्या फ़ंक्शन के सभी तत्वों के माध्यम से पुनरावृत्त करें ( वर्तमान मूल्य) { Squared.पुश(यह .वर्ग( वर्तमान मूल्य)); // myObject ऑब्जेक्ट की वर्ग विधि का रिटर्न मान वर्ग सरणी में जोड़ें, मेराऑब्जेक्ट// जिस वस्तु को हम इस कीवर्ड का उपयोग करके संदर्भित करते हैं); कंसोल .लॉग( Squared); // वर्ग चर का मान इसके बराबर प्रदर्शित करें;

I. वास्तविक सरणियों पर पुनरावृत्ति
प्रत्येक विधि और संबंधित विधियों के लिए
पाश के लिए
for...in लूप का उचित उपयोग
लूप के लिए (पुनरावर्तक का अंतर्निहित उपयोग)
पुनरावर्तक का स्पष्ट उपयोग
द्वितीय. सरणी-जैसी वस्तुओं पर पुनरावृत्ति
वास्तविक सरणियों पर पुनरावृति करने के तरीकों का उपयोग करना
वास्तविक सरणी में कनवर्ट करें
रनटाइम ऑब्जेक्ट पर एक नोट

I. वास्तविक सरणियों पर पुनरावृत्ति

फिलहाल, वास्तविक सरणी के तत्वों पर पुनरावृति करने के तीन तरीके हैं:

विधि Array.prototype.forEach ;

लूप के लिए क्लासिक

लूप में... के लिए एक "सही ढंग से" निर्मित।

for...of लूप (इटरेटर का अंतर्निहित उपयोग);

पुनरावर्तक का स्पष्ट उपयोग.

1. प्रत्येक विधि और संबंधित विधियाँ

यदि आपका प्रोजेक्ट ECMAScript 5 (ES5) मानक की सुविधाओं का समर्थन करने के लिए डिज़ाइन किया गया है, तो आप इसके नवाचारों में से एक - forEach विधि का उपयोग कर सकते हैं।

उपयोग उदाहरण:

वर ए = ["ए", "बी", "सी"]; a.forEach(function(entry) ( console.log(entry); ));

सामान्य तौर पर, forEach का उपयोग करने के लिए उन ब्राउज़रों के लिए es5-शिम इम्यूलेशन लाइब्रेरी को कनेक्ट करने की आवश्यकता होती है जो मूल रूप से इस पद्धति का समर्थन नहीं करते हैं। इनमें IE 8 और इससे पहले के संस्करण शामिल हैं, जो अभी भी कुछ स्थानों पर उपयोग में हैं।

forEach को किसी सरणी के सभी तत्वों के माध्यम से पुनरावृत्त करने के लिए डिज़ाइन किया गया है, लेकिन इसके अलावा, ES5 सभी या कुछ तत्वों के माध्यम से पुनरावृत्त करने के साथ-साथ उन पर कुछ क्रियाएं करने के लिए कई और उपयोगी तरीके प्रदान करता है:

प्रत्येक - सत्य लौटाता है यदि सरणी के प्रत्येक तत्व के लिए कॉलबैक एक मान देता है जिसे सत्य में परिवर्तित किया जा सकता है।
कुछ - सत्य लौटाता है यदि सरणी के कम से कम एक तत्व के लिए कॉलबैक एक मान लौटाता है जिसे सत्य में परिवर्तित किया जा सकता है।
फ़िल्टर - एक नई सरणी बनाता है जिसमें मूल सरणी के वे तत्व शामिल होते हैं जिनके लिए कॉलबैक सत्य लौटाता है।
मानचित्र - कॉलबैक द्वारा लौटाए गए मानों से युक्त एक नई सरणी बनाता है।
कम करें - एक सरणी को एक मान में कम कर देता है, पहले से शुरू करके सरणी के प्रत्येक तत्व पर कॉलबैक लागू करता है (सरणी तत्वों और अन्य सारांश कार्यों के योग की गणना के लिए उपयोगी हो सकता है)।
कम करें - कम करने के समान काम करता है, लेकिन तत्वों के माध्यम से उल्टे क्रम में पुनरावृत्त करता है।

2. लूप के लिए

नियमों के लिए अच्छा पुराना:

वर ए = ["ए", "बी", "सी"]; वर सूचकांक; के लिए (सूचकांक = 0; सूचकांक< a.length; ++index) { console.log(a); }

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

वर ए = ["ए", "बी", "सी"]; वर सूचकांक, लेन; के लिए (सूचकांक = 0, लेन = ए.लंबाई; सूचकांक< len; ++index) { console.log(a); }

सिद्धांत रूप में, यह कोड पिछले वाले की तुलना में थोड़ा तेज़ चलना चाहिए।

वर ए = ["ए", "बी", "सी"]; वर सूचकांक; (सूचकांक = ए.लंबाई - 1; सूचकांक >= 0; --सूचकांक) ( कंसोल.लॉग(ए); ) के लिए

हालाँकि, आधुनिक जावास्क्रिप्ट इंजनों में ऐसे अनुकूलन गेम का आमतौर पर कोई मतलब नहीं होता है।

3. for...in लूप का सही उपयोग

यदि आपको for...in लूप का उपयोग करने की सलाह दी जाती है, तो याद रखें कि सरणियों पर पुनरावृत्ति करना वह नहीं है जिसके लिए इसका उद्देश्य है। लोकप्रिय गलत धारणा के विपरीत, फॉर...इन लूप सरणी सूचकांकों पर नहीं, बल्कि किसी ऑब्जेक्ट के असंख्य गुणों के माध्यम से पुनरावृत्त होता है।

// ए - विरल सरणी var a = ; ए = "ए"; ए = "बी"; ए = "सी"; for (var key in a) ( if (a.hasOwnProperty(key) && /^0$|^d*$/.test(key) && key