जावास्क्रिप्ट और jQuery में एरे खोज विधियों की संपूर्ण गाइड

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. परिचय

JavaScript वेब विकास में सबसे अधिक उपयोग की जाने वाली प्रोग्रामिंग भाषाओं में से एक है। विशेष रूप से, इसके एरे (array) हेरफेर सुविधाएँ डेटा प्रबंधन और उपयोगकर्ता इंटरैक्शन में महत्वपूर्ण भूमिका निभाती हैं।
इस लेख में, हम विस्तार से समझाते हैं कि JavaScript में एरे के भीतर मानों (values) को कैसे खोजा जाए। बुनियादी खोज विधियों से लेकर अधिक उन्नत तकनीकों तक, यह गाइड शुरुआती और मध्यवर्ती डेवलपर्स दोनों के लिए उपयोगी जानकारी प्रदान करता है।

इस लेख का उद्देश्य

इस लेख को पढ़कर आप निम्नलिखित बिंदु सीखेंगे:

• एरे खोज के लिए उपयोग किए जाने वाले प्रमुख JavaScript मेथड्स के बीच अंतर को समझना।
• प्रत्येक मेथड के विशिष्ट उपयोग को कोड उदाहरणों के माध्यम से सीखना।
• परिदृश्य के अनुसार उपयुक्त मेथड चुनना।

लक्षित पाठक

यह लेख निम्नलिखित लोगों के लिए है:

• वे शुरुआती जो अभी-अभी JavaScript का उपयोग शुरू कर रहे हैं।
• मध्यवर्ती उपयोगकर्ता जो एरे खोज और डेटा प्रोसेसिंग की समझ को गहरा करना चाहते हैं।
• वेब डेवलपर्स जो व्यावहारिक कोड उदाहरणों की तलाश में हैं।

आप जो ज्ञान और कौशल प्राप्त करेंगे

• JavaScript एरे खोज मेथड्स (indexOf(), includes(), find(), findIndex()) की बुनियाद और अनुप्रयोग।
• jQuery के inArray() मेथड और उसकी सावधानियों का उपयोग।
• प्रदर्शन तुलना और व्यावहारिक उपयोग परिदृश्य।

इन कौशलों में निपुण होकर, आप JavaScript का उपयोग करके डेटा हेरफेर अधिक प्रभावी ढंग से कर पाएँगे।

अगला लेख

अगले लेख में, हम “JavaScript में बुनियादी एरे खोज मेथड्स” को विस्तार से समझाएंगे। हम प्रत्येक मेथड की विशेषताओं और उपयोग को ठोस उदाहरणों के साथ कवर करेंगे। जुड़े रहें।
यदि इस सामग्री के संबंध में आपके कोई प्रश्न या अनुरोध हों, तो निःसंकोच संपर्क करें।

2. JavaScript में बुनियादी एरे खोज मेथड्स

JavaScript एरे के भीतर मानों को खोजने के लिए विभिन्न मेथड्स प्रदान करता है। यह अनुभाग प्रत्येक मेथड के काम करने के तरीके को आसान‑से‑समझने वाले उदाहरणों के साथ समझाता है।

2-1. indexOf() मेथड

सारांश
indexOf() मेथड एरे में किसी निर्दिष्ट मान के पहले प्रकट होने वाले इंडेक्स को लौटाता है। यदि वह मान मौजूद नहीं है, तो यह -1 लौटाता है।

बुनियादी सिंटैक्स

array.indexOf(value, fromIndex)

• value : खोजा जाने वाला मान।
• fromIndex : वैकल्पिक। खोज की प्रारंभिक स्थिति (डिफ़ॉल्ट 0)।

उदाहरण

const fruits = ['apple', 'banana', 'orange'];

console.log(fruits.indexOf('banana')); // Output: 1
console.log(fruits.indexOf('grape'));  // Output: -1

नोट्स

• indexOf() मानों की तुलना सख्त समानता (===) से करता है। विभिन्न प्रकार के मान मेल नहीं खाते।
• ऑब्जेक्ट्स या एरे स्वयं की तुलना के लिए उपयुक्त नहीं है।

2-2. includes() मेथड

सारांश
includes() मेथड एक बूलियन (true या false) लौटाता है जो दर्शाता है कि निर्दिष्ट मान एरे में मौजूद है या नहीं।

बुनियादी सिंटैक्स

array.includes(value, fromIndex)

उदाहरण

const colors = ['red', 'green', 'blue'];

console.log(colors.includes('green'));  // Output: true
console.log(colors.includes('yellow')); // Output: false

नोट्स

• includes() ES6 (2015) में पेश किया गया था, इसलिए पुराने ब्राउज़रों में यह समर्थित नहीं हो सकता।

2-3. find() मेथड

सारांश
find() मेथड वह पहला तत्व लौटाता है जो निर्दिष्ट शर्त को पूरा करता है। यदि कोई तत्व शर्त को पूरा नहीं करता, तो यह undefined लौटाता है।

उदाहरण

const numbers = [10, 20, 30, 40];

const result = numbers.find(num => num > 25);
console.log(result); // Output: 30

2-4. findIndex() मेथड

सारांश
findIndex() मेथड वह पहला इंडेक्स लौटाता है जो निर्दिष्ट शर्त को पूरा करता है। यदि कोई तत्व शर्त को पूरा नहीं करता, तो यह -1 लौटाता है।

उदाहरण

const numbers = [10, 20, 30, 40];

const index = numbers.findIndex(num => num > 25);
console.log(index); // Output: 2

सारांश

इस अनुभाग में JavaScript के बुनियादी एरे खोज मेथड्स — indexOf(), includes(), find(), और findIndex() — को समझाया गया।
तुलनात्मक बिंदु

• सरल मान खोजों के लिए, indexOf() या includes() का उपयोग करें।
• शर्तीय खोजों के लिए, find() या findIndex() उपयोगी है।

3. jQuery का inArray() मेथड क्या है?

हालांकि जावास्क्रिप्ट मूल एरे खोज मेथड प्रदान करता है, jQuery भी अपना स्वयं का मेथड inArray() प्रदान करता है। यह अनुभाग इसकी विशेषताओं, उपयोग और सावधानियों को समझाता है।

3-1. jQuery का उपयोग क्यों करें?

• पुराने सिस्टम का रखरखाव
• सरल कोड लेखन
• पुराने ब्राउज़रों के साथ संगतता

3-2. inArray() का उपयोग कैसे करें

सारांश
inArray() एरे में किसी मान का इंडेक्स लौटाता है। यदि वह मान मौजूद नहीं है, तो यह -1 लौटाता है।

बुनियादी सिंटैक्स

$.inArray(value, array, [fromIndex])

उदाहरण

const fruits = ['apple', 'banana', 'orange'];

console.log($.inArray('banana', fruits)); // Output: 1
console.log($.inArray('grape', fruits));  // Output: -1

3-3. तुलना: inArray() बनाम नेटिव मेथड्स

मुख्य बिंदु:

• inArray() का उपयोग jQuery प्रोजेक्ट्स में स्थिरता के लिए करें।
• आधुनिक प्रोजेक्ट्स के लिए नेटिव मेथड्स का उपयोग करें।

3-4. नोट्स

1. jQuery संस्करण निर्भरता
inArray() केवल jQuery वातावरण में ही काम करता है।

2. सख्त तुलना
यह मानों की तुलना सख्त समानता (===) से करता है।

3. प्रदर्शन अंतर
नेटिव मेथड्स तेज़ होते हैं।

सारांश

इस अनुभाग में jQuery का inArray() कवर किया गया।
मुख्य बिंदु:

• पुराने या jQuery-आधारित सिस्टमों के लिए सुविधाजनक।
• नए विकास के लिए नेटिव मेथड्स की सिफारिश की जाती है।

4. एरे खोज मेथड चुनने के लिए तुलना गाइड

जावास्क्रिप्ट और jQuery कई एरे खोज मेथड प्रदान करते हैं, प्रत्येक की अलग-अलग विशेषताएँ और उपयोग केस होते हैं। यह अनुभाग प्रमुख मेथड्स की तुलना करता है और आपके परिदृश्य के अनुसार सही मेथड चुनने की व्याख्या करता है।

4-1. प्रत्येक मेथड की विशेषताएँ और तुलना

नीचे प्रमुख एरे खोज मेथड्स की तुलना तालिका दी गई है।

4-2. उपयोग परिदृश्य के अनुसार अनुशंसित मेथड्स

1. सरल मान खोज
उदाहरण: यह जांचना कि एरे में कोई विशिष्ट मान मौजूद है या नहीं।

• अनुशंसित मेथड्स:
• indexOf() → जब इंडेक्स संख्या चाहिए।
• includes() → जब केवल अस्तित्व की जाँच पर्याप्त हो।

उदाहरण:

const colors = ['red', 'green', 'blue'];

console.log(colors.indexOf('green')); // Output: 1
console.log(colors.includes('green')); // Output: true

2. शर्तीय खोज
उदाहरण: ऐसी डेटा की खोज जो किसी विशिष्ट शर्त को पूरा करता हो।

• अनुशंसित मेथड्स:
• find() → पहला मिलते हुए तत्व लौटाता है।
• findIndex() → पहले मिलते हुए तत्व का इंडेक्स लौटाता है।

उदाहरण:

const numbers = [10, 20, 30, 40];

console.log(numbers.find(num => num > 25)); // Output: 30
console.log(numbers.findIndex(num => num > 25)); // Output: 2

3. लेगेसी सिस्टम खोज
उदाहरण: पुराने jQuery-आधारित सिस्टम में डेटा की खोज।

• अनुशंसित मेथड:
• inArray() → जब jQuery आवश्यक हो तो उपयोगी।

उदाहरण:

const fruits = ['apple', 'banana', 'orange'];

console.log($.inArray('banana', fruits)); // Output: 1

4-3. प्रदर्शन तुलना

1. जब उच्च गति की आवश्यकता हो:

• indexOf() और includes() तेज़ हैं।

2. शर्तीय खोजों के लिए:

• find() और findIndex() लचीली शर्तें प्रदान करते हैं लेकिन थोड़ा धीमे होते हैं।

3. जब jQuery का उपयोग किया जाता है:

• inArray() सरल है लेकिन लाइब्रेरी ओवरहेड के कारण धीमा है।

सारांश

इस अनुभाग ने प्रमुख एरे खोज मेथड्स की तुलना की और परिदृश्य के अनुसार अनुशंसित उपयोग को समझाया।
मुख्य बिंदु:

• indexOf() या includes() का उपयोग सरल खोजों के लिए करें।
• find() या findIndex() का उपयोग शर्तीय खोजों के लिए करें।
• inArray() का उपयोग लेगेसी jQuery वातावरण के लिए करें।

पर्यावरण और उपयोग केस के अनुसार उपयुक्त मेथड चुनने से कुशल और रखरखाव योग्य कोड बनता है।

5. व्यावहारिक उदाहरण और लागू परिदृश्य

यह अनुभाग वास्तविक दुनिया के परिदृश्यों में JavaScript और jQuery एरे खोज विधियों को लागू करने के तरीके को समझाता है। व्यावहारिक उदाहरणों के माध्यम से, आप कोड की अपनी समझ को गहरा करेंगे।

5-1. Form Input Validation

परिदृश्य:
जाँचें कि उपयोगकर्ता का इनपुट पूर्वनिर्धारित सूची में मौजूद है या नहीं।
समाधान:
includes() का उपयोग सरल अस्तित्व जाँच के लिए करें।
कोड उदाहरण:

const validColors = ['red', 'green', 'blue'];
const userInput = 'green';

if (validColors.includes(userInput)) {
  console.log('Valid color.');
} else {
  console.log('Invalid color.');
}

5-2. Searching and Extracting User Data

परिदृश्य:
ऐरे में वस्तुओं के भीतर उन उपयोगकर्ता डेटा को खोजें जो विशिष्ट शर्तों को पूरा करते हैं।
समाधान:
find() या findIndex() का उपयोग करें।
कोड उदाहरण:

const users = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 35 },
];

const result = users.find(user => user.age >= 30);
console.log(result); // Output: { id: 2, name: 'Bob', age: 30 }

const index = users.findIndex(user => user.age >= 30);
console.log(index); // Output: 1

5-3. Error Handling Example

परिदृश्य:
जब खोज लक्ष्य नहीं मिलता है तो त्रुटि संभालना लागू करें।
समाधान:
indexOf() या findIndex() का उपयोग करें।
कोड उदाहरण:

const products = ['apple', 'banana', 'orange'];

const index = products.indexOf('grape');

if (index === -1) {
  console.log('Product not found.');
} else {
  console.log(`Product found at index ${index}.`);
}

5-4. Filtering Array Data

परिदृश्य:
केवल उन डेटा को निकालें जो विशिष्ट शर्तों को पूरा करते हैं।
समाधान:
filter() का उपयोग करें।
कोड उदाहरण:

const scores = [45, 72, 88, 53, 94];

