javascript जावास्क्रिप्ट में एक सरणी के माध्यम से लूप




arrays loops (24)

जावा में आप निम्नानुसार सरणी में ऑब्जेक्ट्स को ट्रैवर्स करने के for लूप का उपयोग कर सकते हैं:

String[] myStringArray = {"Hello", "World"};
for (String s : myStringArray)
{
    // Do something
}

क्या आप जावास्क्रिप्ट में ऐसा ही कर सकते हैं?


जबकि लूप का प्रयोग करें ...

var i=0, item, items = ['one','two','three'];
while(item = items[i++]){
    console.log(item);
}

लॉग: 'एक', 'दो', 'तीन'

और रिवर्स ऑर्डर के लिए, एक और अधिक कुशल पाश

var items = ['one','two','three'], i = items.length;
while(i--){
    console.log(items[i]);
}

लॉग: 'तीन', 'दो', 'एक'

या लूप के for शास्त्रीय

var items = ['one','two','three']
for(var i=0, l = items.length; i < l; i++){
    console.log(items[i]);
}

लॉग: 'एक', 'दो', 'तीन'

संदर्भ: http://www.sitepoint.com/google-closure-how-not-to-write-javascript/


जावास्क्रिप्ट में सरणी के माध्यम से लूप करने के लिए कई तरीके हैं।

सामान्य लूप:

var i;
for (i = 0; i < substr.length; ++i) {
    // Do something with `substr[i]`
}

ईएस 5 के लिए प्रत्येक:

substr.forEach(function(item) {
    // Do something with `item`
});

jQuery.each:

jQuery.each(substr, function(index, item) {
    // Do something with `item` (or `this` is also `item` if you like)
});

विस्तृत जानकारी के लिए this देखें या आप जावास्क्रिप्ट में किसी सरणी के माध्यम से लूपिंग के लिए एमडीएन और jQuery.each() jQuery चेक jQuery.each() का उपयोग करके भी देख सकते हैं।


मेरी राय में सबसे अच्छा तरीका Array.forEach फ़ंक्शन का उपयोग करना है। यदि आप इसका उपयोग नहीं कर सकते हैं तो मैं एमडीएन से पॉलीफिल प्राप्त करने के लिए सुझाव दूंगा, यह निश्चित रूप से जावास्क्रिप्ट में एक सरणी को फिर से चलाने का सबसे सुरक्षित तरीका है।

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

इसलिए जैसा कि अन्य ने सुझाव दिया है, यह लगभग हमेशा वही है जो आप चाहते हैं:

var numbers = [1,11,22,33,44,55,66,77,88,99,111];
var sum = 0;
numbers.forEach(function(n){
  sum += n;
});

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

ज्यादातर मामलों में लूप कार्यों के लिए एक नियमित सी शैली का उपयोग करके, यह याद रखना महत्वपूर्ण है कि लूप के भीतर सबकुछ आपके शेष कार्यक्रम के साथ इसका दायरा साझा करता है, {} एक नया दायरा नहीं बनाता है।

इसलिये:

var sum = 0;
var numbers = [1,11,22,33,44,55,66,77,88,99,111];

for(var i = 0; i<numbers.length; ++i){ 
  sum += numbers[i];
}

alert(i);

आउटपुट "11" होगा - जो आप चाहते हैं या नहीं हो सकता है।

काम करना jsFiddle उदाहरण: https://jsfiddle.net/workingClassHacker/pxpv2dh5/7/


ऐरे लूप:

for(var i = 0; i < things.length; i++){
    var thing = things[i];
    console.log(thing);
}

ऑब्जेक्ट लूप:

for(var prop in obj){
    var propValue = obj[prop];
    console.log(propValue);
}

मैं underscore.js लाइब्रेरी का उपयोग करने की पूरी तरह से अनुशंसा करता हूं। यह आपको विभिन्न कार्यों के साथ प्रदान करता है जिनका उपयोग आप सरणी / संग्रहों पर फिर से करने के लिए कर सकते हैं।

उदाहरण के लिए:

_.each([1, 2, 3], function(num){ alert(num); });
=> alerts each number in turn...

जावास्क्रिप्ट में ऐसा करने के कुछ तरीके हैं। पहले दो उदाहरण जावास्क्रिप्ट नमूने हैं। तीसरा एक जावास्क्रिप्ट लाइब्रेरी का उपयोग करता है, यानी, jQuery का .each()फ़ंक्शन का उपयोग करना।

var myStringArray = ["hello", "World"];
for (var i=0; i < myStringArray.length; i++) {
  alert(myStringArray[i]);
}

var myStringArray = ["hello", "World"];
$.each(myStringArray, function(index, value){
  alert(value);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
var arr = [1, 2, 3, 1023, 1024];
for (var value; value = arr.pop();) {
    value + 1
}


जावास्क्रिप्ट में फॉर-इन लूप के साथ एक ऐरे के माध्यम से लूप को सलाह नहीं दी जाती है, लेकिन यह लूप के लिए बेहतर है जैसे कि:

for(var i=0, len=myArray.length; i < len; i++){}

यह भी अनुकूलित है (सरणी लंबाई "कैशिंग")। यदि आप और जानना चाहते हैं, तो विषय पर मेरी पोस्ट पढ़ें


यदि आप jQuery का उपयोग करना चाहते हैं, तो इसके दस्तावेज़ में इसका एक अच्छा उदाहरण है:

 $.each([ 52, 97 ], function( index, value ) {
      alert( index + ": " + value );
 });

सबसे सुरुचिपूर्ण और तेज़ तरीका

<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script>
    Benchmark.prototype.setup = function() {
        // Fake function with minimal action on the value
        var tmp = 0;
        var process = function(value) {
            tmp = value; // Hold a reference to the variable (prevent engine optimisation?)
        };

        // Declare the test Array
        var arr = [];
        for (var i = 0; i < 100000; i++)
            arr[i] = i;
    };
</script>

http://jsperf.com/native-loop-performance/8

संपादित (क्योंकि मैं गलत था)

100000 वस्तुओं की सरणी के माध्यम से लूपिंग के तरीकों की तुलना करना और प्रत्येक बार नए मान के साथ न्यूनतम ऑपरेशन करें।

तैयारी:

<a href="http://jsperf.com/native-loop-performance/16" 
   title="http://jsperf.com/native-loop-performance/16"
><img src="http://i.imgur.com/YTrO68E.png" title="Hosted by imgur.com" /></a>

टेस्ट:

for (var i in array) if (array.hasOwnProperty(i)) {
    // do something with array[i]
}

हां, लेकिन केवल तभी जब आपके कार्यान्वयन में ईसीएमएस्क्रिप्ट 2015 ("सद्भावना" रिलीज) में पेश of सुविधा शामिल है।

यह इस तरह काम करता है:

// REQUIRES ECMASCRIPT 2015+
var s, myStringArray = ["Hello", "World"];
for (s of myStringArray) {
  // ... do something with s ...
}

या बेहतर अभी तक, क्योंकि ईसीएमएस्क्रिप्ट 2015 भी ब्लॉक और स्कॉप्ड वेरिएबल्स को let और const माध्यम से प्रदान करता है:

// REQUIRES ECMASCRIPT 2015+
const myStringArray = ["Hello", "World"];
for (const s of myStringArray) {
  // ... do something with s ...
}
// s is no longer defined here

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

यदि आप मान सकते हैं कि जावास्क्रिप्ट दुभाषिया ईसीएमएस्क्रिप्ट विनिर्देश के पिछले संस्करण के अनुरूप है (उदाहरण के लिए, उदाहरण के लिए, इंटरनेट एक्सप्लोरर के संस्करण 9 से पहले), तो आप लूप के बजाय प्रत्येक forEach विधि का उपयोग कर सकते हैं। उस स्थिति में, आप सरणी में प्रत्येक आइटम पर एक फ़ंक्शन को कॉल करने के लिए पास करते हैं:

var myStringArray = [ "Hello", "World" ];
myStringArray.forEach( function(s) { 
     // ... do something with s ...
} );

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

var i, s, myStringArray = [ "Hello", "World" ], len = myStringArray.length;
for (i=0; i<len; ++i) {
  if (i in myStringArray) {
    s = myStringArray[i];
    // ... do something with s ...
  }
}

लम्बाई मान को स्थानीय चर में असाइन करना (लूप स्थिति में पूर्ण myStringArray.length अभिव्यक्ति को शामिल करने के विपरीत) प्रदर्शन में महत्वपूर्ण अंतर myStringArray.length सकता है क्योंकि यह हर बार एक संपत्ति लुकअप छोड़ देता है; मेरी मशीन पर राइनो का उपयोग करके, गति 43% है।

आप अक्सर लूप प्रारंभिक खंड में किए गए लम्बाई कैशिंग देखेंगे, जैसे:

var i, len, myStringArray = [ "Hello", "World" ];
for (len = myStringArray.length, i=0; i<len; ++i) {

के for ... दूसरों द्वारा उल्लिखित वाक्यविन्यास in किसी वस्तु के गुणों पर लूपिंग के लिए है; चूंकि जावास्क्रिप्ट में एक ऐरे संख्यात्मक संपत्ति नामों (और एक स्वचालित रूप से अद्यतन length संपत्ति) के साथ एक वस्तु है, तो आप सैद्धांतिक रूप से इसके साथ एक ऐरे पर लूप कर सकते हैं। लेकिन समस्या यह है कि यह खुद को संख्यात्मक संपत्ति मूल्यों तक सीमित नहीं करता है (याद रखें कि यहां तक ​​कि विधियां वास्तव में केवल वे गुण हैं जिनके मूल्य बंद हैं), न ही यह संख्यात्मक क्रम में उन पर निर्भर करता है। इसलिए, के for ... वाक्यविन्यास in Arrays के माध्यम से looping के लिए इस्तेमाल नहीं किया जाना चाहिए।


पहचान

कॉलेज में मेरा समय होने के बाद से, मैंने जावा, जावास्क्रिप्ट, पास्कल, ABAP , पीएचपी, प्रोग्रेस 4 जीएल, सी / सी ++ और संभवतः कुछ अन्य भाषाओं में प्रोग्राम किया है जो मैं अभी नहीं सोच सकता।

जबकि उनके सभी में अपनी भाषाई idiosyncrasies है, इन भाषाओं में से प्रत्येक एक ही बुनियादी अवधारणाओं को साझा करते हैं। इस तरह की अवधारणाओं में प्रक्रियाओं / कार्यों, IF -statements, FOR -loops, और WHILE -loops शामिल हैं।

पारंपरिक के for एक पारंपरिक

लूप के for पारंपरिक तीन घटक हैं:

  1. प्रारंभिकरण: लुक ब्लॉक से पहले निष्पादित पहली बार निष्पादित किया जाता है
  2. हालत: लूप ब्लॉक निष्पादित होने से पहले हर बार एक शर्त की जांच करता है, और गलत होने पर लूप को छोड़ देता है
  3. बाद विचार: लूप ब्लॉक निष्पादित होने के बाद हर बार प्रदर्शन किया जाता है

ये तीन घटक एक-दूसरे से अलग होते हैं ; प्रतीक। इन तीनों घटकों में से प्रत्येक के लिए सामग्री वैकल्पिक है, जिसका अर्थ है कि निम्नलिखित लूप के for निम्नतम न्यूनतम है:

for (;;) {
    // Do stuff
}

बेशक, आपको एक if(condition === true) { break; } if(condition === true) { break; } या एक if(condition === true) { return; } if(condition === true) { return; } उस जगह for अंदर कहीं भी इसे रोकने के लिए इसे पाने के लिए।

आम तौर पर, हालांकि, प्रारंभिकरण का उपयोग इंडेक्स घोषित करने के लिए किया जाता है, स्थिति का उपयोग उस सूचकांक की तुलना न्यूनतम या अधिकतम मूल्य के साथ करने के लिए किया जाता है, और बाद में विचार सूचकांक में वृद्धि के लिए उपयोग किया जाता है:

for (var i = 0, length = 10; i < length; i++) {
    console.log(i);
}

एक सरणी के माध्यम से पाश के for लूप के लिए पारंपरिक का उपयोग करना

एक सरणी के माध्यम से लूप करने का पारंपरिक तरीका यह है:

for (var i = 0, length = myArray.length; i < length; i++) {
    console.log(myArray[i]);
}

या, यदि आप पीछे की ओर लूप करना पसंद करते हैं, तो आप यह करते हैं:

for (var i = myArray.length - 1; i > -1; i--) {
    console.log(myArray[i]);
}

हालांकि, कई भिन्नताएं संभव हैं, उदाहरण के लिए यह एक:

for (var key = 0, value = myArray[key], length = myArray.length; key < length; value = myArray[++key]) {
    console.log(value);
}

... या यह एक ...

var i = 0, length = myArray.length;
for (; i < length;) {
    console.log(myArray[i]);
    i++;
}

... या यह एक:

var key = 0, value;
for (; value = myArray[key++];){
    console.log(value);
}

जो भी सबसे अच्छा काम करता है वह काफी हद तक व्यक्तिगत स्वाद और विशिष्ट उपयोग के मामले का विषय है जो आप कार्यान्वित कर रहे हैं।

ध्यान दें कि इनमें से प्रत्येक भिन्नता सभी ब्राउज़रों द्वारा समर्थित है, जिनमें बहुत पुराने हैं!

while लूप

लूप के for एक विकल्प while लूप है। एक सरणी के माध्यम से लूप करने के लिए, आप यह कर सकते हैं:

var key = 0;
while(value = myArray[key++]){
    console.log(value);
}

लूप के for परंपरागत की तरह, while लूप को सबसे पुराने ब्राउज़रों द्वारा भी समर्थित किया जाता है।

साथ ही, ध्यान दें कि प्रत्येक लूप को लूप के रूप में फिर से लिखा जा सकता है। उदाहरण के लिए, while लूप यहां से ऊपर के रूप में ठीक उसी तरह व्यवहार करता है:

for(var key = 0; value = myArray[key++];){
    console.log(value);
}

For...in और के for...of

जावास्क्रिप्ट में, आप यह भी कर सकते हैं:

for (i in myArray) {
    console.log(myArray[i]);
}

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

के लिए एक विकल्प के रूप for...in , के https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of भी अब के https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of । निम्न उदाहरण लूप के for...of अंतर for...of बीच अंतर दिखाता है:

var myArray = [3, 5, 7];
myArray.foo = "hello";

for (var i in myArray) {
  console.log(i); // logs 0, 1, 2, "foo"
}

for (var i of myArray) {
  console.log(i); // logs 3, 5, 7
}

इसके अतिरिक्त, आपको यह समझने की आवश्यकता है कि इंटरनेट एक्सप्लोरर का कोई संस्करण for...of एज ( एज 12+ करता है) के for...of समर्थन करता है और इसके for...in कम से कम इंटरनेट एक्सप्लोरर 10 की आवश्यकता होती है।

Array.prototype.forEach()

-Loops के for एक विकल्प Array.prototype.forEach() , जो निम्न वाक्यविन्यास का उपयोग करता है:

myArray.forEach(function(value, key, myArray) {
    console.log(value);
});

Array.prototype.forEach() सभी आधुनिक ब्राउज़रों के साथ-साथ इंटरनेट एक्सप्लोरर 9 और बाद में समर्थित है।

पुस्तकालय

अंत में, कई उपयोगिता पुस्तकालयों में भी अपना स्वयं का foreach भिन्नता है। AFAIK, तीन सबसे लोकप्रिय हैं ये हैं:

jQuery.each() , jQuery :

$.each(myArray, function(key, value) {
    console.log(value);
});

_.each() , Underscore.js :

_.each(myArray, function(value, key, myArray) {
    console.log(value);
});

_.forEach() , Lodash.js :

_.forEach(myArray, function(value, key) {
    console.log(value);
});

हां, आप लूप का उपयोग करके जावास्क्रिप्ट में ऐसा ही कर सकते हैं, लेकिन उस तक सीमित नहीं है, JavaScrip में सरणी पर लूप करने के कई तरीके, कल्पना करें कि आपके पास नीचे यह सरणी है और आप इसके ऊपर एक लूप करना चाहते हैं:

var arr = [1, 2, 3, 4, 5];

ये समाधान हैं:

1) लूप के लिए

लूप के लिए जावास्क्रिप्ट में सरणी के माध्यम से लूपिंग एक आम तरीका है, लेकिन बड़े सरणी के लिए सबसे तेज़ समाधान के रूप में नहीं माना जाता है:

for (var i=0, l=arr.length; i<l; i++) { 
  console.log(arr[i]);
}

2) जबकि लूप

जबकि लूप को लंबे सरणी के माध्यम से लूप करने का सबसे तेज़ तरीका माना जाता है, लेकिन आमतौर पर जावास्क्रिप्ट में कम उपयोग किया जाता है:

let i=0;

while (arr.length>i) {
    console.log(arr[i]);
    i++;
}

3) जबकि
कुछ वाक्यविन्यास अंतर के साथ वही काम करते समय करते हैं:

