jQuery का नक्शा बनाम प्रत्येक

Question

JQuery में, mapऔर eachफ़ंक्शन समान कार्य करते हैं। क्या दोनों के बीच कोई व्यावहारिक मतभेद हैं? आप दूसरे के बजाय एक का उपयोग करना कब चुनेंगे?

Comments

इन्हें भी देखें: stackoverflow.com/questions/3612320/…

— ryenus

Answer 1

eachविधि अपरिवर्तनीय इटरेटर है, जहां के रूप में करने के लिए है mapविधि पुनरावर्तक के रूप में इस्तेमाल किया जा सकता है, लेकिन वास्तव में आपूर्ति की सरणी में हेरफेर और एक नई सरणी वापस जाने के लिए के लिए है।

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

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

var items = [1,2,3,4];

$.each(items, function() {
  alert('this is ' + this);
});

var newItems = $.map(items, function(i) {
  return i + 1;
});
// newItems is [2,3,4,5]

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

var items = [0,1,2,3,4,5,6,7,8,9];

var itemsLessThanEqualFive = $.map(items, function(i) {
  // removes all items > 5
  if (i > 5) 
    return null;
  return i;
});
// itemsLessThanEqualFive = [0,1,2,3,4,5]

आप यह भी ध्यान रखेंगे कि फ़ंक्शन thisमें मैप नहीं किया गया mapहै। आपको कॉलबैक में पहले पैरामीटर की आपूर्ति करनी होगी (जैसे हमने iऊपर इस्तेमाल किया है)। विडंबना यह है कि प्रत्येक विधि में उपयोग किए जाने वाले कॉलबैक तर्क मैप फ़ंक्शन में कॉलबैक तर्कों के विपरीत हैं, इसलिए सावधान रहें।

map(arr, function(elem, index) {});
// versus 
each(arr, function(index, elem) {});

Comments

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

— अरुल

@ देखें, प्रत्येक फ़ंक्शन के लिए मेरा लिंक पढ़ें, दूसरा पैराग्राफ jQuery.each फ़ंक्शन $ () (प्रत्येक) () के समान नहीं है।

— बेन्देवी

इसके अलावा नक्शा () फ्लैटों ने सरणियाँ

— दीं

$ .Each का उपयोग क्यों करें?

— डेव वान डेन आईंडी

@DaveVandenEynde यदि आप लूप के उपयोग के बीच में ब्रेक लगाना चाहते हैंreturn false;

— Vigneshwaran

Answer 2

1: कॉलबैक फ़ंक्शंस के तर्क उलट हैं।

.each()'s', $.each()'s, और .map()' कॉलबैक 'फंक्शन' 'इंडेक्स को पहले ले जाता है, और फिर एलिमेंट

function (index, element) 

$.map()कॉलबैक में एक ही तर्क हैं, लेकिन उलटा

function (element, index)

2: .each(), $.each(), और .map()साथ में कुछ खास करनाthis

each()फ़ंक्शन को इस तरह से कॉल करता thisहै जो वर्तमान तत्व को इंगित करता है। ज्यादातर मामलों में, आपको कॉलबैक फ़ंक्शन में दो तर्कों की भी आवश्यकता नहीं है।

function shout() { alert(this + '!') }

result = $.each(['lions', 'tigers', 'bears'], shout)

// result == ['lions', 'tigers', 'bears']

के लिए चर वैश्विक खिड़की वस्तु को दर्शाता है।$.map()this

3: map()कॉलबैक के रिटर्न वैल्यू के साथ कुछ खास करता है

map()प्रत्येक तत्व पर फ़ंक्शन को कॉल करता है, और परिणाम को एक नए सरणी में संग्रहीत करता है, जिसे वह वापस करता है। आपको कॉलबैक फ़ंक्शन में आमतौर पर केवल पहले तर्क का उपयोग करने की आवश्यकता होती है।

function shout(el) { return el + '!' }

result = $.map(['lions', 'tigers', 'bears'], shout)

// result == ['lions!', 'tigers!', 'bears!']

Comments

function shout() { alert(this + '!') } result = $.each(['lions', 'tigers', 'bears'], shout)एक गलत परिणाम का उत्पादन यह आपके जवाब का खंडन करता है !! jsfiddle.net/9zy2pLev

— हेमंत

@ हेमंत ने क्रोम में सिर्फ फिडेल का परीक्षण किया और यह ठीक काम करने लगता है। तीन सतर्क संवाद हैं ('शेर!', 'बाघ!', 'भालू!') और अंत मेंresult === ['lions', 'tigers', 'bears']

— पैट्रिक मैक्लेनी

Answer 3

eachएक सरणी से अधिक समारोह दोहराता, प्रति तत्व एक बार आपूर्ति समारोह आह्वान करने और स्थापित करने के thisसक्रिय तत्व है। यह:

function countdown() {
    alert(this + "..");
}

$([5, 4, 3, 2, 1]).each(countdown);

सचेत करेगा 5..तो 4..उसके बाद 3..तो 2..फिर1..

दूसरी ओर मानचित्र एक सरणी लेता है, और फ़ंक्शन द्वारा परिवर्तित प्रत्येक तत्व के साथ एक नया सरणी देता है। यह:

function squared() {
    return this * this;
}

var s = $([5, 4, 3, 2, 1]).map(squared);

परिणाम में होगा [25, 16, 9, 4, 1]।

Answer 4

मैंने इसे इसके द्वारा समझा :

function fun1() {
    return this + 1;
}
function fun2(el) {
    return el + 1;
}

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

var newitem1 = $.each(item, fun1);
var newitem2 = $.map(item, fun2);

console.log(newitem1); // [5, 4, 3, 2, 1] 
console.log(newitem2); // [6, 5, 4, 3, 2] 

इसलिए, " प्रत्येक " फ़ंक्शन मूल सरणी देता है जबकि " मैप " फ़ंक्शन एक नया सरणी देता है

Answer 5

var intArray = [1, 2, 3, 4, 5];
//lets use each function
$.each(intArray, function(index, element) {
  if (element === 3) {
    return false;
  }
  console.log(element); // prints only 1,2. Breaks the loop as soon as it encountered number 3
});

//lets use map function
$.map(intArray, function(element, index) {
  if (element === 3) {
    return false;
  }
  console.log(element); // prints only 1,2,4,5. skip the number 3.
});

Answer 6

जब आप सरणियों पर काम कर रहे हों तो Jquery.map अधिक समझ में आता है क्योंकि यह सरणियों के साथ बहुत अच्छा प्रदर्शन करता है।

चयनकर्ता वस्तुओं के माध्यम से पुनरावृत्ति करते समय Jquery.each का सबसे अच्छा उपयोग किया जाता है। जिसका सबूत है कि मानचित्र फ़ंक्शन एक चयनकर्ता का उपयोग नहीं करता है।

$(selector).each(...)

$.map(arr....)

जैसा कि आप देख सकते हैं, मानचित्र का चयनकर्ताओं के साथ उपयोग करने का इरादा नहीं है।

Comments

दुर्भाग्य से प्रत्येक फ़ंक्शन का नाम दिया गया ... पहली बार नहीं, और आखिरी नहीं जब मैं उस पर फ़िदा हो जाऊंगा जिस पर कोई व्यक्ति पूछ रहा है

— जेरेमी बी।

मानचित्र और प्रत्येक का चयनकर्ता-संस्करण और उपयोग-संस्करण है। $ .map और $ .each बनाम $ ("")। नक्शा और $ ("")। प्रत्येक।

— मगंर