Array methods: map, filter, reduce, find

असली प्रोजेक्ट्स में सबसे ज़्यादा इस्तेमाल होने वाली चार array मेथड्स से डेटा को ट्रांसफॉर्म, फ़िल्टर और एकत्रित करना सीखें।

10 मिनट · 3 प्रश्न

किसी असली प्रोजेक्ट में आपका ज़्यादातर समय डेटा को ट्रांसफॉर्म करने में जाता है: दिखाने के लिए प्रोडक्ट्स की एक सूची, सॉर्ट करने के लिए API के नतीजे, कुल जोड़ने के लिए एक कार्ट। map, filter, reduce और find मेथड्स आपके ज़्यादातर for लूप्स की जगह छोटा और ज़्यादा अभिव्यंजक कोड ले लेती हैं। ये कभी भी मूल array को नहीं बदलतीं: ये एक नया नतीजा लौटाती हैं, जो बग्स की एक पूरी श्रेणी को रोक देता है।

const products = [
  { name: "keyboard", price: 49, inStock: true },
  { name: "mouse", price: 25, inStock: false },
  { name: "screen", price: 199, inStock: true }
];

const names = products.map((product) => product.name);
console.log(names); // ["keyboard", "mouse", "screen"]

filter केवल उन्हीं एलिमेंट्स को रखता है जो एक टेस्ट पास करते हैं और एक नया array लौटाता है, जो संभवतः खाली भी हो सकता है। find पहले मैच करने वाले एलिमेंट पर रुक जाता है और खुद वह एलिमेंट लौटाता है, या अगर कुछ भी मैच न करे तो undefined। एक मानसिक अभ्यास: स्टॉक में मौजूद सभी प्रोडक्ट्स पाने के लिए आप किसे चुनेंगे? और "mouse" नाम वाला वह एक प्रोडक्ट पाने के लिए?

const available = products.filter((p) => p.inStock);
console.log(available.length); // 2

const mouse = products.find((p) => p.name === "mouse");
console.log(mouse.price); // 25

reduce सबसे शक्तिशाली है: यह एक array को एक अकेले मान (एक संख्या, एक ऑब्जेक्ट, एक स्ट्रिंग) में समेट देता है। यह एक ऐसा फ़ंक्शन लेता है जिसमें एक accumulator और मौजूदा एलिमेंट होता है, साथ में एक प्रारंभिक मान भी। एक क्लासिक उपयोग: कार्ट का कुल निकालना।

const cart = [
  { label: "T-shirt", quantity: 2, unitPrice: 15 },
  { label: "Cap", quantity: 1, unitPrice: 12 }
];

const total = cart.reduce(
  (sum, item) => sum + item.quantity * item.unitPrice,
  0
);
console.log(total); // 42

सही मेथड चुनने के लिए, खुद से एक सवाल पूछें: नतीजे का आकार कैसा होना चाहिए? मूल जितने ही एलिमेंट पर ट्रांसफॉर्म किए हुए: map। एक उपसमूह: filter। एक अकेला एलिमेंट: find। एक अकेला परिकलित मान: reduce। यह आदत आपको इंटरव्यू और प्रोजेक्ट्स, दोनों में कीमती समय बचाएगी।

ज्ञान जांच

सुनिश्चित करें कि आपको इस पाठ के मुख्य बिंदु याद हैं।

1. कौन सी मेथड हमेशा मूल array के बराबर लंबाई का array लौटाती है?
   • filter
   • map
   • reduce
   • find
2. अगर कोई भी एलिमेंट शर्त को पूरा न करे तो find क्या लौटाता है?
   • null
   • undefined
   • एक खाली array
   • एक एरर फेंकी जाती है
3. cart.reduce((sum, item) => sum + item.unitPrice, 0) में, अंतिम 0 किसलिए है?
   • यह sum accumulator का प्रारंभिक मान है
   • यह ट्रैवर्सल का शुरुआती इंडेक्स है
   • यह वह मान है जो array के अमान्य होने पर लौटाया जाता है