let i=0;
do {
  console.log(arr[i]);
  i++;
}
while (arr.length>i);

ये जावास्क्रिप्ट loops करने के मुख्य तरीके हैं, लेकिन ऐसा करने के कुछ और तरीके हैं।

इसके अलावा हम for inजावास्क्रिप्ट में ऑब्जेक्ट्स पर लूपिंग के लिए लूप का उपयोग करते हैं ।

इसके अलावा देखो map(), filter(), reduce()जावास्क्रिप्ट में सरणी पर आदि कार्य करता है। वे चीजें बहुत तेजी से और का उपयोग कर से बेहतर कर सकते हैं whileऔर for

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

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

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

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

इसका मतलब यह भी है कि आपको कभी लूप के लिए कभी लिखना नहीं होगा।

और पढ़ें >> here :


अनुकूलित दृष्टिकोण सरणी की लंबाई को कैश करना और सिंगल var कीवर्ड वाले सभी चर प्रारंभ करने वाले एकल वैर पैटर्न का उपयोग करना है।

var i, max, myStringArray = ["Hello","World"];
for (i = 0, max = myStringArray.length; i < max; i++) {
    alert(myStringArray[i]);
   //Do something
}

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

var i,myStringArray = ["item1","item2"];
for (i =  myStringArray.length; i--) {
    alert(myStringArray[i]);
}

या लूप के दौरान उपयोग करने के लिए बेहतर और क्लीनर:

var myStringArray = ["item1","item2"],i = myStringArray.length;
while(i--) {
   // do something with fruits[i]
}

लूप के for अनुक्रमिक का प्रयोग करें:

var myStringArray = ["Hello","World"];
var arrayLength = myStringArray.length;
for (var i = 0; i < arrayLength; i++) {
    alert(myStringArray[i]);
    //Do something
}

@zipcodeman के लिए उपयोग में बताता है for...in कथन में, लेकिन इसके लिए एरेज़िंग एरे के for-in टालना चाहिए, यह कथन वस्तु गुणों को गिनने के लिए है।

इसका उपयोग सरणी जैसी वस्तुओं के लिए नहीं किया जाना चाहिए क्योंकि:

  • पुनरावृत्ति के क्रम की गारंटी नहीं है, सरणी अनुक्रमणिका को संख्यात्मक क्रम में नहीं देखा जा सकता है।
  • विरासत गुण भी गिने गए हैं।

दूसरा बिंदु यह है कि यह आपको बहुत सारी समस्याएं दे सकता है, उदाहरण के लिए, यदि आप वहाँ एक विधि शामिल करने के लिए Array.prototype ऑब्जेक्ट का विस्तार करते हैं, तो उस संपत्ति को भी समझा जाएगा।

