نحوه استفاده از نقشه، فیلتر و کاهش در جاوا اسکریپت

Peleke Sengstacke آخرین به روز رسانی در 16 اکتبر 2021

برنامه نویسی کاربردی این روزها در دنیای توسعه سر و صدای زیادی به پا کرده است. و دلیل خوبی دارد: تکنیک های عملکردی می توانند به شما کمک کنند تا کد اعلامی بیشتری بنویسید که در یک نگاه ساده تر قابل درک باشد، بازساز و آزمایش شود.

یکی از پایه های برنامه نویسی تابعی استفاده ویژه آن از لیست ها و عملیات لیست است. این چیزها دقیقاً همان چیزی است که به نظر می رسد: آرایه هایی از چیزها و کارهایی که با آنها انجام می دهید. اما طرز فکر عملکردی با آنها کمی متفاوت از آنچه انتظار دارید رفتار می کند.

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

کنجکاو؟بیایید شیرجه بزنیم

نقشه از فهرست به فهرست

اغلب، ما نیاز داریم که یک آرایه را بگیریم و هر عنصر موجود در آن را دقیقاً به همان روش اصلاح کنیم. نمونه های معمولی این کار عبارتند از: مربع کردن هر عنصر در آرایه ای از اعداد، بازیابی نام از فهرستی از کاربران، یا اجرای یک regex در برابر آرایه ای از رشته ها.

نقشه روشی است که دقیقاً برای این کار ساخته شده است. در Array. prototype تعریف شده است، بنابراین شما می توانید آن را در هر آرایه ای فراخوانی کنید، و آن یک callback را به عنوان اولین آرگومان خود می پذیرد.

نحو برای نقشه در زیر نشان داده شده است.

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

در زیر هود، نقشه سه آرگومان را به callback شما ارسال می کند:

1. مورد فعلی در آرایه
2. شاخص آرایه مورد فعلی
3. کل آرایه ای که نقشه را روی آن فراخوانی کردید

بیایید به چند کد نگاه کنیم.

نقشه در عمل

فرض کنید ما یک برنامه داریم که مجموعه ای از وظایف شما را برای روز نگه می دارد. هر وظیفه یک شی است که هر کدام دارای یک نام و ویژگی مدت زمان هستند:

فرض کنید می خواهیم یک آرایه جدید فقط با نام هر کار ایجاد کنیم، بنابراین می توانیم به تمام کارهایی که امروز انجام داده ایم نگاهی بیندازیم. با استفاده از یک حلقه for، چیزی شبیه به این می نویسیم:

جاوا اسکریپت همچنین یک حلقه forEach ارائه می دهد. این شبیه به یک حلقه for عمل می کند، اما تمام مشکلات بررسی شاخص حلقه ما در برابر طول آرایه را برای ما مدیریت می کند:

با استفاده از نقشه، می توانیم به سادگی بنویسیم:

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

یک روش کوتاه تر برای نوشتن نقشه در JavaScript مدرن با توابع فلش است.

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

چند تفاوت مهم بین رویکردهای مختلف وجود دارد:

1. با استفاده از نقشه ، لازم نیست خود را برای حلقه حلقه مدیریت کنید.
2. با MAP ، می توانید به جای اینکه مجبور شوید به آرایه بپیوندید ، مستقیماً روی عنصر کار کنید.
3. لازم نیست آرایه جدیدی ایجاد کنید و به آن فشار دهید. MAP محصول نهایی را با یک حرکت باز می گرداند ، بنابراین می توانیم مقدار بازگشت را به یک متغیر جدید اختصاص دهیم.
4. شما باید به یاد داشته باشید که یک بیانیه بازگشت را در پاسخ به تماس خود درج کنید. اگر این کار را نکنید ، یک آرایه جدید پر از تعریف نشده دریافت خواهید کرد.

معلوم است ، تمام کارکردهایی که امروز به آنها نگاه خواهیم کرد ، این خصوصیات را به اشتراک می گذاریم.

این واقعیت که ما نیازی به مدیریت دستی وضعیت حلقه نداریم ، کد ما را ساده تر و حفظ می کند. این واقعیت که ما می توانیم به جای اینکه بخواهیم به آرایه بپردازیم ، مستقیماً روی عنصر کار کنیم ، امور را قابل خواندن تر می کند.

استفاده از یک حلقه foreach هر دو این مشکلات را برای ما حل می کند. اما نقشه هنوز حداقل دو مزیت مشخص دارد:

1. Foreach به صورت نامشخص باز می گردد ، بنابراین با سایر روش های آرایه زنجیره ای نیست. MAP یک آرایه را برمی گرداند ، بنابراین می توانید آن را با سایر روش های آرایه زنجیر کنید.
2. نقشه به جای اینکه ما را ملزم به جهش یک آرایه در داخل حلقه کند ، یک آرایه را با محصول نهایی باز می گرداند.

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

گودال

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

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

خوشبختانه ، این تنها Gotcha با نقشه است. اما این یک خطای به اندازه کافی مشترک است که من موظف به تأکید آن هستم: همیشه مطمئن شوید که پاسخ تماس شما حاوی بیانیه بازگشت است!

پیاده سازی

اجرای اجرای بخش مهمی از درک است. بنابراین بیایید نقشه سبک وزن خودمان را بنویسیم تا بهتر درک کنیم که در زیر کاپوت چه می گذرد. اگر می خواهید یک اجرای با کیفیت تولید را ببینید ، Polyfill Mozilla را در MDN بررسی کنید.

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

در حالی که ما از یک حلقه برای زیر کاپوت استفاده می کنیم ، پیچیدن آن در یک عملکرد ، جزئیات را پنهان می کند و به ما اجازه می دهد به جای آن با انتزاع کار کنیم.

این باعث می شود کد ما اعلامی تر شود - می گوید چه کاری باید انجام دهیم ، نه چگونه این کار را انجام دهیم. شما قدردانی خواهید کرد که چقدر قابل خواندن ، نگهداری و ERM ، اشکال زدایی این می تواند کد شما را ایجاد کند.

سر و صدا را فیلتر کنید

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

نحو برای فیلتر:

درست مانند MAP ، فیلتر سه آرگومان پاسخ به تماس شما را پشت سر می گذارد:

1. مورد فعلی
2. شاخص فعلی
3. آرایه ای که شما فیلتر نامیدید

مثال زیر را در نظر بگیرید که هر رشته ای را که کمتر از 8 نویسه است ، فیلتر می کند.

نتیجه مورد انتظار خواهد بود:

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

با استفاده از foreach ، ما می نویسیم:

با فیلتر ، ما به سادگی می توانیم بنویسیم:

درست مانند نقشه ، فیلتر به ما امکان می دهد:

• از جهش یک آرایه در داخل یک پیشانی یا حلقه خودداری کنید
• نتیجه خود را مستقیماً به یک متغیر جدید اختصاص دهید ، به جای فشار دادن به آرایه ای که در جای دیگر تعریف کردیم

گودال

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

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

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

همیشه اطمینان حاصل کنید که تماس های تماس شما شامل یک بیانیه بازگشت صریح است. و همیشه اطمینان حاصل کنید که تماس های تماس شما در فیلتر درست یا نادرست است. عقل شما از شما متشکرم

پیاده سازی

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

روش کاهش

نحو برای روش کاهش آرایه در JavaScript عبارت است از:

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

دقیقاً مانند MAP و FILTER ، کاهش در آرایه تعریف شده است. پروتوتیپ و در هر آرایه ای در دسترس است و شما به عنوان اولین آرگومان ، پاسخ به تماس می گیرید. اما این یک استدلال دوم نیز طول می کشد: مقدار شروع به ترکیب همه عناصر آرایه خود در.

کاهش پاسخ به تماس خود چهار آرگومان:

1. مقدار فعلی
2. مقدار قبلی
3. شاخص فعلی
4. آرایه ای که شما نامیدید کاهش می یابد

توجه کنید که پاسخ به تماس در هر تکرار مقدار قبلی را دریافت می کند. در اولین تکرار ، هیچ مقدار قبلی وجود ندارد. به همین دلیل شما گزینه ای را برای کاهش مقدار اولیه دارید: این به عنوان "مقدار قبلی" برای اولین تکرار عمل می کند ، هنگامی که در غیر این صورت یکی از آنها نخواهد بود.

سرانجام ، در نظر داشته باشید که کاهش یک مقدار واحد را کاهش می دهد ، نه آرایه ای که حاوی یک مورد واحد باشد. این مهمتر از آن است که به نظر برسد ، و من در مثالها به آن باز می گردم.

در عمل کاهش دهید

بیایید بگوییم که می خواهید لیست لیست اعداد را پیدا کنید. با استفاده از یک حلقه ، به نظر می رسد:

در حالی که این یک مورد استفاده بد برای Foreach نیست ، اما کاهش هنوز این مزیت را دارد که به ما اجازه می دهد از جهش جلوگیری کنیم. با کاهش ، ما می نوشتیم:

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

با توابع فلش ، ما آن را اینگونه می نوشتیم:

اگر آن را قدم به قدم برداریم ، به نظر می رسد:

اگر طرفدار جداول نیستید ، این قطعه را در کنسول اجرا کنید:

برای recap: تکرار تکرار بیش از همه عناصر یک آرایه ، با هم ترکیب آنها در پاسخ به تماس خود. در هر تکرار ، پاسخ به تماس شما به مقدار قبلی دسترسی دارد ، که مقدار کل آن یا مقدار انباشته شده است. مقدار فعلی ؛شاخص فعلی ؛و در صورت نیاز به کل آرایه.

بیایید به مثال وظایف خود برگردیم. ما لیستی از نام کار را از MAP دریافت کرده ایم و لیست فیلتر شده ای از وظایف که مدت زمان طولانی با آن طول کشید. خوب ، فیلتر کنید.

چه می شود اگر می خواستیم کل زمانی را که امروز صرف کار کردیم بدانیم؟

با استفاده از یک حلقه foreach ، می نویسید:

با کاهش ، این می شود:

این تقریباً همه چیز در آن است. تقریباً ، زیرا JavaScript یک روش کمی شناخته شده دیگر به نام Creatuceright را برای ما فراهم می کند. در مثالهای بالا ، کاهش در اولین مورد در آرایه شروع شده و از چپ به راست تکرار می شود:

RESUCERIGHT همان کار را انجام می دهد ، اما در جهت مخالف:

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

گودال

سه Gotchas بزرگ با کاهش عبارتند از:

1. فراموش کردن بازگشت
2. فراموش کردن یک مقدار اولیه
3. انتظار یک آرایه هنگام کاهش یک مقدار واحد است

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

آخرین مورد ممکن است کمی عجیب به نظر برسد. اگر کاهش فقط یک ارزش واحد را برگرداند ، چرا انتظار یک آرایه را دارید؟

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

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

پیاده سازی

زمان آخرین نگاه ما در زیر کاپوت است. طبق معمول ، اگر می خواهید آن را بررسی کنید ، Mozilla دارای یک پلی ضد گلوله برای کاهش است.

دو نکته که در اینجا باید توجه داشته باشید:

1. این بار ، من به جای قبلی از باتری نام استفاده کردم. این همان چیزی است که شما معمولاً در طبیعت مشاهده خواهید کرد.
2. اگر کاربر یکی از آنها را فراهم کند ، و اگر نه ، به یک مقدار اولیه اختصاص می دهم. اینگونه است که کاهش واقعی رفتار می کند.

جمع کردن آن: نقشه ، فیلتر ، کاهش و قابلیت زنجیره ای

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

بیایید بگوییم من می خواهم موارد زیر را انجام دهم:

1. دو روز کار را جمع کنید.
2. به جای چند دقیقه ، مدت زمان کار را به ساعت ها تبدیل کنید.
3. هر آنچه را که دو ساعت یا بیشتر طول کشید ، فیلتر کنید.
4. خلاصه همه
5. نتیجه را با نرخ هر ساعت برای صورتحساب ضرب کنید.
6. یک مبلغ دلار فرمت شده.

اول ، بیایید وظایف خود را برای دوشنبه و سه شنبه تعریف کنیم:

و اکنون ، تحول دوست داشتنی ما:

اگر تاکنون این کار را کرده اید ، این باید بسیار ساده باشد. دو بیت عجیب و غریب برای توضیح وجود دارد.

اول ، در خط 10 ، باید بنویسم:

دو مورد برای توضیح در اینجا:

1. علائم به علاوه در مقابل باتری و جریان مقادیر آنها را به اعداد وادار می کند. اگر این کار را نکنید ، مقدار بازگشت رشته نسبتاً بی فایده ، "12510075100" خواهد بود.
2. اگر این مبلغ را در براکت ها بسته بندی نکنید ، کاهش یک مقدار واحد را تفکیک می کند ، نه یک آرایه. این به پایان می رسد که یک نوع Typeerror را پرتاب می کند ، زیرا شما فقط می توانید از نقشه روی یک آرایه استفاده کنید!

بیت دوم که ممکن است شما را کمی ناراحت کننده کند ، آخرین کاهش است ، یعنی:

این تماس برای نقشه یک آرایه حاوی یک مقدار واحد را برمی گرداند. در اینجا ، ما برای بیرون کشیدن این مقدار تماس می گیریم.

در آخر ، بیایید ببینیم که چگونه دوست ما حلقه Foreach این کار را انجام می دهد:

قابل تحمل ، اما پر سر و صدا.

نتیجه گیری و مراحل بعدی

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

در حال حاضر ، من مطمئن هستم که شما مشتاق تمرین و خواندن بیشتر هستید. برای یک کارشناسی ارشد در برنامه نویسی کاربردی در JavaScript ، دوره آنلاین ما را بررسی کنید.