पाठ 16, कुल 30 में

JavaScript ऐरे मेथड्स

7 मिनट पढ़ें · मुफ़्त · बिना लॉगिन

English हिंदी

JavaScript ऐरे JavaScript तारीखें

ऐरे में चीज़ों की सूची होती है — छात्र, कीमतें, नंबर, क्रिकेट स्कोर। लेकिन सूची का चुपचाप पड़े रहना ज़्यादा काम का नहीं है। आप आमतौर पर हर item के साथ कुछ करना चाहते हैं: हर कीमत को दोगुना करना, सिर्फ पास हुए नंबर रखना, हर नाम छापना, एक छात्र को ढूँढना, या स्कोर को क्रम में लगाना। JavaScript आपको ठीक इसके लिए पाँच मेथड देता है: map, filter, forEach, find और sort।

Diagram — देखें, यह सब कैसे जुड़ता है

चाय की दुकान की तरह सोचें। मालिक के पास कीमतों की सूची है: 10, 15, 20, 25। map मेनू को नई कीमतों के साथ दोबारा लिखने जैसा है। filter ₹20 से कम वाली चाय ही चुनने जैसा है। forEach सूची की हर चीज़ को पुकारने जैसा है। find "कुल्हड़ चाय कहाँ है?" पूछने जैसा है। sort मेनू को सबसे सस्ते से सबसे महँगे क्रम में लगाने जैसा है। पाँच छोटे औज़ार — और आप जो भी JavaScript प्रोग्राम लिखेंगे, उनमें से लगभग हर एक में कम से कम एक का इस्तेमाल होगा।

इसे ऐसे याद रखें: map बदलता है, filter रखता है, forEach देखता है, find खोजता है, sort क्रम लगाता है। यह लाइन एक बार कह लीजिए और आप इन्हें कभी आपस में नहीं मिलाएँगे।

map — हर item बदलें

map ऐरे के हर item पर एक फ़ंक्शन चलाता है और नतीजों के साथ एक नया ऐरे लौटाता है। मूल ऐरे नहीं बदलता। यही पूरा विचार है: आप एक सूची अंदर लेते हैं, आपको नई सूची बाहर मिलती है।

let prices = [10, 15, 20, 25];
let doubled = prices.map(function(price) {
  return price * 2;
});
// doubled है [20, 30, 40, 50]
// prices अब भी है [10, 15, 20, 25]

इसे एक वाक्य की तरह पढ़ें: "हर कीमत के लिए, कीमत को दो से गुणा करके लौटाओ, और जवाबों को नए ऐरे में इकट्ठा करो।" जो फ़ंक्शन आप map को देते हैं, उसे हर item एक-एक करके मिलता है, और वह जो कुछ लौटाता है, वह नए ऐरे का item बन जाता है।

filter — सिर्फ वही रखें जो मेल खाए

filter भी नया ऐरे लौटाता है, लेकिन यह सिर्फ उन items को रखता है जो जाँच में पास होते हैं। जाँच एक फ़ंक्शन है जो true या false लौटाता है। True का मतलब है रखो, false का मतलब है हटाओ।

let marks = [45, 82, 30, 91, 67];
let passed = marks.filter(function(mark) {
  return mark >= 40;
});
// passed है [45, 82, 91, 67]

30 जाँच में fail हो जाता है, इसलिए वह बाहर रह जाता है। मूल ऐरे को कुछ नहीं होता। filter वह मेथड है जिसे आप तब पकड़ते हैं जब भी आप सुनें "सिर्फ वे जो..." — सिर्फ पास हुए छात्र, सिर्फ ₹20 से कम वाली चाय, सिर्फ स्टॉक में मौजूद चीज़ें।

forEach — हर item के पास जाएँ

