برای جست و جو در آرایه در زبان جاوااسکریپت، روش‌های مختلفی وجود دارد که می‌توان از آنها استفاده کرد. اما این که شما کدام روش را انتخاب کنید، بستگی به خودتان دارد.

به عنوان مثال، آیا می‌خواهید همه آیتم‌هایی از یک آرایه که شرایط خاصی را برآورده می‌کند پیدا کنید؟ آیا قصد دارید بررسی کنید که هر آیتم آرایه با شرایط در نظر گرفته شده مطابقت دارد یا نه؟ آیا می‌خواهید بررسی کنید که مقدار خاصی در آرایه موجود است یا نه؟ یا قصد یافتن یک مقدار شاخص در آرایه را دارید؟

همه این موارد با استفاده از روش‌های Array.prototype جاوااسکریپت پوشش داده می‌شوند. در این مقاله ۴ روش مورد استفاده برای جست و جو در آرایه را بررسی می‌کنیم. این روش‌ها عبارتند از:

•  Filter
• Find
• Includes
• IndexOf

Filter

با استفاده از متد filter می‌توان برای یافتن عناصری از یک آرایه که شرایط خاصی را برآورده می‌کنند اقدام کرد. به عنوان مثال، اگر بخواهیم همه موارد موجود در آرایه که اعداد بزرگ‌تر از ۱۰ هستند را بیابیم می‌توانیم این کار را انجام دهیم:

const array = [10, 11, 3, 20, 5];

const greaterThanTen = array.filter(element => element > 10);

console.log(greaterThanTen) //[11, 20]

نحوه استفاده از متد filter به این صورت است:

let newArray = array.filter(callback);

• newArray آرایه جدید بازگردانده شده است.
• array  آرایه‌ای است که متد  filter برای آن اعمال می‌شود.
• callback یک تابع است که به هر آیتم از آرایه اعمال می‌شود.

مقدار آرایه خالی زمانی بازگردانده می‌شود که شرط متد filter برای هیچ کدام از عناصر آرایه نتیجه نداشته باشد.

مواقعی وجود دارد که ما به همه عناصری که شرایط خاص مورد نظر را برآورده می‌کنند نیاز نداریم و تنها به یک عنصر نیاز داریم که با شرایط مطابقت داشته باشد. در این حالت باید از متد find استفاده کنیم.

Find

از متد find می‌توان برای یافتن اولین آیتم مطابق با شرایط تعیین شده، استفاده کرد. دقیقاً مانند روش فیلتر، از تابع callback به عنوان یک استدلال استفاده می‌شود و اولین عنصری که مطابق با شرایط callback باشد بازگردانده خواهد شد. می‌توانیم از متد find در آرایه مثال بالا استفاده کنیم.

const array = [10, 11, 3, 20, 5];

const greaterThanTen = array.find(element => element > 10);

console.log(greaterThanTen) //11

نحوه استفاده از find:

let element = array.find(callback);

callback تابعی است که بر روی هر مقدار آرایه اجرا می‌شود و سه آرگومان می‌گیرد:

• element – عنصر شمارنده برای آیتم‌های آرایه.
• Index – اندیس آیتم‌های آرایه.

البته توجه داشته باشید که اگر هیچ موردی در آرایه مطابق با شرط اصلی نباشد، در پاسخ مقدار undefined بازگردانده خواهد شد.

Includes

متد includes تعیین می‌کند که آیا آرایه شامل یک مقدار معین هست یا خیر. که البته جواب true یا false به عنوان جواب نهایی بازگردانده خواهد شد. بنابراین در مثال بالا، اگر بخواهیم بررسی کنیم که آیا عدد ۲۰ یکی از عناصر موجود در آرایه است یا نه، می‌توانیم این کار را انجام دهیم:

const array = [10, 11, 3, 20, 5];

const includesTwenty = array.includes(20);

console.log(includesTwenty) //true

بین این روش و سایر روش‌هایی که در نظر گرفته‌ایم تفاوتی خواهیم دید. در واقع در این روش یک مقدار را به جای یک callback به عنوان آرگومان قبول می‌کنیم. استفاده از این روش به این صورت است:

const includesValue = array.includes(valueToFind, fromIndex)

• valueToFind مقداری است که در آرایه بررسی می‌کنیم.
• fromIndex اندیس در آرایه است که می خواهیم جستجوی عنصر را از آن شروع کنیم.

IndexOf

متد indexOf اولین اندیس یک آرایه که عنصر مورد نظر در داخل آن یافت می‌شود را نشان می‌دهد. اگر عنصر در آرایه وجود نداشته باشد در پاسخ -۱ برمی‌گردد. اگر بخواهیم اندیس ۳ را در آرایه پیدا کنیم به این صورت خواهد بود.

const array = [10, 11, 3, 20, 5];

const includesTenTwice = array.includes(10, 1);

console.log(includesTenTwice) //false

استفاده از آن شبیه به روش includes است:

const indexOfElement = array.indexOf(element, fromIndex)

• element مقداری است که در آرایه بررسی می‌کنیم.
• fromIndex اندیس آرایه است که می خواهیم جستجوی عنصر را از آن شروع کنیم.

به این مساله مهم توجه داشته باشید که هر دو متد includes و indexOf از برابری دقیق (‘===’) برای جستجوی آرایه استفاده می‌کنند. اگر مقادیر از انواع مختلفی باشند ( به عنوان مثال ‘۴’ و ۴ )، در هر دو به ترتیب پاسخ false و ۱- بازگردانده می‌شود.

[button class=”github-btn” href=”http://frontcast.ir/javascript-function-execution”]ویدیوی آموزشی: اجرای توابع در جاوااسکریپت[/button]

دیدگاه‌ها:

سجاد کهریزی

شهریور 6, 1399  در  4:33 ب.ظ

توی مثال IndexOf به نظرم اشتباهی صورت گرفته
به جای array.includes باید از array.indexOf استفاده کنین

برای پاسخ دادن وارد شوید

افزودن دیدگاه جدید لغو پاسخ

برای نوشتن دیدگاه باید وارد بشوید.