شنبه ۰۱ شهریور ۰۴

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

۱۲۱ بازديد

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

همانندی های در بین map و filter

هرمورد از سیاق های map و filter در موقعیت معمولی یک فانکشن تحت عنوان ورودی از ما اخذ کرده و آن را به ازای تعداد مورد های آرایه تکرار می نمایند. پس در معمولی ترین موقعیت یک رینگ (loop) به اکانت در میان.
به کد های پایین اعتنا فرمایید:

let scores = [12, 90, 14, 72, 89, 51]

scores.map(function () {
console.log('SabzLearn')
})

scores.filter(function () {
console.log('SabzLearn')
})
در هر دو تکه کد های بالا، مقدار SabzLearn به تعداد 6 توشه (length ارایه scores) در console نشان داده می شود.
پس هر دوی آنها در شرایط معمولی یک فانکشن را به ازای تعداد مورد های آرایه گزینه نظرمان تکرار می نمایند، البته کاربرد تماما متفاوتی دارا هستند.

تشابه آینده آنها در ورودی هایشان میباشد. همانطور که متوجه شدید، مشی های map و filter یک فانکشن را تحت عنوان ورودی اخذ کرده و آن را به ازای تعداد گزینه های باطن آرایه تکرار می نماید.
یعنی در نمونه بالا، کد console.log یک توشه به ازای 12، یک توشه به ازای 90، یک توشه به ازای 14 و … در غایت یک توشه هم به ازای 51 انجام می‌شود.
درحال حاضر ممکن میباشد در هر وهله تکرار، قصد داشته باشیم به خویش مقدار آن مورد از آرایه (یعنی 12، 90 و …) نیز درون فانکشن دسترسی داشته باشیم.
در‌این‌حالت‌ یک ورودی با نام دلخواه به فانکشن ارسال میکنیم و در هر توشه تکرار کد های باطن فانکشن، درون به عبارتی ورودی به مقدار مورد فعلی آرایه دسترسی داریم.
یعنی نوبت نخستین که تابع اعمال می‌گردد، مقدار 12 از آرایه scores به تابع پاس داده میگردد، در اجرای آتی مقدار 90 و … تازمانیکه به آخرین اندازه از آرایه برسیم. (در صورتی‌که قسمتی از توضیحات برای شما نا مفهوم بود، لطفا به ویدئوی همین نوشته‌ی‌علمی رجوع کنید)

از جمله:

let scores = [12, 90, 14, 72, 89, 51]

scores.map(function (score) {
console.log(score) // 12 90 14 72 89 51
})

scores.filter(function (score) {
console.log(score) // // 12 90 14 72 89 51
})
همانطور که مشاهده میکنید، یک ورودی به نام score به فانکشن ورودی map و filter ارسال کرده ایم. در وهله نخستین که فانکشن انجام می گردد، مورد اولیه از آرایه scores (مقدار 12) در ورودی score قرار گرفته و باطن فانکشن گزینه به کارگیری قرار میگیرد. در وهله دوم اجرای فانکشن، گزینه آینده آرایه scores (مقدار 90) به آن ارسال میگردد و درون فانکشن همین ورودی (مقدار 90) log گرفته میگردد.

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



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



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

مثلا یک آرایه ای به نام scores (امتیازها) دارید که 5 عدد داخلش ذخیره گردیده و شما می‌خواهید کل امتیاز ها را در عدد 2 ضرب فرمائید. در همچین حالتی از اسلوب map در جاوا اسکریپت به کار گیری میکنیم.
دقیقا مثل تکه کد تحت:

scores.map(function (score) {
return score * 2
})
به همین راحتی می‌توانیم مجموع گزینه های آرایه scores را در عدد 2 ضرب کنیم. البته همان گونه که از کد بالا معین میباشد، باطن فانکشن دیتایی return می گردد البته سود آن را در هیچ متغیری ذخیره نکردیم! یعنی فیض و خروجی روال map رو هواست!
برای همین می بایست خروجی سیاق map را درون متغیری در اختیار بگذاریم.
طبق کد پایین فعالیت می‌کنیم:

let scores = [12, 90, 14, 72, 89, 51]

let doubleNumbers = scores.map(function (score) {
return score * 2
})

console.log(doubleNumbers) // [24, 180, 28, 144, 178, 102]
همانطور که مشاهده میکنید، خروجی اسلوب map را درون متغیری به نام doubleNumbers ذخیره کرده و در خط آجل آن را log گرفتیم.
اساسا روال map آرایه scores را بازنویسی نمی نماید. بلکه کل مورد های آرایه scores را در عدد 2 ضرب کرده و فیض آن‌ها‌را باطن آرایه ای ذخیره کرده و return می نماید.
به همین راحتی یک آرایه ای داریم به نام doubleNumbers که گزینه های آن ضرب مورد های آرایه score در عدد 2 می باشند.

کاربرد سیاق filter در جاوا اسکریپت
همانگونه که از معنا کلمه و واژه filter مشخص و معلوم میباشد، وقتی از مشی filter استعمال میکنیم که قصد داشته باشیم تعدادی آیتم از مورد های آرایه را پایین وضعیت دلخواه و خاصی غربال کنیم (یعنی برداریم).
به تصویر ذیل توجه فرمائید:



فرض نمائید میوه های سمت چپ به عبارتی گزینه های آرایه آیتم نظرمان می‌باشند و ما می‌خواهیم میوه هایی از آرایه که رنگ آنها قرمز رنگ می باشند را غربال کنیم (برداریم). در همچین مواردی از مشی filter در جاوا اسکریپت استعمال میکنیم.

سینتکس و طرز تایپ کردن اسلوب filter دقیقا مثل مشی map میباشد که یک فانکشن را تحت عنوان ورودی اخذ کرده و مجموع مورد های آرایه گزینه نظرمان را نیز تحت عنوان ورودی فانکشن در لحاظ می‌گیرد و آن‌گاه آنان‌را (گزینه ها) با شرط باطن فانکشن مقایسه می نماید و هرمورد از آن‌ها که شرط متبوع ما برای غربال شدن را داشتند، آن‌ها دقیقا مثل map در پوسته یک آرایه در مشت با قرار می‌دهد.

مثلا طبق کدی تحت، آرایه scores را در حیث بگیرید. حالا قصد داریم امتیاز هایی که بالای 75 می باشند را غربال کنیم.
در همچین حالتی طبق کد پایین شغل می‌کنیم:

let scores = [12, 90, 14, 72, 89, 51]

let filteredScores = scores.filter(function (score) {
return score > 75
})

console.log(filteredScores) // [90, 89]
همانطور که مشاهده می‌کنید، باطن فانکشن ورودی اسلوب filter آن گروه از score هایی که از 50 بیشتر باشند را return کرده ایم.
آحاد گزینه های آرایه scores به ترتیب وارد فانکشن گردیده و گزینه نظارت قرار می‌گیرند و هریک از آن‌ها که در مقایسه با شرط آیتم نظرمان true باشند، به عبارتی score برای ما return و غربال میگردد و در غایت باطن آرایه filteredScores به کل گزینه های والا خیس از 50 آرایه scores دسترسی داریم.
تا كنون نظري ثبت نشده است
ارسال نظر آزاد است، اما اگر قبلا در فارسی بلاگ ثبت نام کرده اید می توانید ابتدا وارد شوید.