उदाहरण के लिए:

Array.prototype.foo = "foo!";
var array = ['a', 'b', 'c'];

for (var i in array) {
  alert(array[i]);
}

उपर्युक्त कोड सतर्क होगा, "ए", "बी", "सी" और "फू!"।

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

जैसा कि मैंने पहले कहा था, के लिए अंतर्निहित कथन वस्तु गुणों को गिनने के लिए है, उदाहरण के लिए:

var obj = {
  "a": 1,
  "b": 2,
  "c": 3
};

for (var prop in obj) {
  if (obj.hasOwnProperty(prop)) { 
  // or if (Object.prototype.hasOwnProperty.call(obj,prop)) for safety...
    alert("prop: " + prop + " value: " + obj[prop])
  }
}

उपर्युक्त उदाहरण में hasOwnProperty विधि आपको केवल अपनी गुणों की गणना करने की अनुमति देती है, यही वह गुण है, जो भौतिक रूप से वस्तु है, विरासत में कोई गुण नहीं है।

मैं आपको निम्नलिखित लेख पढ़ने की सलाह दूंगा:


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

https://jsperf.com/fastest-array-iterator

परिणाम:

पारंपरिक for()इटरेटर, अब तक की सबसे तेज़ विधि है, विशेष रूप से जब सरणी लंबाई कैश के साथ प्रयोग किया जाता है ।

var myStringArray = ["hello", "World"];
for(var i in myStringArray) {
  alert(myStringArray[i]);
}

Array.prototype.forEach()और Array.prototype.map()तरीकों धीमी अनुमानों, शायद का एक परिणाम के रूप में कर रहे हैं समारोह कॉल उपरि


कुछ जावास्क्रिप्ट में कार्यात्मक प्रोग्रामिंग तरीके में एक सरणी के माध्यम से लूपिंग के मामलों का उपयोग करें:

1. बस सरणी के माध्यम से लूप

const myArray = [{x:100}, {x:200}, {x:300}];

myArray.forEach((element, index, array) => {
    console.log(element.x); // 100, 200, 300
    console.log(index); // 0, 1, 2
    console.log(array); // same myArray object 3 times
});

नोट: Array.prototype.forEach () सख्ती से बोलने का एक कार्यात्मक तरीका नहीं है, क्योंकि फ़ंक्शन में ऐसा होता है क्योंकि इनपुट पैरामीटर को मान वापस नहीं करना चाहिए, जिसे इस प्रकार शुद्ध कार्य के रूप में नहीं माना जा सकता है।

2. जांचें कि सरणी में से कोई भी तत्व परीक्षण पास करता है या नहीं

const people = [
    {name: 'John', age: 23}, 
    {name: 'Andrew', age: 3}, 
    {name: 'Peter', age: 8}, 
    {name: 'Hanna', age: 14}, 
    {name: 'Adam', age: 37}];

