JavaScript

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

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

متد  ()Array.filter مسلماً مهمترین و پرکاربردترین متد برای تکرار آرایه در جاوا اسکریپت است.

روش کار با ()filter بسیار ساده است. این مستلزم فیلتر کردن یک یا چند مورد (یک زیر مجموعه) از یک مجموعه بزرگتر از اقلام (یک مجموعه بزرگ) بر اساس برخی شرایط یا ترجیحات است.

همه ما این کار را هر روز انجام می دهیم ، چه در حال خواندن ، انتخاب دوستان یا همسرمان ، انتخاب فیلم برای تماشای فیلم و …..

متد ()Array.filter در جاوااسکریپت

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

currentItem : این عنصر در آرایه است که در حال حاضر در حال تکرار است.

Index  : این موقعیت نمایه currentItem در داخل آرایه است.

array: این آرایه هدف را به همراه تمام آیتم های آن نشان می دهد.

متد ()filter یک آرایه جدید ایجاد می کند و همه مواردی را که از شرایط مشخص شده در callback عبور می کنند ، برمی گرداند.

نحوه استفاده از متد  ()filter در جاوا اسکریپت

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

()filter مثال 1: نحوه فیلتر کردن موارد از یک آرایه

در این مثال ، ما هر فردی را که یک کودک نوپا است (که سن او بین 0 تا 4 سال است) فیلتر می کنیم.

code1

let people = [
    {name: "aaron",age: 65},
    {name: "beth",age: 2},
    {name: "cara",age: 13},
    {name: "daniel",age: 3},
    {name: "ella",age: 25},
    {name: "fin",age: 1},
    {name: "george",age: 43},
]

let toddlers = people.filter(person => person.age <= 3)

console.log(toddlers)



/*
[{
  age: 2,
  name: "beth"
}, {
  age: 3,
  name: "daniel"
}, {
  age: 1,
  name: "fin"
}]
*/

 ()filterمثال 2: نحوه فیلتر کردن موارد بر اساس یک ویژگی خاص

code2

let team = [
	{
  		name: "aaron",
    	position: "developer"
 	 },
  	{
  		name: "beth",
    	position: "ui designer"
  	},
  	{
  		name: "cara",
    	position: "developer"
  	},
 	{
  		name: "daniel",
    	position: "content manager"
 	 },
  	{
  		name: "ella",
    	position: "cto"
  	},
  	{
  		name: "fin",
    	position: "backend engineer"
  	},
  	{
  		name: "george",
    	position: "developer"
  },

]

let developers = team.filter(member => member.position == "developer")

console.log(developers)


/*
[{
  name: "aaron",
  position: "developer"
}, {
  name: "cara",
  position: "developer"
}, {
  name: "george",
  position: "developer"
}]
*/

در مثال بالا ، ما توسعه دهندگان را فیلتر کردیم. اما اگر بخواهیم هر عضوی را که توسعه دهنده نیست ، فیلتر کنیم؟

ما می توانیم این کار را انجام دهیم:

code3

let team = [
	{ 
        name: "aaron",
   		position: "developer"
  	},
  	{
  		name: "beth",
   		position: "ui designer"
 	 },
  	{
  		name: "cara",
    	position: "developer"
  	},
  	{
  		name: "daniel",
    	position: "content manager"
  	},
  	{
  		name: "ella",
    	position: "cto"
  	},
  	{
  		name: "fin",
    	position: "backend engineer"
  	},
  	{
  		name: "george",
    	position: "developer"
  	},

]

let nondevelopers = team.filter(member => member.position !== "developer")

console.log(nondevelopers)


/*
[
    {
  		name: "beth",
  		position: "ui designer"
	}, 
    {
  		name: "daniel",
  		position: "content manager"
	}, 
    {
  		name: "ella",
  		position: "cto"
	}, 
    {
  		name: "fin",
  		position: "backend engineer"
	}
]

*/

()filter مثال 3: نحوه دسترسی به ویژگی index

این یک مسابقه است. در این مسابقه سه برنده حضور دارند. اولی مدال طلا ، دومی نقره و سومی برنز دریافت می کند.

با استفاده از فیلتر و دسترسی به ویژگی فهرست هر مورد در هر تکرار ، می توانیم هر یک از سه برنده را به متغیرهای مختلف فیلتر کنیم.

code4

let winners = ["Anna", "Beth", "Cara"]

let gold = winners.filter((winner, index) => index == 0)
let silver = winners.filter((winner, index) => index == 1)
let bronze = winners.filter((winner, index) => index == 2)

console.log(Gold winner: ${gold}, Silver Winner: ${silver}, Bronze Winner: ${bronze})

// "Gold winner: Anna, Silver Winner: Beth, Bronze Winner: Cara"

()filterمثال 4: نحوه استفاده از پارامتر آرایه

یکی از متداول ترین کاربردهای پارامتر سوم (آرایه) بررسی وضعیت آرایه در حال تکرار شدن است. به عنوان مثال ، می توانیم بررسی کنیم که آیا مورد دیگری در آرایه باقی مانده است یا خیر. بسته به نتیجه ، می توانیم مشخص کنیم که باید اتفاقات متفاوتی رخ دهد.

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

برای اینکه بتوانیم این کار را انجام دهیم ، باید در هر تکرار در مورد آرایه هدف اطلاعات کسب کنیم.

کد5

let competitors = ["Anna", "Beth", "Cara", "David"]

function displayWinners(name, index, array) {
    let isNextItem = index + 1 < array.length ? true : false
    if (isNextItem) {
    	console.log(`The No${index+1} winner is ${name}.`);
    } else {
    	console.log(`Sorry, ${name} is not one of the winners.`)
    }
}

competitors.filter((name, index, array) => displayWinners(name, index, array))

/*
"The No1 winner is Anna."
"The No2 winner is Beth."
"The No3 winner is Cara."
"Sorry, David is not one of the winners."
*/

برای مطالعه مقاله جاوااسکریپت چیست؟ بر روی لینک کلیک کنید

کلمات کلیدی:متد فیلتر در جاوااسکریپت،متد ()filter در جاوااسکریپت

مهدی صالحی

مهدی صالحی هستم برنامه نویس فرانت اند و توسعه دهنده اپ موبایل ؛ از تخصص هایی که من توی این دنیای برنامه نویسی کسب کردم میشه به : html&css , bootstrap , Sass , Flexbox , Javascript , jquery , React js , Vue js , React native , pwa اشاره کرد.
همچنین ببینید
بستن
دکمه بازگشت به بالا