Front-End جاوااسکریپت

۱۲ عملکرد مهم جاوا اسکریپت که هر توسعه دهنده وب باید بداند

0
Please log in or register to do it.

سلام دوستان👋 من امید مقدسی، امروز با ی مقاله خیلی باحال اومدم به خونه هاتون😎 امیدوارم که از این مقاله نهایت لذت رو ببرین و داخلش نکاتی رو یادبگیرین که باعث بشه هربار ازش استفاده کردین پیش خودتون بگین امد دمت گرم عجب چیزایی یادمون دادی.

خب بریم سراغ اینکه میخوام توی این مقاله چه چیزی رو یادتون بدم.

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

۱. console.log را کوتاه کنید.

خب بریم سراغ اولین نکته. تاحالا شده از نوشتن مدام console.log خسته شده باشین؟ خب اصلا نگران نباشید. با متد bind در جاوااسکریپت شما میتونید هم مدت تعریف شده جاوااسکریپت رو به هر متد دیگه ای که میخواین تبدیل کنید.

const log=console.log.bind(document);
log('امید مقدسی');
log('omoghadasi.ir');

از این روش برای هر متدی در جاوااسکریپت میتونید استفاده کنید.

۲. دو آرایه را در یک آرایه ادغام کنید

خب اولیش که عالی بود.مگه نه؟? خب پس بریم سراغ بعدی.

تاحالا شده توی کد هات بخوای که دوتا آرایه رو باهم دیگه ترکیب کنی و یک آرایه بسازی؟ بفرما اینم کدش. هلو برو تو گلو?

const array1=['One','Two'];
const array2=['Omid','Moghadasi','omoghadasi.ir'];
const mergerd=array1.concat(array2);
console.log(mergerd)
//['One','Two','Omid','Moghadasi','omoghadasi.ir']

خب بذاربن یکم این هلو رو بیشتر توضیح بدم. ما یک متد توی جاوااسکریپت داریم به اسم concat که میاد یک آرایه رو با ی آرایه تیگه ادغام یا merge میکنه به همین راحتی.

۳. دو شی را در یکی ادغام کنید

توی نکته قبلی اومدم گفتم چطور دوتا لیست رو با هم ترکیب کنیم و ذیک که بهتره آبجکت هارو هم بگم شاید لازمتون شد.

const user={
  name:'omid',
  family:'moghadasi'
};
const website={
  title:'omoghadasi',
  url:'omoghadasi.ir'
};
const mergerd={...user,...website};
console.log(mergerd)
/*{
  name:'omid',
  family:'moghadasi',
  title:'omoghadasi',
  url:'omoghadasi.ir'
}
*/

یعنی از این آسون تر مگه میشه که بشه؟ اگه بلدی آسون تر برامون کامنت کن.

۴. یک آرایه را کوتاه کنید

شاید خیلی وقت ها براتون پیش اومده باشه که بخواین آرایتون رو کوچیک کنید و مثلا ۵ تا عنصر اول آرایتون رو برگردونید.خب این پایین کدش رو میذارم برو لذتشو ببر.?

const array=['omid','moghadasi','omoghadasi.ir'];
console.log(array.length=2);
//['omid','moghadasi']

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

۵. یک آرایه را به هم بزنید

تاحالا شده بخواین مسابقه راه بندازین و از بین شرکت کننده هاتون یک نفر رو انتخاب کنید؟ پس اول باید لیستشون رو بهم بریزید و بعد ازش انتخاب کنید، برای رسیدن به این هدف می تونید از تابع Array.sort با یک compareFunction تصادفی استفاده کنید.

const array=['omid','moghadasi','omoghadasi.ir'];
array.sort(function(){return Math.random()-0.5})
console.log(array);

۶. از isNum برای تایید یک عدد استفاده کنید

با این تابع می توانید بررسی کنید که آیا یک مقدار یا متغیر یک عدد (int، float و غیره) است یا خیر. خیلی هم راحت.?

const isNum=number=>!isNaN(parseFloat(number))&& isFinite(number);
console.log(isNum(9))//true
console.log(isNum(9.8))//true
console.log(isNum("omoghadasi.ir"))//false

۷. از isStr برای تایید یک رشته استفاده کنید

با این تابع می توانید بررسی کنید که آیا یک مقدار یا متغیر در قالب رشته است یا خیر.

const isStr=value=>typeof value==='string';
console.log(isStr(true))//false
console.log(isNum(9.8))//false
console.log(isNum("omoghadasi.ir"))//true

۸. از isNull استفاده کنید

غالباً بررسی اینکه آیا نتیجه یا داده‌ها پوچ هستند مفید است.

const isNull=value=>value===null || value==undefined;
console.log(isNull(null))//true
console.log(isNull())//true
console.log(isNull(123))//false
console.log(isNull('123'))//false

۹. محاسبه عملکرد یک تابع

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

const start=performance.now();
//some program
const end=performance.now();
const total=start-end;
console.log('function takes: '+total+' ms');

۱۰. موارد تکراری را از یک آرایه حذف کنید

ما اغلب با یک آرایه با داده های تکراری در اون مواجه می شیم و از یک حلقه برای حذف موارد تکراری استفاده می کنیم. این تابع می تونه موارد تکراری را به روشی آسان و بدون استفاده از حلقه حذف کنه.

const delDuplicates=array=>[...new Set(array)]
console.log(delDuplicates([1,2,3,2,3,4,1,2,3,4,1,2,2]));
// output= [1,2,3,4]

۱۱. از AND/OR منطقی برای شرایط استفاده کنید

به جای استفاده از شرط if، می توانید از AND/OR منطقی استفاده کنید. این رو می تونین در یک تابع برای اجرای دستورات استفاده کنین.

const input=2;
input ===5 && console.log('is is 5');
input===5 || console.log('it is not 5')

۱۲. اپراتور سه تایی

اپراتور سه تایی خیلی خوبه. با عملگرهای سه تایی می‌توانید از شرط های تودرتوی بد ظاهر if..elseif..elseif جلوگیری کنید.

function temperature(temp) {
  return temp > ۳۹ || temp < 35.6
    ? "visit doctor!"
    : temp < 37.5 && temp > ۳۶.۵
    ? "go out and play"
    : temp <= 39 && temp >= ۳۵.۵
    ? "take some rest"
    : "";
}

console.log(temperature(38)); // take some rest
console.log(temperature(36)); // take some rest
console.log(temperature(39.1)); // visit doctor!
console.log(temperature(35.1)); // visit doctor!
console.log(temperature(37)); // go out and play

کلام آخر

امیدوارم این مقاله برای شما مفید باشه😍 اگر شما نیز توابع جاوا اسکریپت خوبی برای به اشتراک گذاشتن دارید، در اینجا نظر بدین و آنها را با سایر توسعه دهندگان به اشتراک بگذارید. ممنون بابت مطالعه این مقاله❤️‍🔥

اکمااسکریپت 2021 و ویژگی های جدید JS
شروع یک چالش بزرگ - قسمت دوم

منتخب سردبیر

این مطلب از نظر محتوا مورد تایید سردبیر قرار گرفته است.

Reactions

2
3

فعلا کسی لایک نکرده

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *