17 نکته بهینه‌ سازی Javascript که باید در سال 2021 بدانید

ممکن است که زمان زیادی باشد که برای توسعه از  Javascript استفاده می‌کنید، اما این امکان دارد که گاهی اوقات با جدیدترین ویژگی‌های زیبایی که Javascript ارائه می‌دهد و بدون نوشتن کدهای اضافی که می‌تواند مشکلات شما را حل کند‌، به روز نشوید. این تکنیک‌ها می‌توانند به شما در نوشتن کد javascript تمیز و بهینه شده کمک کنند. همچنین، این موضوعات می‌تواند به شما کمک کنند تا خود را برای مباحث JavaScript در سال 2021 آماده کنید.

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

1. If با چند شرط باشد

ما می‌توانیم مقادیر مختلفی را در آرایه ذخیره کنیم و می‌توانیم از متد آرایه استفاده کنیم.

//longhand
if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {
    //logic
}
//shorthand
if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {
   //logic
}

2. خلاصه نویسی If true … else

این خلاصه نویسی بهتری برای زمانی است که if-else داشته باشیم که منطق بزرگتر در آن نباشد. برای دستیابی به این خلاصه نویسی می‌توانیم به راحتی از عملگرهای سه گانه استفاده کنیم.

// Longhand
let test= boolean;
if (x > 100) {
    test = true;
} else {
    test = false;
}
// Shorthand
let test = (x > 10) ? true : false;
//or we can simply use
let test = x > 10;
console.log(test);

پس از تودرتو نویسی شروط نتیجه حاصل به این صورت می‌شود:

let x = 300,
let test2 = (x > 100) ? 'greater 100' : (x < 50) ? 'less 50' : 'between 50 and 100';
console.log(test2); // "greater than 100"

Null, Undefined, Empty Checks. 3

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

// Longhand
if (first !== null || first !== undefined || first !== '') {
    let second = first;
}
// Shorthand
let second = first|| '';

4. بررسی ارزش Null و اختصاص مقدار پیش فرض

let first = null,
let second = first || '';
console.log("null check", test2); // output will be ""

5.‌ Checkهای مقدار تعریف نشده و اختصاص مقدار پیش فرض

let first= undefined,
let second = first || '';
console.log("undefined check", test2); // output will be ""

6. خلاصه حلقه foreach

این یک خلاصه نویسی مفید برای تکرار است

// Longhand
for (var i = 0; i < testData.length; i++)

// Shorthand
for (let i in testData) or  for (let i of testData)

آرایه برای هر متغیر

function testData(element, index, array) {
  console.log('test[' + index + '] = ' + element);
}

[11, 24, 32].forEach(testData);
// prints: test[0] = 11, test[1] = 24, test[2] = 32

7. مقایسه returnها

با استفاده از مقایسه در عبارت Return از 5 خط کد ما جلوگیری کرده و آنها را به 1 خط کاهش می‌دهیم.

// Longhand
let test;
function checkReturn() {
    if (!(test === undefined)) {
        return test;
    } else {
        return callMe('test');
    }
}
var data = checkReturn();
console.log(data); //output test
function callMe(val) {
    console.log(val);
}
// Shorthand
function checkReturn() {
    return test || callMe('test');
}

8. تابع calling کوتاه

ما می‌توانیم با استفاده از این نوع توابع ternary operator را بدست آوریم

// Longhand
function test1() {
  console.log('test1');
};
function test2() {
  console.log('test2');
};
var test3 = 1;
if (test3 == 1) {
  test1();
} else {
  test2();
}
// Shorthand
(test3 === 1? test1:test2)();

9. خلاصه نویسی Switch

ما می‌توانیم شروط داخل key-value آبجکت‌ها را ذخیره کنیم و می‌توانیم براساس شروط عمل کنیم.

// Longhand
switch (data) {
  case 1:
    test1();
  break;

  case 2:
    test2();
  break;

  case 3:
    test();
  break;
  // And so on...
}

// Shorthand
var data = {
  1: test1,
  2: test2,
  3: test
};

data[anything] && data[anything]();

10. خلاصه نویسی رشته چند خطی

هنگامی که با یک رشته چند خطی در کد مواجه هستیم‌، می‌توانیم این کار را انجام دهیم:

//longhand
const data = 'abc abc abc abc abc abc\n\t'
    + 'test test,test test test test\n\t'
//shorthand
const data = `abc abc abc abc abc abc
         test test,test test test test`

11. خلاصه نویسی Return بدون شرط

با استفاده از توابع پیکان‌(arrow)، می‌توانیم مقدار را مستقیماً برگردانیم بدون اینکه نیازی به نوشتن دستور Return داشته باشیم.

Longhand:
//longhand
function getArea(diameter) {
  return Math.PI * diameter
}
//shorthand
getArea = diameter => (
  Math.PI * diameter;
)

12. خلاصه نویسی شروط جستجو

اگر کدی برای بررسی نوع کد داریم و بر اساس نوع نیاز به روشهای مختلف فراخوانی‌، ما گزینه‌‌‌ای برای استفاده از چندین else ifs داریم یا اینکه به سراغ switch برویم‌، اما اگر کوتاه نویسی بهتر از این داشته باشیم چه؟

// Longhand
if (type === 'test1') {
  test1();
}
else if (type === 'test2') {
  test2();
}
else if (type === 'test3') {
  test3();
}
else if (type === 'test4') {
  test4();
} else {
  throw new Error('Invalid value ' + type);
}
// Shorthand
var types = {
  test1: test1,
  test2: test2,
  test3: test3,
  test4: test4
};

var func = types[type];
(!func) && throw new Error('Invalid value ' + type); func();

Object.entries().13

این ویژگی به تبدیل آبجکت به مجموعه‌ای از آبجکت کمک می‌کند

const data = { test1: 'abc', test2: 'cde', test3: 'efg' };
const arr = Object.entries(data);
console.log(arr);
/** Output:
[ [ 'test1', 'abc' ],
  [ 'test2', 'cde' ],
  [ 'test3', 'efg' ]
]
**/

Object.values().14

این همچنین ویژگی جدیدی است که در ES8 معرفی شده و عملکردی مشابه با Object.entries() را انجام می دهد‌، اما بدون قسمت اصلی:

const data = { test1: 'abc', test2: 'cde' };
const arr = Object.values(data);
console.log(arr);
/** Output:
[ 'abc', 'cde']
**/

15. یک رشته را چند بار تکرار کنید

برای تکرار مجدد کاراکترها بارها و بارها می‌توانیم از حلقه for استفاده کنیم و آنها را در همان حلقه اضافه کنیم اما اگر برای این کار خلاصه نویسی داشته باشیم چه می‌کنیم؟

//longhand 
let test = ''; 
for(let i = 0; i < 5; i ++) { 
  test += 'test '; 
} 
console.log(str); // test test test test test 
//shorthand 
'test '.repeat(5);

16. خلاصه نویسی powere

خلاصه نویسی برای بیان ریاضی تابع power:

//longhand
Math.pow(2,3); // 8
//shorthand
2**3 // 8

17. جدا کننده‌های اعداد

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

//old syntax
let number = 98234567

//new syntax
let number = 98_234_567

اگر می‌خواهید خود را با آخرین ویژگی‌های جدیدترین نسخه javascript (ES2021/ES12) به روز کنید‌، موارد زیر را بررسی کنید:

1. replaceAll() : رشته جدیدی را با تمام مطابقت‌های الگویی که با کلمه جایگزین جدید جایگزین شده است‌، برمی‌گرداند.

2. ()Promise.any: آبجکت‌های Promise قابل تکرار است و با  انجام یک Promise، یک Promise واحد با ارزش را برگردانید.

3. weakref: این آبجکت یک مرجع ضعیف(weak reference) به آبجکت دیگر بدون جلوگیری از جمع‌آوری زباله دارد.

4. FinalizationRegistry: به شما امکان می‌دهد در صورت جمع آوری زباله‌ها یک شی call را درخواست کنید.

5. Private visibility: اصلاح کننده برای متدها و accessorها: Private method را می‌توان با # اعلام کرد.

6. اپراتورهای منطقی: && و || اپراتورها

7. Intl.ListFormat: این آبجکت قالب بندی لیست حساس به زبان را امکان پذیر می‌کند.

8. Intl.DateTimeFormat: این آبجکت قالب بندی تاریخ و زمان حساس به زبان را امکان پذیر می‌کند.

نتیجه گیری

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

منبع