تکنیک های جدید برای برنامه نویسی مدرن در جاوا اسکریپ

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

1. عملگر Spread (توسعه و گسترش)
این عملگر یا این که اپراتور با سه نقطه یعنی ... نمایش داده میشود و زمانی پیش از یک آرایه یا این که آبجکت قرار بگیرد، آن را به لیستی از گزینه ها که با کاما از هم جداگانه گردیده اند تبدیل می نماید. مطرح ترین کاربردهای این عملگر مخلوط دو آرایه یا این که دو آبجکت در هم و نیز پاس دادن یک آرایه تحت عنوان ورودی یک تابع دربرگیرنده یک‌سری آرگومان میباشد:

//مخلوط دو آرایه
let arr1 = [ 'one', 'two'];
let arr2= [...arr1 , 'three', 'four']; // ["one", "two", "three", "four"]

//مخلوط خاصیت دو آبجکت
const person= {
name: 'Ali',
age:25
}
const personWithEmail = {
...person,
email: '[email protected]'
}

//به کارگیری در فراخوانی توابع
function dev(x, y, z) { }
var args = [0, 1, 2]
dev(...args) 
2. پارامتر Rest (باقی مانده)
پارامتر باقی‌مانده یا این که Rest parameter به معنای گردآوری ما‌نده پارامترها در یک آرایه میباشد. در اینجا برعکس عملگر توسعه و گسترش (Spread) دنبال گردآوری پارامتر ها در یک آرایه هستیم:

const movie = ["Abad va yek rooz", 8.3, 2016, "Payman Maadi", "Navid Mohammadzadeh","Parinaz Izadyar" ];
const [title, rating, year, ...actors] = movie;
console.log(title, rating, year, actors);
همان گونه که مراعات می‌کنید سه مورد انتها آرایه movie در نمونه بالا در یک آرایه با اسم actors گردآوری گردیده اند. شما میتوانید به خیر از پارامتر rest در ورودی توابع به کار گیری فرمائید. اعتنا فرمایید که پارامتر rest مدام بایستی آخری آرگومان ورودی یک تابع باشد. به این ترتیب کد تحت نادرست میباشد:

function myFunction(arg1, ...rest, arg2) { 
// error
}
در ذیل یک نمونه دیگر از پارامتر ما‌نده یا این که rest را میبینید:

function greeting(x, y, ...z) {
console.log(x, ' ', y); // salam ali
console.log(z); // ["rooz", "be", "kheir", "!"]
console.log(z[0]); // rooz
console.log(z.length); // 4
}

greeting("salam", "ali", "rooz", "be", "kheir", "!")
 3. interpolation و حرفه های تعدادی خطی
به تابع ذیل توجه فرمائید:

function getProductDescription = (name, price, description) {
retu "Selected product is: \n" + 
" name: " + name + "\n" + 
" price: " + price + "\n" +
" description: " + description
}
همان گونه که میبینید برای ساخت‌و‌ساز یک حرفه یک‌سری خطی که در آن از متغیرهایی مصرف شده شما بدون چاره میباشید از تعداد متعددی کاراکتر + و " به کارگیری فرمائید و متغیرها را با بقیه فن ها concat فرمایید. برای رفع این نقص‌ و استعمال ریلکس خیس متغیرها باطن یک حرفه دو عملگر بک تیک یعنی ` و {}$ ساخت و ساز گردیده اند که عملگرهای interpolation می‌باشند. تابع بالا را با تکنیک interpolation دستکاری می‌کنیم:

function getProductDescription = (name, price, description) {
retu `Selected product is \n : 
name: ${name} \n 
price: ${price} \n 
description: ${description}`
}
اعتنا نمائید که به چه شکل فن ی دربردارنده متغیرها و نوشته های اثبات را در بین دو بک تیک ` قرار داده ایم. به امداد interpolation کدهای شما خواناتر گردیده و از وسعت concat های مازاد معدود گردد.

4. مختصرنویسی خاصیت آبجکت
در ES5 برای تعریف و تمجید خاصیت یک آبجکت می بایست از عملگر : در میان کلید و مقدار یک خصیصه به کار گیری می کردیم:

function createCoordinate(x, y) {
retu {
x: x,
y: y
}
}
 

البته در ES6 ، در صورتی‌که که سمت چپ و راست عملکر : در یک خصیصه آبجکت یکی از باشد خواهیم توانست به طور خلاصه به صورت پایین کار کنیم:

function createCoordinate(x, y) {
retu {
x,
y
}
}
5. خلاصه سازی تعریف‌و‌تمجید متد تحت عنوان خصیصه (property)
در جاوا اسکریپت خاصیت یا این که property های یک شیء میتوانند به یک متد اشاره نمایند. در ES5 برای تعریف‌و‌تمجید این خاصیت به صورت تحت کار می کردیم:

const math = {
add: function (a,b) { retu a + b; },
sub: function (a,b) { retu a - b; }, 
multiply: function (a,b) { retu a * b; }
}
ولی در ES6 نیازی به تایپ کردن واژه function وجود ندارد و قادر خواهیم بود به صورت تحت فعالیت کنیم:

const math = {
add(a,b) { retu a + b; },
sub(a,b) { retu a - b; },
multiply(a,b) { retu a * b; }
}
6. Destructuring یا این که تخریب
از این خصوصیت می اقتدار برای استخراج الِمان های موردنیاز از یک آرایه یا این که آبجکت و قرار دادن آنان در متغیرها استفاده نمود. به نمونه تحت اعتنا فرمایید:

const product = { name: 'Electric Circuits', type: 'book', price: 50,000};

const {name, type, price} = product ;

console.log(name, type, price);
در نمونه بالا نشانه { } در خط دوم برای تخریب آبجکت product به موادسازنده اول مصرف شده میباشد. شما برای متغیرهای تازه میتوانید از مقادیر پیشفرض یا این که اسم مستعار (alias) هم استعمال فرمایید. مانند کد ذیل:

const person = {
name: 'Hamid',
country: 'Iran'
};

const { name: fullname, country: place, age: years = 25 } = person;

console.log(`I am ${fullname} from ${place} and I am ${years} years old.`);
در نمونه بالا آبجکت person به یاری خصوصیت destructuring، تخریب شده‌است. متغیر name با اسم مستعار fullname و متغیر country با اسم مستعار place قابل دسترسی می باشند. نکته جذاب متغیر age با اسم مستعار years میباشد و زیرا آبجکت perosn این prop را ندارد، با مقدار پیشفرض 25 لبریز شده‌است.

برای تخریب آبجکت با خاصیت تو در تو  و استخراج متغیرها نیز به طریق تحت کار می‌کنیم:

const order= {
date: '1398/07/22',
user: 'ali alavi',
product: {
price: 12,000,000,
name:'Laptop'
}
};

const { user, product: {name, count = 1} } = order;

console.log(`${count} order with product name ${name} order has been placed.`);
به شیوه دسترسی به خواص name از product در نمونه بالا اعتنا نمایید.

از این خصوصیت در آرایه ها هم می اقتدار به کار گرفت:

// old approach
const array = [1,2,3,4,5,6];
const a = array[0];
const c = array[2];

// array destructuring
const [x, ,y, ...others] = arr;
// x= 1
// y= 3
// others = [4,5,6]

 در نمونه بالا اعتنا نمائید که پس از x، یک مکان خالی قرار داده ایم به این معنی که به اندیس 1 نیازی نداریم و y با اندیس 2 یعنی مقدار 3 لبریز می‌شود و سایر مقادیر به امداد پارامتر rest که در ابتدا با آن اشاره کرده بودیم در متغیر others ذخیره میشوند.

7. Arrow function
 تا قبل از این توابع را در جاوا اسکپریپت صرفا با syntaxt پایین می دیدیم:

function doSomething (arg) {
// function logic here
}
 در ES6 برای تایپ کردن تابع بالا می‌توانیم از syntaxt پایین هم به کارگیری کنیم:

const doSomething = (arg) => {
// function logic here
}
 

این نوع از تریف توابع را arrow function میگویند. در شرایطی‌که منطق باطن تابع شما کوتاه بوده و تابع شما یه خرده را بر می گرداند میتوانید به صورت ذیل یک تابع تک خطی تمجید فرمایید:

//new arrow function syntax
const add = (a,b) => a + b

//old approach
function add (a,b) {
retu a+b;
}
 8. متدهای نو عمل با آرایه در ES6
در ES6 تیم ای از متدهای اثر گذار عمل با آرایه ارائه شده‌است که فعالیت با آرایه، به ویژه یافت کردن یک یا این که یک سری مورد در آرایه را بسیار بی آلایش می نماید. با تمرکز به نمونه پایین و کامنت های بالای آن به راحتی این متدها را یاد خواهید گرفت:

const arr= [{ id: 1, name: 'Mohsen' }, { id: 2,name:'Ali',isActive:true }];

//برای کشف کردن یک مورد براساس یک شرط
arr.find(item => item.id === 2) // { id: 2,name:'Ali',isActive:true }

//برای کشف کردن ایندکس یک مورد براساس یک شرط
arr.findIndex(item => item.id === 1) // 0

//برای محاسبه کردن حضور یا این که عدم حضور یک آیت براساس یک شرط
arr.some(item => item.isActive) // true
عده بندی

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