Frontend Academy · पाठ

Array Methods: map, filter, reduce, find

manual loops के बजाय higher-order methods से arrays को बदलें, फ़िल्टर करें और aggregate करें। अभिव्यक्तिपूर्ण data pipelines बनाने के लिए इन्हें chain करें।

पाठ 1, कुल 4 में से13 चरण

Array Methods: map, filter, reduce, find, CoddyKit पर Frontend Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Frontend Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

Array विधियाँ क्यों?

इम्पेरेटिव for लूप काम करते हैं, लेकिन उद्देश्य को छिपा देते हैं। Array की उच्च-क्रम विधियाँ यह घोषित करती हैं कि आप क्या चाहते हैं, न कि पुनरावृत्ति कैसे करनी है। इनसे अधिक साफ़, परीक्षण योग्य और संयोज्य कोड मिलता है, जो गद्य जैसा पढ़ा जाता है।

Array.map() — हर तत्व का रूपांतरण

map() एक नया ऐरे लौटाता है, जिसमें हर तत्व को कॉलबैक द्वारा रूपांतरित किया गया होता है। मूल ऐरे में बदलाव नहीं किया जाता। जब भी एक ऐरे को दूसरे ऐरे में बदलना हो, इसका उपयोग कीजिए।

const names = ['alice', 'bob', 'carol'];
const upper = names.map(name => name.toUpperCase());
// ['ALICE', 'BOB', 'CAROL']

const prices = [10, 20, 30];
const withTax = prices.map(p => p * 1.2);
// [12, 24, 36]

Array.filter() — मेल खाते तत्व चुनना

filter() एक नया ऐरे लौटाता है, जिसमें केवल वे तत्व होते हैं जिनके लिए कॉलबैक सत्य-सदृश मान लौटाता है। कॉलबैक एक शर्त-जाँच फ़ंक्शन होता है।

const users = [
  { name: 'Alice', age: 22 },
  { name: 'Bob',   age: 17 },
  { name: 'Carol', age: 30 },
];
const adults = users.filter(u => u.age >= 18);
// [{ name: 'Alice', age: 22 }, { name: 'Carol', age: 30 }]

Array.reduce() — किसी मान का संचय

reduce(callback, initialValue) सभी तत्वों को एक ही मान में संचित करता है। कॉलबैक को संचायक और वर्तमान तत्व प्राप्त होते हैं। प्रारंभिक मान संचायक का शुरुआती मान होता है।

const prices = [10, 20, 30, 40];
const total = prices.reduce((sum, price) => sum + price, 0);
// 100

const tallied = ['a', 'b', 'a', 'c', 'b', 'a'].reduce((acc, letter) => {
  acc[letter] = (acc[letter] || 0) + 1;
  return acc;
}, {});
// { a: 3, b: 2, c: 1 }

Array.find() — पहला मिलान

find() शर्त से मेल खाने वाला पहला तत्व लौटाता है, या कोई मेल न मिलने पर undefined लौटाता है। ID या गुणधर्म के मान से किसी आइटम को खोजने के लिए इसका उपयोग कीजिए।

const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
const bob = users.find(u => u.id === 2);
// { id: 2, name: 'Bob' }

const missing = users.find(u => u.id === 99);
// undefined

Array.findIndex()

findIndex(), find() की तरह काम करता है, लेकिन मेल खाने वाले तत्व का इंडेक्स लौटाता है; तत्व न मिलने पर -1 लौटाता है। ऐरे में किसी तत्व को अपडेट करने की जगह खोजने के लिए यह उपयोगी है।

const idx = users.findIndex(u => u.id === 2);
// 1

Array.some() और Array.every()

some() true लौटाता है, यदि कम-से-कम एक तत्व परीक्षण पास कर ले। every() true तभी लौटाता है, जब सभी तत्व परीक्षण पास करें। दोनों पहले निर्णायक परिणाम पर आगे की जाँच रोक देते हैं।

const hasAdult = users.some(u => u.age >= 18);  // true if any adult
const allAdults = users.every(u => u.age >= 18); // true only if all adults

Array.flatMap() — मैप करना फिर समतल करना

flatMap() हर तत्व को मैप करने के बाद परिणाम को एक स्तर तक समतल करता है। यह .map(...).flat() के बराबर है, लेकिन अधिक कुशल है।

const sentences = ['Hello world', 'Foo bar'];
const words = sentences.flatMap(s => s.split(' '));
// ['Hello', 'world', 'Foo', 'bar']

Array विधियों की श्रृंखला

विधियाँ नए ऐरे लौटाती हैं, इसलिए आप उन्हें श्रृंखला में जोड़ सकते हैं। श्रृंखलाओं को बाएँ से दाएँ पढ़िए: पहले filter, फिर रूपांतरण, और अंत में समेकन।

const result = products
  .filter(p => p.inStock)
  .map(p => ({ ...p, price: p.price * 0.9 })) // 10% discount
  .sort((a, b) => a.price - b.price)
  .slice(0, 5); // top 5 cheapest in-stock products

Array.at() और Array.includes()

at(-1) अंतिम तत्व प्राप्त करता है। includes(value) जाँचता है कि कोई मान मौजूद है या नहीं। यह arr[arr.length - 1] और arr.indexOf(v) !== -1 से कहीं अधिक साफ़ है।

const arr = [1, 2, 3, 4, 5];
arr.at(-1);        // 5
arr.at(-2);        // 4
arr.includes(3);   // true
arr.includes(99);  // false

अपरिवर्तनीयता: बदलाव मत कीजिए

map, filter और reduce नए ऐरे लौटाते हैं। push, pop और splice मूल ऐरे में बदलाव करते हैं। React स्थिति में, स्थिति को सीधे बदलने के बजाय हमेशा नए ऐरे (स्प्रेड या map से) बनाइए।

// Bad in React:
state.items.push(newItem); // mutates original

// Good:
const newItems = [...state.items, newItem]; // new array

त्वरित जाँच

कौन-सी ऐरे विधि उन तत्वों का नया ऐरे लौटाती है, जिनके लिए कॉलबैक true लौटाता है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन: Array विधियाँ

map() हर तत्व को रूपांतरित करता है। filter() मेल खाते तत्व चुनता है। reduce() तत्वों को एक ही मान में संचित करता है। find() पहला मिलान लौटाता है। some()/every() सदस्यता की जाँच करते हैं। इन विधियों की श्रृंखलाएँ नेस्टेड लूप की जगह पढ़ने योग्य, घोषणात्मक डेटा-प्रवाह श्रृंखलाएँ देती हैं।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 41
पाठ: 163

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “Array Methods: map, filter, reduce, find” पाठ निःशुल्क है?

हाँ—“Array Methods: map, filter, reduce, find” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Frontend Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“Array Methods: map, filter, reduce, find” में मैं क्या सीखूँगा?

manual loops के बजाय higher-order methods से arrays को बदलें, फ़िल्टर करें और aggregate करें। अभिव्यक्तिपूर्ण data pipelines बनाने के लिए इन्हें chain करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Frontend Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Frontend Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Frontend Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।

“Array Methods: map, filter, reduce, find” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Frontend Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Frontend Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

Array Methods: map, filter, reduce, find
Object Destructuring और Spread
Template Literals और Optional Chaining
Modules: import और export

← Frontend Academy पर वापस जाएँ