const anyAdult = people.some(person => person.age >= 18);
console.log(anyAdult); // true

3. एक नई सरणी में परिवर्तन

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray= myArray.map(element => element.x);
console.log(newArray); // [100, 200, 300]

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

4. एक विशेष संपत्ति को जोड़ो, और इसकी औसत गणना करें

const myArray = [{x:100}, {x:200}, {x:300}];

const sum = myArray.map(element => element.x).reduce((a, b) => a + b, 0);
console.log(sum); // 600 = 0 + 100 + 200 + 300

const average = sum / myArray.length;
console.log(average); // 200

5. मूल के आधार पर एक नई सरणी बनाएं लेकिन इसे संशोधित किए बिना

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray= myArray.map(element => {
    return {
        ...element,
        x: element.x * 2
    };
});

console.log(myArray); // [100, 200, 300]
console.log(newArray); // [200, 400, 600]

6. प्रत्येक श्रेणी की संख्या गिनें

const people = [
    {name: 'John', group: 'A'}, 
    {name: 'Andrew', group: 'C'}, 
    {name: 'Peter', group: 'A'}, 
    {name: 'James', group: 'B'}, 
    {name: 'Hanna', group: 'A'}, 
    {name: 'Adam', group: 'B'}];

const groupInfo = people.reduce((groups, person) => {
    const {A = 0, B = 0, C = 0} = groups;
    if (person.group === 'A') {
        return {...groups, A: A + 1};
    } else if (person.group === 'B') {
        return {...groups, B: B + 1};
    } else {
        return {...groups, C: C + 1};
    }
}, {});

console.log(groupInfo); // {A: 3, C: 1, B: 2}

7. विशेष मानदंडों के आधार पर एक सरणी का सबसेट पुनर्प्राप्त करें

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray = myArray.filter(element => element.x > 250);
console.log(newArray); // [{x:300}] 

नोट: फ़िल्टर () विधि उन सभी तत्वों के साथ एक नई सरणी बनाता है जो प्रदान किए गए फ़ंक्शन द्वारा लागू परीक्षण पास करते हैं।

8. एक सरणी सॉर्ट करें

const people = [
  { name: "John", age: 21 },
  { name: "Peter", age: 31 },
  { name: "Andrew", age: 29 },
  { name: "Thomas", age: 25 }
];

let sortByAge = people.sort(function (p1, p2) {
  return p1.age - p2.age;
});

console.log(sortByAge);

9. एक सरणी में एक तत्व खोजें

const people = [ {name: "john", age:23},
                {name: "john", age:43},
                {name: "jim", age:101},
                {name: "bob", age:67} ];

const john = people.find(person => person.name === 'john');
console.log(john);

Array.prototype.find () विधि सरणी में पहले तत्व का मान देता है जो प्रदान किए गए परीक्षण फ़ंक्शन को संतुष्ट करता है।

संदर्भ


निश्चित रूप से यह अक्षम है और कई इसे तुच्छ मानते हैं, लेकिन यह उल्लिखित सबसे नज़दीकी में से एक है:

var myStringArray = ["Hello","World"];
myStringArray.forEach(function(f){
    // Do something
})

आप map उपयोग कर सकते हैं, जो एक कार्यात्मक प्रोग्रामिंग तकनीक है जो Python और Haskell जैसी अन्य भाषाओं में भी उपलब्ध है।

[1,2,3,4].map( function(item) {
     alert(item);
})

सामान्य वाक्यविन्यास है:

array.map(func)

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

array.map का वापसी मान एक और सरणी है, इसलिए आप इसे इस तरह उपयोग कर सकते हैं:

var x = [1,2,3,4].map( function(item) {return item * 10;});

और अब एक्स [10,20,30,40]

आपको फ़ंक्शन इनलाइन लिखना नहीं है। यह एक अलग समारोह हो सकता है।

var item_processor = function(item) {
      // Do something complicated to an item
}

new_list = my_list.map(item_processor);

जो कि इसके बराबर होगा:

 for (item in my_list) {item_processor(item);}

सिवाय आपको new_list नहीं मिलती है।


केवल अपने ऑब्जेक्ट गुणों को पुन: सक्रिय करने के लिए एक तरीका है, जिसमें प्रोटोटाइप के शामिल नहीं हैं:

let arr = [1,2,3,4,5];

for(let i=0, size=arr.length; i<size; i++){
    // do something
}

लेकिन यह अभी भी कस्टम परिभाषित गुणों पर फिर से शुरू होगा।

जावास्क्रिप्ट में किसी भी कस्टम प्रॉपर्टी को सरणी समेत किसी ऑब्जेक्ट को असाइन किया जा सकता है।

एक दोहराने में sparsed सरणी पर चाहता है, for (var i = 0; i < array.length; i++) if (i in array)या array.forEachके साथ es5shimकिया जाना चाहिए।


मैंने अभी तक यह बदलाव नहीं देखा है, जिसे मैं व्यक्तिगत रूप से सर्वश्रेष्ठ पसंद करता हूं:

एक सरणी दिया गया:

var someArray = ["some", "example", "array"];

आप लंबाई संपत्ति तक पहुंचने के बिना इसे लूप कर सकते हैं:

for (var i=0, item; item=someArray[i]; i++) {
  // item is "some", then "example", then "array"
  // i is the index of item in the array
  alert("someArray[" + i + "]: " + item);
}

यह जेएसफ़िल्ड यह दर्शाता है कि: http://jsfiddle.net/prvzk/

यह केवल उन सरणी के लिए काम करता है जो स्पैस नहीं हैं । मतलब है कि सरणी में प्रत्येक सूचकांक में वास्तव में एक मूल्य है। हालांकि, मैंने पाया कि व्यावहारिक रूप से मैं कभी भी जावास्क्रिप्ट में स्पैस सरणी का उपयोग नहीं करता ... ऐसे मामलों में एक वस्तु को मानचित्र / हैशटेबल के रूप में उपयोग करना बहुत आसान होता है। यदि आपके पास एक स्पैस सरणी है, और 0 से अधिक लूप करना चाहते हैं .. लंबाई -1, आपको इसके लिए आवश्यकता है (var i = 0; i <someArray.length; ++ i) निर्माण, लेकिन आपको अभी भी अंदर की आवश्यकता है यह जांचने के लिए लूप कि वर्तमान सूचकांक में तत्व वास्तव में परिभाषित किया गया है या नहीं।

साथ ही, जैसा कि सीएमएस नीचे एक टिप्पणी में उल्लेख करता है, आप केवल उन सरणीओं पर इसका उपयोग कर सकते हैं जिनमें कोई गलत मूल्य नहीं है। उदाहरण से तारों की सरणी काम करती है, लेकिन यदि आपके पास खाली तार हैं, या 0 या NaN, संख्याएं हैं, तो लूप समय-समय पर टूट जाएगा। फिर अभ्यास में यह शायद ही कभी मेरे लिए एक समस्या है, लेकिन यह ध्यान में रखना कुछ है, जो इसे इस्तेमाल करने से पहले इस बारे में सोचने के लिए एक लूप बनाता है ... यह कुछ लोगों के लिए इसे अयोग्य घोषित कर सकता है :)

मुझे इस लूप के बारे में क्या पसंद है:

  • लिखना बहुत छोटा है
  • लंबाई की संपत्ति तक पहुंचने की आवश्यकता नहीं है (अकेले कैश करें)
  • आपके द्वारा चुने गए नाम के तहत लूप बॉडी के भीतर एक्सेस करने के लिए आइटम स्वचालित रूप से परिभाषित किया जाता है।
  • सूचियों / ढेर जैसे सरणी का उपयोग करने के लिए array.push और array.splice के साथ बहुत स्वाभाविक रूप से संयोजन करता है

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

मेरे लिए, यह निर्माण जावा 5 सिंटैक्स को सबसे अधिक बारीकी से अनुकरण करता है जो मुझे पसंद है:

for (String item : someArray) {
}

... लूप के अंदर मौजूदा इंडेक्स के बारे में जानने के अतिरिक्त लाभ के साथ


ओपेरा, सफारी, फ़ायरफ़ॉक्स और क्रोम अब सभी कई सामान्य लूप को अनुकूलित करने के लिए उन्नत ऐरे विधियों का एक सेट साझा करते हैं।

आपको उन सभी की आवश्यकता नहीं हो सकती है, लेकिन वे बहुत उपयोगी हो सकते हैं, या यदि प्रत्येक ब्राउज़र ने उन्हें समर्थन दिया होगा।

मोज़िला लैब्स ने एल्गोरिदम प्रकाशित किए और वे दोनों WebKit उपयोग करते हैं, ताकि आप उन्हें स्वयं जोड़ सकें।

फिल्टर उन वस्तुओं की एक सरणी देता है जो कुछ शर्त या परीक्षण को पूरा करते हैं।

यदि प्रत्येक सरणी सदस्य परीक्षा उत्तीर्ण करता है तो प्रत्येक रिटर्न सही होता है।

अगर कोई परीक्षण पास करता है तो कुछ सच हो जाते हैं।

प्रत्येक प्रत्येक सरणी सदस्य पर एक फ़ंक्शन चलाता है और कुछ भी वापस नहीं करता है।

नक्शा प्रत्येक के लिए है, लेकिन यह प्रत्येक तत्व के लिए ऑपरेशन के परिणामों की एक सरणी देता है।

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

इसे तब तक अनदेखा करें जब तक आपको इसकी आवश्यकता न हो।

indexOf और lastIndex पहले या अंतिम तत्व की उचित स्थिति को ढूंढने के लिए जो वास्तव में इसके तर्क से मेल खाता है।

(function(){
    var p, ap= Array.prototype, p2={
        filter: function(fun, scope){
            var L= this.length, A= [], i= 0, val;
            if(typeof fun== 'function'){
                while(i< L){
                    if(i in this){
                        val= this[i];
                        if(fun.call(scope, val, i, this)){
                            A[A.length]= val;
                        }
                    }
                    ++i;
                }
            }
            return A;
        },
        every: function(fun, scope){
            var L= this.length, i= 0;
            if(typeof fun== 'function'){
                while(i<L){
                    if(i in this && !fun.call(scope, this[i], i, this))
                        return false;
                    ++i;
                }
                return true;
            }
            return null;
        },
        forEach: function(fun, scope){
            var L= this.length, i= 0;
            if(typeof fun== 'function'){
                while(i< L){
                    if(i in this){
                        fun.call(scope, this[i], i, this);
                    }
                    ++i;
                }
            }
            return this;
        },
        indexOf: function(what, i){
            i= i || 0;
            var L= this.length;
            while(i< L){
                if(this[i]=== what)
                    return i;
                ++i;
            }
            return -1;
        },
        lastIndexOf: function(what, i){
            var L= this.length;
            i= i || L-1;
            if(isNaN(i) || i>= L)
                i= L-1;
            else
                if(i< 0) i += L;
            while(i> -1){
                if(this[i]=== what)
                    return i;
                --i;
            }
            return -1;
        },
        map: function(fun, scope){
            var L= this.length, A= Array(this.length), i= 0, val;
            if(typeof fun== 'function'){
                while(i< L){
                    if(i in this){
                        A[i]= fun.call(scope, this[i], i, this);
                    }
                    ++i;
                }
                return A;
            }
        },
        some: function(fun, scope){
            var i= 0, L= this.length;
            if(typeof fun== 'function'){
                while(i<L){
                    if(i in this && fun.call(scope, this[i], i, this))
                        return true;
                    ++i;
                }
                return false;
            }
        }
    }
    for(p in p2){
        if(!ap[p])
            ap[p]= p2[p];
    }
    return true;
})();

यदि आप एक तेज लूप लिखने के लिए एक terse तरीका चाहते हैं और आप विपरीत में पुनरावृत्त कर सकते हैं:

for (var i=myArray.length;i--;){
  var item=myArray[i];
}

इसका लंबाई लंबाई को कैश करने का लाभ है (इसी प्रकार के for (var i=0, len=myArray.length; i<len; ++i) और इसके विपरीत for (var i=0; i<myArray.length; ++i) ) टाइप करने के लिए कम वर्ण होने के दौरान।

यहां तक ​​कि कुछ बार भी होते हैं जब आपको विपरीत में पुनरावृत्ति करना चाहिए, जैसे कि जब एक लाइव नोडलिस्ट पर पुनरावृत्ति होती है जहां आप पुनरावृत्ति के दौरान डीओएम से वस्तुओं को हटाने की योजना बनाते हैं।


ऐसा करने का एक तरीका है जहां आपके लूप में बहुत कम अंतर्निहित दायरा है और अतिरिक्त चर से दूर रहें।

var i = 0,
     item;

// note this is weak to sparse arrays or falsey values
for ( ; item = myStringArray[i++] ; ){ 
    item; // This is the string at the index.
}

या यदि आप वास्तव में आईडी प्राप्त करना चाहते हैं और लूप के for वास्तव में शास्त्रीय for :

var i = 0,
    len = myStringArray.length; // cache the length

for ( ; i < len ; i++ ){
    myStringArray[i]; // Don't use this if you plan on changing the length of the array
}

आधुनिक ब्राउज़र सभी एरे प्रोटोटाइप पर forEach , map , reduce , filter और कई अन्य विधियों के लिए इटरेटर विधियों का समर्थन करते हैं।


var x = [4, 5, 6];
for (i = 0, j = x[i]; i < x.length; j = x[++i]) {
    console.log(i,j);
}

बहुत साफ ...







for-loop