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

روش filter که در کنار سایر روش های آرایه در ECMAScript 5 معرفی شد، از آن زمان به یک ویژگی اساسی در برنامه نویسی جاوا اسکریپت تبدیل شده است.

در این مقاله، روش filter جاوا اسکریپت را تحلیل خواهیم کرد، نحو، عملکرد و موارد استفاده رایج آن را تحلیل خواهیم کرد.

فهرست مطالب

اصول روش filter

نحو روش filter

موارد استفاده متداول از روش filter

نتیجه

اصول روش filter

روش filter در جاوا اسکریپت به عنوان یک تابع مرتبه بالاتر طراحی شده است که بر روی هر عنصر یک آرایه تکرار می شود و به توسعه دهندگان این امکان را می دهد تا شرایط خاصی را برای فیلتر کردن عناصر اعمال کنند.

روش filter آرایه اصلی را تغییر نمی دهد، اما در عوض یک آرایه جدید ایجاد و برمی گرداند که فقط حاوی عناصری است که شرایط مشخص شده را برآورده می کنند.

نحو روش filter

نحو روش filter نسبتاً ساده است:

 const newArray = array.filter(callback(element[, index[, array]])[, thisArg]);

array : آرایه اصلی که عناصر از آن فیلتر می شوند.

callback : تابعی است که روی هر عنصر آرایه اجرا می شود.

element : عنصر فعلی در حال پردازش در آرایه.

index (اختیاری): شاخص عنصر فعلی در حال پردازش.

array (اختیاری): filter آرایه فراخوانی شد.

thisArg (اختیاری): یک شی اختیاری که می تواند در تابع callback به this اشاره کند.

موارد استفاده متداول از روش filter

فیلتر کردن بر اساس یک شرط

سناریو: شما آرایه ای از اعداد دارید و می خواهید فقط اعداد زوج را فیلتر کنید.

بدون فیلتر:

 const numbers = [1, 2, 3, 4, 5]; const evenNumbers = []; for (let i = 0; i < numbers.length; i++) { if (numbers[i] % 2 === 0) { evenNumbers.push(numbers[i]); } } // evenNumbers: [2, 4]

در روش سنتی، شما باید روی هر عنصر در آرایه numbers با استفاده از یک حلقه تکرار کنید و قبل از فشار دادن آن به آرایه evenNumbers به صورت دستی تحلیل کنید که آیا هر عدد یکنواخت است یا خیر.

با فیلتر:

 const numbers = [1, 2, 3, 4, 5]; const evenNumbers = numbers.filter(num => num % 2 === 0); // evenNumbers: [2, 4]

با استفاده از روش filter ، می‌توانید تابع فراخوانی را ارسال کنید که هر عنصر ( num ) از آرایه numbers را آزمایش می‌کند و فقط مواردی را که شرط زوج بودن را برآورده می‌کنند نگه می‌دارد. این منجر به یک روش مختصر و خوانا برای فیلتر کردن آرایه می شود.

فیلتر کردن مقادیر تهی یا تعریف نشده

سناریو: شما آرایه ای دارید که هم شامل اعداد و هم مقادیر null یا undefined و می خواهید این مقادیر null یا undefined را فیلتر کنید.

بدون فیلتر:

 const values = [10, null, 20, undefined, 30]; const filteredValues = []; for (let i = 0; i < values.length; i++) { if (values[i] !== null && values[i] !== undefined) { filteredValues.push(values[i]); } } // filteredValues: [10, 20, 30]

در روش سنتی، شما باید روی هر عنصر در آرایه values تکرار کنید و قبل از فشار دادن آن به آرایه filteredValues ، به صورت دستی تحلیل کنید که آیا هر عنصر null یا undefined نیست.

با فیلتر:

 const values = [10, null, 20, undefined, 30]; const filteredValues = values.filter(value => value !== null && value !== undefined); // filteredValues: [10, 20, 30]

با استفاده از روش filter ، می‌توانید یک تابع فراخوان مختصر ارائه دهید که مقادیر null یا undefined را از آرایه فیلتر می‌کند، و در نتیجه کد تمیزتر و قابل نگهداری‌تری ایجاد می‌کند.

فیلتر کردن اشیاء بر اساس مقادیر ویژگی

سناریو: شما مجموعه‌ای از اشیاء دارید که محصولات را نشان می‌دهند و می‌خواهید محصولات با قیمت‌های بیشتر از 50 دلار را فیلتر کنید.

بدون فیلتر:

 const products = [ { id: 1, name: 'Product 1', price: 40 }, { id: 2, name: 'Product 2', price: 60 }, { id: 3, name: 'Product 3', price: 30 } ]; const expensiveProducts = []; for (let i = 0; i < products.length; i++) { if (products[i].price > 50) { expensiveProducts.push(products[i]); } } // expensiveProducts: [{ id: 2, name: 'Product 2', price: 60 }]

در رویکرد مرسوم، شما باید روی هر شی محصول در آرایه products تکرار کنید و به صورت دستی تحلیل کنید که آیا قیمت هر محصول بیشتر از 50 دلار است قبل از اینکه آن را به آرایه expensiveProducts وارد کنید.

با فیلتر:

 const products = [ { id: 1, name: 'Product 1', price: 40 }, { id: 2, name: 'Product 2', price: 60 }, { id: 3, name: 'Product 3', price: 30 } ]; const expensiveProducts = products.filter(product => product.price > 50); // expensiveProducts: [{ id: 2, name: 'Product 2', price: 60 }]

با استفاده از روش filter ، می‌توانید یک تابع پاسخ به تماس مختصر ارائه دهید که محصولات با قیمت‌های بیشتر از 50 دلار را فیلتر می‌کند و در نتیجه کدهای تمیزتر و گویاتر به دست می‌آید.

نتیجه

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

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

اگر بازخوردی دارید، می‌توانید در توییتر یا لینکدین به من پیام دهید.

خبرکاو