10 ترفند کمکی برای کوتاه کردن کدهای جاوا اسکریپتی
توی این مقاله تلاش می کنم تا شما با ده تا از ترفندهای برنامه نویسی توی جاوا اسکریپت برای کمتر شدن کدها توی این برنامه،آشنا کنم.همین طور که می دونید هرچی کد کوتاه تر باشه خوانایی و جذابیت بیشتری توی کار برنامه نویسی ایجاد می کنه. توی این مقاله که چند روز پیش مطالعه ش کردم،جذابیت های زیادی برای کوتاه کردن کدهای خودم توی جاوا اسکریپت پیدا کردم که تصمیم گرفتم اونها هم با شما دوستای خوب برنامه نویس به اشتراک بگذارم.
1- کوتاه کردن شرط ها
خیلی هامون عادت به if...else نوشتن توی برنامه دارم.
const pet = 'dog';
let sound;if ( pet === 'dog') {
sound = 'woof';
} else {
sound = 'meow';
}
عادت بدی هم نیست اما می تونیم کوتاه ترش کنیم:
const pet = 'dog';
let sound = (pet === 'dog') ? 'woof' : 'meow';
2- شرط های طولانی
یه شرط طولانی می نویسیم فقط برای یه منظور:
let test = 'AA';
if (typeof test !== 'undefined' && test !== '' && test !== null && test !== 0 && test !== false) {
console.log('The variable test is defined and not empty and not null and not false');
}
خب چه کاریه!!! یه دفعه بنویسیم :
let test = 'AA'
if (test) {
console.log('The variable test is defined and not empty and not null and not false');
}
اگر هم خواستیم متضادش بنویسیم که میشه اینجور نوشت :
let test;
if (!test) {
console.log('The variable test is undefined or empty or null or false');
}
3- کم کردن تعداد متغیر ها
فرض کنید متغیرهایی هم نوع داریم که همشون قرار یه مقدار ثابت بگیرن
let i = 0;
let j = 0;
let counter = 0;
let message = 'Hello there';
let isFound = false;
let isOpen = true;
let text;
ما می تونیم خیلی راحت این ها کمتر بکنیم:
let i = 0, j = 0, counter = 0; // counters
let message = 'Hello there', text; // strings
let isFound = false, isOpen = true; // booleans
4- اعداد دسیمال
می تونیم توی جاوا اسکریپت صفرهای خودمون کم کنیم،و اون ها با جایگزین کردن یه راه کار ساده کوتاهتر کنیم:
1e1 === 10
1e2 === 100
1e3 === 1000
.
.
.
1e9 === 10000000002e1 === 20
2e2 === 200
.
.
2e8 === 20000000011e2 === 1100
5- نظم دادن و راحت تر کردن رشته های طولانی
یکی از اون موارد دردسر ساز توی جاوا اسکریپت نوشتن یه متن طولانی از رشته هاست حالا تصور کن بخوام یه خط جدید هم اضافه کنیم. از اضافه کردن یه متغیر به این رشته هم که نگم براتون :(
let multilineText = 'Hello '+ name + 'from '+ country +'.\n\t'
+ 'You have selected '+ number + '' + item + 'at the price of '+ price + '.'
خب احتمال خطا دادن توی همچین کدی زیاد میشه و بدتر از همه گشتن و پیدا کردنش هست بهتر که بیام و این کد با جایگزین کردن `` به جای ' ' یه نظمی بدیم:
let text = `Hello ${name} from ${country}.`;
let multilineText = `Hello ${name} from ${country}. You have selected ${number} ${item} at the price of ${price}`;
6- فیلدهای Object
می خوایم یه object با متغیرهایی مقدار دهی کنیم (البته با یه راه طولانی) :
let name = 'Katniss';
let surname = 'Everdeen';
let home = 'District 12';let contestant = {
name: name,
surname: surname,
home: home
}
کوتاه کردن همین مقدار دهی اینبار با یه روش بهتر:
let contestant = { name, surname, home }
7- حلقه For
می تونیم بجای گرفتن اطلاعات بیهوده و زیاد از یه حلقه for یه مقدار اون کمترش کنیم تا بهتر به هدفمون برسیم:
const heroes= ['Iron Man','Thor','Hulk','Black Widow','Scarlet Witch','Dr Strange','Spiderman'];
for(let i = 0; i < heroes.length; i++) {
console.log(heroes[i]);
}
حالا اگه بخوایم فقط اسامی مقادیر بکشیم بیرون حلقه خودمون اینجوری می نویسیم:
for(let hero of heroes) {
console.log(hero);
}
/**
Iron Man
Thor
Hulk
Black Widow
Scarlet Witch
Dr Strange
Spiderman
*/
اگه بخوایم فقط index بکشیم بیرون که اینطور می نویسم:
for(let index in heroes) {
console.log(index);
}
/**
0
1
2
3
4
5
6
*/
8- تبدیل رشته به عدد
قبلا برای تبدیل رشته به عدد این کار می کردیم:
const num1 = parseInt('10');
const num2 = parseFloat('10.01')
خب می تونیم این مدلی هم بنویسیم
const num1 = +"10"
const num2 = +"10.01"
9- گرفتن مقادیر از یک object
برای گرفتن مقادیر از یک شی قبلا این روش می رفتیم:
const student = {
name: 'Harry',
surname: 'Potter',
school: 'Hogwarts',
house: 'Gryffindor'
}
const name = student.name;
const surname = student.surname;
const school = student.school;
const house = student.house;
اما خب می تونیم این کار بهتر هم بکنیم:
const {name, surname, school, house} = student;console.log(name) // Harry
console.log(surname) // Potter
console.log(school) // Hogwarts
console.log(house) // Gryffindor
10- استفاده از ... spread
استفاده از اپراتور spread می تونه کارمون توی ارایه ها آسون تر بکنه به این صورت:
let num1 = [1,2,3]
let num2 = [4,5,6]
let final;
final = num1.concat(num2);
حالا اگه بخوایم این دستور کوتاه تر کنیم می نویسیم:
final = […num1,…num2] //1,2,3,4,5,6
یه سری مثال دیگه هم هست که بد نیست با هم مرورشون کنیم:
final2 = […num2, …num1] // 4,5,6,1,2,3
final3 = [1, 2, …num2, 7,8 ] // 1,2,4,5,6,7,8
خب به انتهای مقاله امروز رسیدیم، امیدوارم که این مقاله براتون مفید بوده باشه و تونسته باشم مطلب خوبی بهتون منتقل کرده باشم.
ممنون از توجهتون :)
مطلبی دیگر از این انتشارات
هرچیزی که درمورد bind و this در JavaScript و React باید بدونیم!
مطلبی دیگر از این انتشارات
10 ترفند کمکی برای کوتاه کردن کدهای جاوا اسکریپتی قسمت دوم
مطلبی دیگر از این انتشارات
متد های آرایه توی جاوااسکریپت