جاوا اسکریپت یک زبان شگفت انگیز است. در سال 2021 اگر شما هر نوع کار توسعه‌ای انجام میدهید که با مرورگرها یا استفاده از آنها در هر نقطه سر و کار داشته باشد، احتمالا با javascript در وب یا سرور یا حتی برنامه‌های تلفن همراه روبه رو شده‌اید.
در این مقاله در مورد 10 نکته برتر javascript صحبت می‌کنیم که به شما کمک می‌کند تا به یک توسعه دهنده بهتر تبدیل شوید.
1. یافتن زمان اجرای کد
به جای استفاده از روش‌های قدیمی برای یافتن مدت زمان استفاده از یک الگوریتم خاص یا یک قطعه کد میتوانید از ()console.time و ()console.timeEnd برای تعیین سرعت کد خود استفاده کنید. مزیتش این است که به صورت خودکار آن را در کنسول نمایش می‌دهد و به شما کمک می‌کند تایمرهای خود را در برنامه مدیریت کنید.
در اینجا یک مثال ساده از چگونگی دستیابی به این هدف در javascript آورده شده است. شما باید تایمر را با فراخوانی ()console.time شروع کرده و پس از اتمام قسمت اجرای کد، همیشه میتوانید ()console.timeEnd را فراخوانی کرده و در کنسول زمان اجرا آن را مشاهده کنید.
2. استفاده از متدهای آرایه ES6
بسیاری از افراد از برخی متدهای آرایه که از ES6 در دسترس هستند، استفاده نمی‌کنند مانند array.find ()، array.map ()، array.reduce ()، array.sum ()، array.filter ()، array . ()forEach و .... میتوانید همه کارهایی را که این متدها انجام می‌دهند با یک حلقه ساده انجام دهید، و سعی کنید همیشه از این متدهای کمکی بهره ببرید. زیرا کد شما را تمیز، مختصر و واضح نگه می‌دارند.
3. استفاده از async / await به جای promiseها
سعی کنید به جای promiseها از async / await استفاده کنید، زیرا از نظر ترکیبی ساده‌تر هستند.
مثال بالا را در مورد درخواست ساده واکشی در مواردی که به هدر‌ها و همچنین body نیاز دارید، در نظر بگیرید. بدون async / await مدیریت همه این مطالب در promiseها به یک خرابکاری تبدیل می‌شود اما با بهره گیری از آن نه تنها یک سینتکس بسیار تمیزتر خواهید داشت بلکه خواندن آن بسیار نیز آسان‌تر می‌شود. پس سعی کنید به جای promises.then() از async / await در هر کجا که میتوانید استفاده کنید، زیرا آنها معمولا جایگزینی برای promiseها هستند.
4- تبدیل APIهای callback به promiseها
اگر تابعی دارید که به جای promise، به callback احتیاج دارد، میتوانید با ایجاد یک تابع جدید که یک promise را برمی‌گرداند و در پاسخ برگشت حل می‌شود، به راحتی آن را به تابع promise تبدیل کنید (تابع callback یک تابع resolver است). هنگامی که یک نسخه promise از آن ایجاد کردید، میتوانید از همان قابلیت مشابه با async / await استفاده کنید.
5- استفاده از Destructuring
کد را تخریب کنید. این می‌تواند کمک کند تا سینتکس شما بسیار خلاصه و تمیز به نظر برسد.
نگاهی به این مثال بیندازید. شما میتوانید props.a ، props.b ، props.c را تا انتها انجام دهید یا حتی میتوانید آنها را در یک خط استخراج کرده یا از بین ببرید. به همین ترتیب با استفاده از آرایه‌ها میتوانید از یک روش مشابه برای خارج کردن عناصر جداگانه از یک آرایه خاص استفاده کنید، مانند مثالی که در زیر می بینید.
6. استفاده از Dynamic Key
آیا می دانید میتوانید از نام‌های کلید پویا استفاده کنید، یعنی نام کلید در واقع در متغیر است و سپس از آن به عنوان نام کلید در شی استفاده می‌شود. اگر از یک علامت براکت استفاده کنید و نام متغیر را قرار دهید، در javascript کاملا امکان پذیر است. هنگامی که این کار را انجام دادید، javascript به جای اینکه آن را به عنوان یک کلید عادی از آن مورد بررسی قرار دهد، سعی می‌کند مقدار آن متغیر را ارزیابی کرده و کلید را از آن استخراج کند. اکنون به یاد داشته باشید که قوانین کلید هنوز هم اعمال می‌شود که باید یک رشته باشد. این نمی‌تواند یک شی یا چیز دیگری باشد در غیر این صورت شما آن اسامی کلید عجیب و غریب را خواهید داشت.
7. استفاده از await سطح بالا
Await سطح بالا در NodeJS و Dino از قبل وجود دارد اما میتوانید از ابزار سطح بالا در ابزارهای توسعه یافته کروم نیز استفاده کنید. هنگامی که شما فقط یک درخواست سریع برای واکشی می‌خواهید و به جای اینکه فقط متدهای ()then. را اضافه کنید و ببینید پاسخ چیست، نتیجه را می‌بینید.
8. استفاده از کلمه کلیدی let
میتوانید از کلمه کلیدی let چندین بار در ابزار chrome dev استفاده کنید.
9. استفاده از set
برای بهبود عملکرد و کارایی برنامه خود میتوانید از set به عنوان ساختار داده بهره بگیرید. همچنین برای از بین بردن عناصر تکراری نیز میتوانید از set استفاده کنید. میتوانید مجموعه را دوباره به آرایه تغییر دهید یا آرایه‌ای را به مجموعه تبدیل کنید و انواع و اقسام کارهای جالب دیگر را انجام دهید.
این یک مثال ساده از چگونگی تبدیل آرایه‌ای با مقادیر متعدد به مجموعه‌ای است که مقادیر منحصر به فرد داشته و دوباره به آرایه‌ای که مقادیر منحصر به فرد دارد تبدیل می‌شود.
10. استفاده از windows.matchMedia
این یک متد بسیار مفید برای استفاده از مدیا کوئری‌های css در داخل javascript است. در اینجا یک مورد جالب استفاده از مدیا کوئری آورده شده است که میتوانید از javascript برای گوش دادن به یک breakpoint در 768 پیکسل استفاده کنید.
به عنوان مثال، این مدیا کوئری breakpoint در هنگام اتصال به یک شنونده، تابع javascript را هر بار که مدیا کوئری اجرا می‌شود، فعال می‌کند. مزیتش این است که شما میتوانید کوئری‌های بسیار پیچیده‌تر و پرس و جوهای پیچیده‌ای مانند میکس کردن و همخوانی عرض و جهت‌ها را بسازید که در javascript انجام نمی‌شود.
باید بدانید که مدیا کوئری‌ها در کروم حدود 3-5 برابر کندتر در مقایسه با عرض داخلی هستند. اگر کد شما از مدیا کوئری‌ها به روش بهتر و سریع‌تری بهره می‌گیرد، استفاده از آن بسیار موجه‌تر و معقول‌تر است.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید