JavaScript: .forEach () और .map () के बीच अंतर

Question

मुझे पता है कि इस तरह के बहुत सारे विषय थे। और मैं मूल बातें जानता हूं: .forEach()मूल सरणी .map()पर और नए पर काम करता है।

मेरे मामले में:

function practice (i){
    return i+1;
};

var a = [ -1, 0, 1, 2, 3, 4, 5 ];
var b = [ 0 ];
var c = [ 0 ];
console.log(a);
b = a.forEach(practice);
console.log("=====");
console.log(a);
console.log(b);
c = a.map(practice);
console.log("=====");
console.log(a);
console.log(c);

और यह आउटपुट है:

[ -1, 0, 1, 2, 3, 4, 5 ]
=====
[ -1, 0, 1, 2, 3, 4, 5 ]
undefined
=====
[ -1, 0, 1, 2, 3, 4, 5 ]
[ 0, 1, 2, 3, 4, 5, 6 ]

मुझे समझ नहीं आ रहा है कि के practiceपरिवर्तन मानों का उपयोग क्यों किया bजाए undefined।
मुझे खेद है कि अगर यह मूर्खतापूर्ण सवाल है, लेकिन मैं इस भाषा में काफी नया हूं और मुझे अब तक मिले जवाबों ने मुझे संतुष्ट नहीं किया है।

Comments

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

— user4642212

जावास्क्रिप्ट फॉरएच विधि

— user4642212

@Xufox - मैंने नया बनाने से पहले इस विषय को लाल कर दिया था, लेकिन उत्तर ने मुझे संतुष्ट नहीं किया।

— DzikiChrzan

बस यह मत कहो कि यह आपको संतुष्ट नहीं करता है। यह आपके प्रश्न का उत्तर कैसे नहीं देता (क्या आपने सभी उत्तर पढ़े हैं?)। आपका विशिष्ट प्रश्न क्या है जो प्रस्तावित डुप्लिकेट लक्ष्य द्वारा कवर नहीं किया गया है?

— user4642212

@Xufox यह प्रश्न स्व-कार्यान्वित कार्यों से संबंधित है, और वास्तव में मानकीकृत ES5 कार्यों के बारे में नहीं है।

— प्रहार करें

Answer 1

वे एक नहीं हैं और एक ही हैं। मुझे अंतर स्पष्ट करने दें।

forEach: यह एक सूची पर प्रसारित होता है और प्रत्येक सूची सदस्य को साइड इफेक्ट के साथ कुछ ऑपरेशन लागू करता है (उदाहरण: डेटाबेस के लिए प्रत्येक सूची आइटम को सहेजना)

map: यह सूची पर आधारित है, उस सूची के प्रत्येक सदस्य को रूपांतरित करता है, और रूपांतरित सदस्यों के साथ उसी आकार की एक और सूची लौटाता है (उदाहरण: स्ट्रैप्स की सूची को अपरकेस में बदलना)

संदर्भ

Array.prototype.forEach () - जावास्क्रिप्ट | MDN

Array.prototype.map () - जावास्क्रिप्ट | MDN

Comments

और जैसे Xufox ने कहा -। कोई भी चीज वापस नहीं आती, यही बात है। सहायता के लिए धन्यवाद! मैं 10 मिनट में इस उत्तर को चिह्नित करूंगा।

— DzikiChrzan

नक्शा वापसी सूची और आगे नहीं। ठीक है

— आषाढ़ नसीम

Answer 2

• Array.forEach "सरणी तत्व के अनुसार एक बार दिए गए फ़ंक्शन को निष्पादित करता है।"

• Array.map "इस सरणी में प्रत्येक तत्व पर दिए गए फ़ंक्शन को कॉल करने के परिणामों के साथ एक नया सरणी बनाता है।"

तो, forEachवास्तव में कुछ भी वापस नहीं करता है। यह केवल प्रत्येक ऐरे एलीमेंट के लिए फ़ंक्शन को कॉल करता है और फिर यह किया जाता है। तो आप जो भी उस फ़ंक्शन को वापस करते हैं उसे बस त्याग दिया जाता है।

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

यह भी मतलब है आपको लगता है कि हो सकता है का उपयोग mapभी आप उपयोग कर रहे हैं forEachलेकिन आप अभी भी ऐसा नहीं करना चाहिए कि ताकि आप किसी भी उद्देश्य के बिना वापसी मान एकत्र नहीं है। यदि आपको उनकी आवश्यकता नहीं है, तो उन्हें इकट्ठा न करना बस अधिक कुशल है।

Comments

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

— काउबर्ट

@ USCbert सिर्फ इसलिए कि कुछ कचरा तुरंत एकत्र किया जाता है, इसका मतलब यह नहीं है कि आप उन आवंटन से नहीं टकरा रहे हैं जो आवश्यक थे। तो forEachहोगा धारणात्मक अभी भी अधिक कुशल और बेहतर कार्य जहां कलेक्ट परिणाम की जरूरत नहीं है के लिए अनुकूल हो। और मुझे आपके बारे में पता नहीं है लेकिन 2015 में, मैं IE8 के लिए अब और विकसित नहीं कर रहा था (जो btw भी समर्थन नहीं करता था map); और IE9 + समर्थन करते हैं forEach। और वास्तव में मेरे जवाब के एक महीने बाद, Microsoft ने उन ब्राउज़रों के लिए समर्थन समाप्त कर दिया।

— प्रहार

क्या तत्व और मानचित्र दोनों एक ही क्रम में तत्वों को संसाधित करने की गारंटी है?

— क्वेंटिन 2

@ Quentin2 हाँ, भी, दोनों फ़ंक्शन सिंक्रोनस हैं, इसलिए mapऔर forEachकॉल केवल तभी वापस आएगी जब पूरे सरणी को लूप किया गया हो और प्रत्येक के लिए कॉलबैक कहा गया हो।

— प्रहार

Answer 3

+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| | foreach | नक्शा |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| कार्यशीलता | प्रत्येक पर दिया गया ऑपरेशन करता है | पर दिया "परिवर्तन" करता है |
| | सरणी का तत्व | प्रत्येक तत्व की "प्रति" |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| वापसी मूल्य | अपरिभाषित रिटर्न | लौट आए नए सरणी के साथ tranformed |
| | | मूल सरणी छोड़ने वाले तत्व |
| | | अपरिवर्तित |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| प्रेफ़रेबल | गैर-परिवर्तनकारी प्रदर्शन करना जैसे | आउटपुट प्राप्त करने वाली सरणी |
| उपयोग परिदृश्य | प्रत्येक तत्व पर प्रसंस्करण। | प्रत्येक तत्व पर कुछ प्रसंस्करण |
| और उदाहरण | | सरणी का। |
| | उदाहरण के लिए, सभी तत्वों को सहेजना | |
| | डेटाबेस | उदाहरण के लिए, सरणी प्राप्त करना |
| | | प्रत्येक तार की लंबाई |
| | | सरणी |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +

Comments

कृपया अपनी पोस्ट संपादित करें और चित्रों के बजाय वास्तविक पाठ दिखाएं। अन्य लोग आपकी छवि से कॉपी या पेस्ट नहीं कर सकते हैं, या अपनी छवि के भीतर खोज कर सकते हैं, या छवि में पाठ सामग्री को बेहतर बनाने में मदद कर सकते हैं। विवरण के लिए यहां देखें। धन्यवाद।

— पैंग

यह आपको ASCII कला तालिकाओं को आकर्षित करने में मदद कर सकता है: webapps.stackexchange.com/q/6700/126269

— Pang

Answer 4

मुख्य अंतर जिसे आपको जानना चाहिए वह .map()एक नया सरणी देता है जबकि .forEach()नहीं। यही कारण है कि आप आउटपुट में यह अंतर देखते हैं। .forEach()सरणी में हर मूल्य पर काम करता है।

पढ़ो:

• Array.prototype.forEach()- जावास्क्रिप्ट | MDN
• Array.prototype.map()- जावास्क्रिप्ट | MDN

तुम भी बाहर की जाँच करना चाहते हो सकता है: - Array.prototype.every()- जावास्क्रिप्ट | MDN

Answer 5

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

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

उम्मीद है की यह मदद करेगा।

Answer 6

अंतर यह है कि वे क्या वापस आते हैं। निष्पादन के बाद:

arr.map()

संसाधित फ़ंक्शन के परिणामस्वरूप तत्वों की एक सरणी देता है; जबकि:

arr.forEach()

अपरिभाषित करता है।

Answer 7

प्रदर्शन विश्लेषण छोरों के नक्शे की तुलना में तेजी से प्रदर्शन करता है या सरणी में तत्वों की संख्या में वृद्धि के रूप में आगे निकल जाता है।

let array = [];
for (var i = 0; i < 20000000; i++) {
  array.push(i)
}

console.time('map');
array.map(num => {
  return num * 4;
});
console.timeEnd('map');


console.time('forEach');
array.forEach((num, index) => {
  return array[index] = num * 4;
});
console.timeEnd('forEach');

console.time('for');
for (i = 0; i < array.length; i++) {
  array[i] = array[i] * 2;

}
console.timeEnd('for');

Comments

यहाँ मेरे कंप्यूटर पर परिणाम है:map: 1642ms forEach: 885ms for: 748ms

— Flavio Vilante

Answer 8

फ़ॉरच और मानचित्र के बीच अंतर:

मानचित्र () : यदि आप मानचित्र का उपयोग करते हैं तो मानचित्र मुख्य सरणी को पुनरावृत्त करके नया सरणी लौटा सकता है।

Foreach () : यदि आप Foreach का उपयोग करते हैं तो यह मुख्य सरणी को प्रसारित करने वाले प्रत्येक के लिए कुछ भी नहीं लौटा सकता है।

useFul लिंक : इस लिंक का उपयोग अंतर को समझने के लिए करें

https://codeburst.io/javascript-map-vs-foreach-f38111822c0f

Answer 9

इंगित करने के लिए एक बात यह है कि नक्शे के नहीं होने पर फ़ॉरन अनइंस्टॉल किए गए मानों को छोड़ देता है।

var arr = [1, , 3];

arr.forEach(function(element) {
    console.log(element);
});
//Expected output: 1 3

console.log(arr.map(element => element));
//Expected output: [1, undefined, 3];

Answer 10

फॉरआच () और मानचित्र () के बीच अंतर

forEach () तत्वों के माध्यम से सिर्फ लूप। यह रिटर्न वैल्यू को फेंक देता है और हमेशा अपरिभाषित रहता है। इस पद्धति का परिणाम हमें आउटपुट नहीं देता है।

तत्वों के माध्यम से नक्शा () लूप मेमोरी को आवंटित करता है और मुख्य एरे को पुनरावृत्त करके मूल्यों को स्टोर करता है

उदाहरण:

   var numbers = [2,3,5,7];

   var forEachNum = numbers.forEach(function(number){
      return number
   })
   console.log(forEachNum)
   //output undefined

   var mapNum = numbers.map(function(number){
      return number
   })
   console.log(mapNum)
   //output [2,3,5,7]

मानचित्र () forEach की तुलना में अधिक तेज़ है ()

Answer 11

मानचित्र निहित है जबकि forEach नहीं करता है।

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

Answer 12

forach () :

वापसी मूल्य: अपरिभाषित

originalArray: विधि कॉल के बाद संशोधित

नक्शा () :

वापसी मूल्य: नए ऐरे को कॉलिंग एरे में हर तत्व पर दिए गए फ़ंक्शन को कॉल करने के परिणामों के साथ आबादी है

originalArray: विधि कॉल के बाद संशोधित नहीं किया गया