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

طبق گفته RedMonk، جاوااسکریپت یکی از محبوب‌ترین زبان‌های برنامه‌نویسی است. این یعنی توسعه‌دهندگان بسیاری از جاوااسکریپت استفاده می‌کنند.

1. استفاده از میانبرها (Shortcut) برای شرط‌ ها

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

بیاید عملگر && را در عمل بررسی کنیم.

مثال:

// instead of
if (accessible) {
  console.log("It’s open!");
}

// use
accessible && console.log("It’s open!");

عملگر || به عنوان دستور "or" عمل می‌کند. حالا استفاده از این عملگر کمی مهارت می‌خواهد زیرا می‌تواند از اجرای برنامه جلوگیری کند. با این حال می‌توانیم شرطی را برای دور زدن آن اضافه کنیم.

مثال:

// instead of
if (price.data) {
  return price.data;
} else {
  return 'Getting the price’';
}

// use
return (price.data || 'Getting the price');

2. نحوه تبدیل کردن به بزرگ‌ترین Integer با استفاده از عملگر ~~

استفاده از Math.floor برای برگرداندن بزرگ‌ترین عدد صحیح (Integer) که در یک عبارت کمتر مساوی با یک عدد مشخص است منابع را می‌گیرد، نیازی به ذکر نیست که این یک رشته نسبتا طولانی است که باید در خاطر داشته باشید. یک روش کارآمدتر استفاده از عملگر ~~ است.

مثالی در اینجا آورده شده است:

// instead of
Math.floor(Math.random() * 50);

// use
~~(Math.random() * 50);

// You can also use the ~~ operator to convert anything into a number value.
// Example snippet:
~~('whitedress') // returns 0
~~(NaN) // returns 0

3. تغییر اندازه یا خالی کردن آرایه با استفاده از array.length

گاهی اوقات شما باید اندازه آرایه خود را تنظیم کنید یا آن را خالی کنید. کارآمدترین روش برای انجام این کار استفاده از array.length است.

مثال:

let array = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];

console.log(array.length); // returns the length as 10

array.length = 4;

console.log(array.length); // returns the length as 4
console.log(array); // returns ['a', 'b', 'c', 'd']

شما همچنین می‌توانید از array.length برای حذف همه مقادیر از یک آرایه مشخص استفاده کنید.

مثال:

let array = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];

array.length = 0;

console.log(array.length); // returns the length as 0
console.log(array); // returns []

4. نحوه ادغام آرایه‌ها بدون اینکه موجب سربار سرور شود

هنگام ادغام آرایه‌ها ممکن است فشار جدی روی سرور باشد، به خصوص اگر با مجموعه داده‌های بزرگ سر و کار دارید. برای ساده نگه داشتن کارها و حفظ عملکرد، از توابع Array.concat() و Array.push.apply(arr1, arr2) استفاده کنید.

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

بیایید ببینیم چطور با آرایه‌های کوچک‌تر سر و کار داشته باشیم.

مثال:

let list1 = ['a', 'b', 'c', 'd', 'e'];
let list2 = ['f', 'g', 'h', 'i', 'j'];

console.log(list1.concat(list2)); // returns the merged values of both arrays, ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']

هنگام استفاده از تابع Array.concat() در مجموعه داده‌های بزرگ‌تر، در حالی که یک آرایه جدید ساخته می‌شود حافظه زیادی را مصرف می‌کند. برای دور زدن افت عملکرد، از Array.push.apply(arr1, arr2) استفاده کنید که آرایه دوم را در آرایه اول بدون ایجاد یک آرایه جدید ادغام می‌کند.

مثال:

let list1 = ['a', 'b', 'c', 'd', 'e'];
let list2 = ['f', 'g', 'h', 'i', 'j'];

console.log(list1.push.apply(list1, list2)); // returns 10, the new length of list1
console.log(list1); // returns ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']

5. چطور از فیلترها با آرایه‌ها استفاده کنیم

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

برای فیلتر کردن آرایه از تابع filter() استفاده کنید.

مثال:

const cars = [
  { make: 'Opel', class: 'Regular' },
  { make: 'Bugatti', class: 'Supercar' },
  { make: 'Ferrari', class: 'Supercar' },
  { make: 'Ford', class: 'Regular' },
  { make: 'Honda', class: 'Regular' },
]
const supercar = cars.filter(car => car.class === 'Supercar');
console.table(supercar); // returns the supercar class data in a table format

همچنین می‌توانید از filter() همراه با Boolean استفاده کنید تا همه مقادیر null یا undefined را از آرایه خود حذف کنید.

مثال:

const cars = [
  { make: 'Opel', class: 'Regular' },
  null,
  undefined
]

cars.filter(Boolean); // returns [{ make: 'Opel', class: 'Regular' }] 

6. نحوه استخراج مقادیر منحصربه‌فرد

فرض کنید یک مجموعه داده از مقادیر تکراری دارید و باید مقادیر منحصربه‌فردی را از این مجموعه تولید کنید. شما می‌توانید این کار را با ترکیبی از سینتکس ... و نوع آبجکت Set انجام دهید. این رویکرد هم با اعداد و هم با کلمات کارمی‌کند.

مثال:

const cars = ['Opel', 'Bugatti', 'Opel', 'Ferrari', 'Ferrari', 'Opel'];
const unrepeated_cars = [...new Set(cars)];

console.log(unrepeated_cars); // returns the values Opel, Bugatti, Ferrari

7. نحوه استفاده از تابع Replace

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

برای اینکه بتوانید راحت‌تر عمل کنید، می‌توانید /g را در انتهای regex بگذارید، بنابراین تابع بدون متوقف شدن در وهله اول اجرا می‌شود و همه شرایط مطابقت را جایگزین می‌کند.

مثال:

const grammar = 'synonym synonym';

console.log(grammar.replace(/syno/, 'anto')); // this returns 'antonym synonym'
console.log(grammar.replace(/syno/g, 'anto')); // this returns 'antonym antonym'

8. چگونه مقادیر را کش کنیم

وقتی با آرایه‌های بزرگ کار می‌کنید و نیاز به درخواست عناصر با Id با استفاده از getElementById()، یا با نام کلاس با استفاده از getElementsByClassName() دارید، جاوااسکریپت از طریق آرایه به صورت حلقه با هر درخواست عنصر مشابه اجرا می‌شود. این می‌تواند منابع زیادی را بگیرد.

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

مثال:

const carSerial = serials.getElementById('serial1234');
carSerial.addClass('cached-serial1234');

9. بررسی اینکه آیا آبجکت مقدار دارد

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

در اینجا یک روش سریع برای بررسی کردن اینکه آیا آبجکت خالی است یا مقدار دارد با تابع Object.keys() است.

مثال:

Object.keys(objectName).length // if it returns 0 then the Object is empty, otherwise it displays the number of values

10. نحوه کوچک کردن فایل‌های جاوااسکریپت

فایل‌های بزرگ JS بر روی بارگیری صفحه و عملکرد پاسخگویی تاثیر می‌گذارند. هنگام نوشتن کد، شما می‌توانید خطوط غیر ضروری، کامنت‌ها، و کدهای بی استفاده را حذف کنید.

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

یکی از این ابزارهای Google Closure Compiler است که جاوااسکریپت شما را تحلیل می‌کند، کدهای بی‌استفاده را حذف می‌کند، و آنچه را که باقی مانده دوباره می‌نویسد و کوچک می‌کند. مورد دیگر Microsoft Ajax Minifier است که به شما این امکان را می‌دهد تا با کاهش اندازه فایل‌های جاوااسکریپت، عملکرد برنامه خود را بهبود بخشید.

استفاده از این 10 مورد به ساخت کد تمیزتر، صرفه‌جویی در منابع سرور، و حفظ زمان برنامه‌نویسی کمک می‌کند.

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