const highScores = scores.filter(score => score >= 70);
console.log(highScores); // Output: [72, 88, 94]

5-5. jQuery Search Example

परिदृश्य:
लेगेसी सिस्टम में inArray() का उपयोग करके डेटा की मौजूदगी जाँचें।
समाधान:
jQuery inArray() का उपयोग करें।
कोड उदाहरण:

const fruits = ['apple', 'banana', 'orange'];

if ($.inArray('banana', fruits) !== -1) {
  console.log('Banana exists in the list.');
} else {
  console.log('Banana is not in the list.');
}

Summary

इस अनुभाग ने वास्तविक परिदृश्यों पर आधारित व्यावहारिक उपयोग उदाहरण प्रस्तुत किए।
मुख्य बिंदु:

• includes() सरल है और इनपुट वैधता के लिए उपयोगी है।
• find() और findIndex() शर्तीय और वस्तु-आधारित खोजों के लिए शक्तिशाली हैं।
• indexOf() त्रुटि संभालने के लिए बहुमुखी है।
• filter() कई मिलते-जुलते आइटम निकालने के लिए कुशल है।
• inArray() लेगेसी jQuery परिवेश में मदद करता है।

6. Frequently Asked Questions (FAQ)

यह अनुभाग JavaScript और jQuery में एरे खोज से संबंधित सामान्य प्रश्नों के उत्तर देता है।

Question 1: What is the difference between indexOf() and includes()?

उत्तर:
दोनों विधियों का उपयोग एरे में तत्वों को खोजने के लिए किया जाता है, लेकिन उनके रिटर्न वैल्यू और उपयोग में अंतर है:

• indexOf() : निर्दिष्ट मान का इंडेक्स लौटाता है। यदि मान नहीं मिलता तो -1 लौटाता है।
• includes() : एक बूलियन (true या false) लौटाता है जो दर्शाता है कि मान एरे में मौजूद है या नहीं।

उदाहरण:

const fruits = ['apple', 'banana', 'orange'];

console.log(fruits.indexOf('banana'));   // Output: 1
console.log(fruits.includes('banana'));  // Output: true

Question 2: How do find() and filter() differ?

उत्तर:
दोनों विधियाँ शर्त से मेल खाने वाले तत्व लौटाती हैं, लेकिन कार्यक्षमता में अंतर है:

• find() : शर्त से मेल खाने वाला पहला तत्व लौटाता है।
• filter() : सभी मेल खाने वाले तत्वों को एक नई एरे के रूप में लौटाता है।

उदाहरण:

const numbers = [10, 20, 30, 40, 50];

console.log(numbers.find(num => num > 25));   // Output: 30
console.log(numbers.filter(num => num > 25)); // Output: [30, 40, 50]

Question 3: How do I search for a specific key-value pair inside an array of objects?

उत्तर:
शर्त के साथ find() या findIndex() का उपयोग करें।
उदाहरण:

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
];

const user = users.find(user => user.name === 'Bob');
console.log(user); // Output: { id: 2, name: 'Bob' }

प्रश्न 4: क्या मुझे अभी भी jQuery की inArray() का उपयोग करना चाहिए?

उत्तर:
jQuery की inArray() पुरानी (legacy) परिवेशों में उपयोगी है, लेकिन आधुनिक JavaScript बेहतर मूल (native) विधियाँ प्रदान करता है।

सिफारिश:

• नए प्रोजेक्ट्स के लिए : indexOf() या includes() जैसी मूल विधियों का उपयोग करें।
• मौजूदा jQuery सिस्टम्स के लिए : स्थिरता बनाए रखने के लिए inArray() का उपयोग करें।

प्रश्न 5: मैं एरे खोज को प्रदर्शन के लिए कैसे अनुकूलित कर सकता हूँ?

उत्तर:
बड़े डेटा सेट या बार-बार खोज संचालन के लिए, निम्न बिंदुओं को ध्यान में रखें:

1. तेज़ विधियों का चयन करें:

• indexOf() और includes() सरल खोजों के लिए सबसे तेज़ हैं।

2. कैशिंग का उपयोग करें:

• खोज परिणामों को कैश करें ताकि दोहराव वाली गणना से बचा जा सके।

3. डेटा संरचनाओं को अनुकूलित करें:

• बड़े डेटा सेट के लिए, कुशल लुकअप के लिए ऑब्जेक्ट्स, Map या Set का उपयोग करें।

उदाहरण:

const dataSet = new Set([10, 20, 30, 40]);
console.log(dataSet.has(20)); // Output: true

सारांश

यह अनुभाग जावास्क्रिप्ट और jQuery में एरे खोज से संबंधित सामान्य प्रश्नों को समझाता है।

मुख्य बिंदु:

• प्रत्येक विधि के अंतर को समझें और उपयुक्त रूप से चुनें।
• ऑब्जेक्ट एरे में शर्तीय खोजों के लिए find() उपयोगी है।
• आधुनिक विकास में मूल विधियों को प्राथमिकता दी जाती है; jQuery मुख्यतः पुरानी प्रणालियों के लिए है।
• सही डेटा संरचना चुनकर प्रदर्शन को अनुकूलित करें।

7. सारांश और अगले कदम

यह लेख जावास्क्रिप्ट और jQuery में एरे खोज विधियों की विस्तृत व्याख्या प्रदान करता है। आइए मुख्य बिंदुओं की समीक्षा करें और चर्चा करें कि आप इन अवधारणाओं को सीखना और लागू करना कैसे जारी रख सकते हैं।

7-1. मुख्य बिंदुओं का सारांश

1. बुनियादी एरे खोज विधियाँ

• indexOf() : किसी तत्व का इंडेक्स खोजता है।
• includes() : यह बताता है कि मान मौजूद है या नहीं, बूलियन लौटाता है।
• find() / findIndex() : शर्त से मेल खाने वाले पहले तत्व या इंडेक्स को खोजता है।

2. jQuery की inArray() विधि

• पुरानी या jQuery-आधारित प्रणालियों में उपयोगी।
• आधुनिक विकास में मूल जावास्क्रिप्ट विधियों की सिफारिश की जाती है।

3. व्यावहारिक उदाहरण और लागू परिदृश्य

• इनपुट वैधता, उपयोगकर्ता डेटा निष्कर्षण, त्रुटि संभालना, और फ़िल्टरिंग को इन विधियों से सरल बनाया जा सकता है।

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

• अंतर, उपयोग मामलों और प्रदर्शन विचारों को स्पष्ट किया गया।

7-2. सही विधि कैसे चुनें

विधि का चयन आपके उद्देश्य पर निर्भर करता है। नीचे दी गई शीट का उपयोग करें:

7-3. अगले कदम

1. एक छोटा प्रोजेक्ट शुरू करें

• यहाँ सीखी गई विधियों को लागू करते हुए एक सरल वेब ऐप बनाएं।
  उदाहरण: TODO सूची, उत्पाद इन्वेंटरी प्रबंधन, फ़िल्टरिंग टूल्स।

2. अधिक उन्नत जावास्क्रिप्ट सीखें

• ES6+ सुविधाएँ : स्प्रेड सिंटैक्स, डीस्ट्रक्चरिंग, एरो फ़ंक्शन।
• असिंक्रोनस प्रोग्रामिंग : डेटा फ़ेचिंग को संभालने के लिए Promise, async/await सीखें।

3. फ्रेमवर्क्स का अन्वेषण करें

• React या Vue.js जैसे फ्रेमवर्क UI रेंडरिंग के लिए अक्सर एरे ऑपरेशन्स का उपयोग करते हैं।

4. अनुशंसित संसाधन

• MDN वेब डॉक्यूमेंट्स : JavaScript Arrays
• W3Schools : JavaScript Array Methods
• JSFiddle / CodePen : कोड स्निपेट्स का परीक्षण और साझा करने के लिए उपयोगी।

7-4. अंतिम विचार

इस गाइड के माध्यम से, आपने जावास्क्रिप्ट और jQuery में एरे खोज के मूल और उन्नत अनुप्रयोग दोनों सीखे।

पाठकों के लिए सलाह:

1. जो सीखा है उसे अक्सर कोड लिखकर और परीक्षण करके अभ्यास करें।
2. नई जावास्क्रिप्ट सुविधाओं और तकनीकों का अन्वेषण जारी रखें।
3. अपनी विशिष्ट आवश्यकताओं के आधार पर सबसे उपयुक्त विधि चुनें।

निष्कर्ष

यह “Complete Guide to Array Searching in JavaScript and jQuery.” का समापन है।
प्रोग्रामिंग कौशल को सीखते और विस्तारित करते रहें ताकि आप और अधिक शक्तिशाली और कुशल अनुप्रयोग बना सकें।