forEach हर item पर एक फ़ंक्शन चलाता है, एक-एक करके — लेकिन map और filter से अलग, यह कुछ नहीं लौटाता। आप इसे तब इस्तेमाल करते हैं जब आप हर item के साथ कुछ करना चाहते हैं, नया ऐरे बनाना नहीं: उसे छापना, उसे कुल में जोड़ना, या उसे पेज पर दिखाना।

let students = ["Rahul", "Priya", "Amit"];
students.forEach(function(name) {
  console.log("Hello, " + name);
});
// Hello, Rahul
// Hello, Priya
// Hello, Amit

Note: map और forEach एक जैसे दिखते हैं, लेकिन वे अलग सवालों के जवाब देते हैं। map पूछता है "नई सूची क्या है?" forEach पूछता है "हर item के साथ मुझे क्या करना चाहिए?" अगर आप map इस्तेमाल कर रहे हैं लेकिन उसका नतीजा फेंक दे रहे हैं, तो आपको forEach चाहिए था।

find — एक item खोजें

find जाँच में पास होने वाला पहला item लौटाता है। अगर कुछ भी पास नहीं होता, तो यह undefined लौटाता है — JavaScript का "नहीं मिला" कहने का तरीका।

let scores = [12, 45, 78, 33];
let firstBig = scores.find(function(score) {
  return score > 50;
});
// firstBig है 78 (50 से ऊपर वाला पहला)

ध्यान दें, यह 78 पर रुक जाता है। 33 को कभी जाँचा ही नहीं जाता, क्योंकि find को सिर्फ पहला match चाहिए। अगर आपको सभी match चाहिए, तो इसकी जगह filter इस्तेमाल करें।

sort — क्रम में लगाएँ

sort ऐरे को खुद ही फिर से व्यवस्थित करता है — यह मूल ऐरे को बदल देता है, इसलिए सावधान रहें। शब्दों के साथ सादा sort() ठीक काम करता है: यह उन्हें वर्णमाला के क्रम में लगा देता है। नंबरों के साथ आपको छोटा comparison फ़ंक्शन देना होगा, क्योंकि सादा sort() नंबरों को text मानता है और 100 को 20 से पहले रख देता है।

let names = ["Priya", "Amit", "Rahul"];
names.sort();
// ["Amit", "Priya", "Rahul"]

let numbers = [100, 20, 3];
numbers.sort(function(a, b) {
  return a - b;
});
// [3, 20, 100]

Comparison फ़ंक्शन negative नंबर लौटाता है जब a को पहले आना चाहिए, positive नंबर जब b को पहले आना चाहिए, और शून्य जब वे बराबर हों। a - b नंबरों के लिए ठीक यही करता है, सबसे छोटा पहले। सबसे बड़ा पहले चाहिए तो b - a इस्तेमाल करें।

Tip: इन पाँचों में sort ही एकमात्र ऐसा है जो मूल ऐरे को बदलता है। अगर आप मूल क्रम बचाना चाहते हैं, तो पहले ऐरे की copy बनाएँ: let sorted = [...numbers].sort(function(a, b) { return a - b; }); — तीन dots items को नए ऐरे में फैला देते हैं, और फिर आप copy को sort करते हैं।

आम गलतियाँ

यह भूल जाना कि map और filter नया ऐरे लौटाते हैं — नतीजे को सहेजे बिना उन्हें कॉल करने से जवाब फेंक दिया जाता है।
map इस्तेमाल करना जब आप सिर्फ छापना या जोड़ना चाहते हैं — वह forEach का काम है, और map नया ऐरे बर्बाद करता है।
नंबरों को सादे sort() से sort करना — यह उन्हें text की तरह sort करता है, इसलिए 100, 20 से पहले आ जाता है। नंबरों के लिए हमेशा a - b वाला फ़ंक्शन पास करें।
find से सभी match मिलने की उम्मीद करना — यह सिर्फ पहला लौटाता है। सभी के लिए filter इस्तेमाल करें।
forEach के अंदर return लिखना और लूप के रुकने की उम्मीद करना — forEach के पास जल्दी रुकने का कोई तरीका नहीं है। जब break चाहिए, तो for लूप इस्तेमाल करें।

