منابع آموزشی و پژوهشی، برای دانشگاه و مدرسه
پشتیبانیانتشار محتوا
CODEX/سطح ۱؛ آرایه و دادهjavascriptArray.prototype.filter()

متد filter در جاوااسکریپت

filter در جاوااسکریپت اعضای مطابق یک شرط را در آرایه‌ای تازه قرار می‌دهد. انتخاب قیمت‌های مجاز، نتیجهٔ خالی و تفاوت آن با map و find را یاد بگیرید.

مفهوم به زبان ساده

وقتی فقط بعضی اعضای یک آرایه را لازم دارید، filter برای انتخاب آن‌ها مناسب است؛ مثلاً قیمت‌هایی که از بودجهٔ کاربر بیشتر نیستند. این روش یک تابع آزمون می‌گیرد. هر عضوی که نتیجهٔ آزمونش به true تبدیل شود، در آرایهٔ خروجی قرار می‌گیرد. ترتیب نسبی اعضای پذیرفته‌شده حفظ می‌شود. برای تبدیل هر عضو به مقداری تازه، به‌جای انتخاب اعضا از #map استفاده کنید.

در مثال، سه قیمت داریم و سقف بودجه ۱۰۰۰۰۰ تومان است. تابع پیکانی برای هر قیمت بررسی می‌کند آیا از سقف بیشتر نیست. نتیجه، آرایه‌ای با دو عضو است. filter خودش آرایهٔ قیمت‌های اصلی را بازنویسی نمی‌کند؛ بنابراین بعد از ساخت نتیجه، هنوز هر سه قیمت در منبع باقی مانده‌اند. اگر هیچ عضو پذیرفته نشود، نتیجه آرایهٔ خالی است، نه null یا undefined.

آرایهٔ خروجی تازه است، اما کپی عمیق داده‌ها نیست. اگر اعضا شیء باشند، همان مرجع شیء انتخاب‌شده در خروجی قرار می‌گیرد. تغییر ویژگی آن شیء از طریق خروجی می‌تواند در منبع هم دیده شود. تابع آزمون را تا حد امکان فقط برای تصمیم قبول یا رد بنویسید و درون آن داده را تغییر ندهید. اگر فقط نخستین عضو مطابق شرط را می‌خواهید، #array-find هم از نظر هدف و هم از نظر نوع نتیجه مناسب‌تر است.

کجا به کار می‌آید؟

  • انتخاب کالاهای در محدودهٔ بودجه یا درس‌های تکمیل‌شده
  • ساخت نتیجهٔ جست‌وجو بدون حذف‌کردن داده‌های منبع

از تعریف تا یک مثال واقعی

javascript
const prices = [60000, 150000, 90000];
const budget = 100000;
const affordable = prices.filter((price) => price <= budget);

console.log(affordable.join(', '));
console.log(prices.length);
console.log(prices.filter((price) => price < 1000).length);
خروجی مورد انتظار
60000, 90000
3
0
کد را تغییر دهید و نتیجه را ببینید.

این مثال چطور کار می‌کند؟

  1. prices سه قیمت عددی را نگه می‌دارد.

  2. تابع آزمون برای هر قیمت، نتیجهٔ مقایسه با بودجه را برمی‌گرداند.

  3. دو قیمت پذیرفته‌شده با همان ترتیب به خروجی می‌روند.

  4. فیلتر دوم هیچ عضو مناسبی پیدا نمی‌کند؛ طول آرایهٔ نتیجه صفر است.

اشتباه رایج

در بدنهٔ بلوکی callback، return را فراموش نکنید؛ price => { price <= budget; } نتیجه‌ای برنمی‌گرداند و در این نمونه همهٔ اعضا رد می‌شوند. خروجی filter نیز کپی عمیق اشیای انتخاب‌شده نیست.

این را به خاطر بسپارید

filter برای انتخاب صفر تا چند عضو است؛ نتیجه همیشه یک آرایه است و نبود نتیجه با آرایهٔ خالی مشخص می‌شود.

بازگشت به نقشهٔ مفاهیم
یکجا انتخاب کن، راحت‌تر دریافت کن

انتخاب‌های من ۰ منبع

مجموعهٔ مطالعه‌ات را بساز.

کنار مقاله‌ها «انتخاب» را بزنید تا چند فایل را با هم دریافت کنید.

انتخاب مقاله‌های رایگان