याद रखें

map बदलता है, filter रखता है, forEach देखता है, find खोजता है, sort क्रम लगाता है।
map, filter और find नया मान लौटाते हैं; मूल ऐरे वैसा ही रहता है।
forEach कुछ नहीं लौटाता — इसे कामों के लिए इस्तेमाल करें, सूची बनाने के लिए नहीं।
sort मूल ऐरे को बदलता है, और नंबरों के लिए a - b वाला comparison फ़ंक्शन चाहिए।

उदाहरण समझिए

let marks = [45, 82, 30, 91, 67]; — पाँच छात्रों के परीक्षा नंबर, एक ऐरे में रखे गए।
marks.filter(function(mark) { return mark >= 40; }) — सिर्फ वे नंबर रखता है जो 40 या उससे ज़्यादा हैं, इसलिए 30 बाहर हो जाता है और नतीजा नया ऐरे [45, 82, 91, 67] होता है।
passed.map(function(mark) { return mark + 5; }) — हर पास नंबर में 5 grace marks जोड़ता है, जिससे [50, 87, 96, 72] मिलता है। मूल marks ऐरे कभी नहीं बदलता।
passed.find(function(mark) { return mark > 90; }) — 90 से ऊपर वाला पहला नंबर ढूँढता है, जो 91 है।
document.getElementById("result").innerHTML = ... — जवाब को पेज में लिखता है, ताकि आप उसे console खोले बिना देख सकें।

उदाहरण

Example

<!DOCTYPE html>
<html>
<head>
<title>Array Methods — Exam Marks</title>
<style>
body { font-family: Verdana, sans-serif; padding: 20px; }
h1 { color: #1e3a5f; }
button { background-color: #e13611; color: white; border: none; padding: 10px 18px; font-size: 16px; cursor: pointer; }
p { font-size: 18px; }
.result { background-color: #f1f5f9; padding: 12px; }
</style>
</head>
<body>

<h1>Exam Marks — Array Methods</h1>
<p>Marks: 45, 82, 30, 91, 67</p>
<button onclick="showResults()">Show Results</button>
<p class="result" id="result">Click the button to filter, add grace marks and find the topper.</p>

<script>
function showResults() {
  let marks = [45, 82, 30, 91, 67];
  let passed = marks.filter(function(mark) {
    return mark >= 40;
  });
  let withGrace = passed.map(function(mark) {
    return mark + 5;
  });
  let topper = passed.find(function(mark) {
    return mark > 90;
  });
  document.getElementById("result").innerHTML =
    "Passed: " + passed.join(", ") +
    "<br>With 5 grace marks: " + withGrace.join(", ") +
    "<br>First mark above 90: " + topper;
}
</script>

</body>
</html>

परिणाम

परिणाम — ब्राउज़र में यह कैसा दिखता है

खुद करके देखें — लाइव एडिटर

नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।

<!DOCTYPE html>
<html>
<head>
<title>Array Methods — Exam Marks</title>
<style>
body { font-family: Verdana, sans-serif; padding: 20px; }
h1 { color: #1e3a5f; }
button { background-color: #e13611; color: white; border: none; padding: 10px 18px; font-size: 16px; cursor: pointer; }
p { font-size: 18px; }
.result { background-color: #f1f5f9; padding: 12px; }
</style>
</head>
<body>

<h1>Exam Marks — Array Methods</h1>
<p>Marks: 45, 82, 30, 91, 67</p>
<button onclick="showResults()">Show Results</button>
<p class="result" id="result">Click the button to filter, add grace marks and find the topper.</p>

</body>
</html>

पूरे एडिटर में खोलें

परिणाम

खुद क्यों सीखें — AI से पूछने के बजाय?

AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।