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

فرقی نمی کند که شما تازه به دنیای جاوا اسکریپت وارد شده باشید یا مدتها از آن استفاده کرده باشید، ویژگی های زیادی به جاوا اسکریپت افزوده شده که شما باید آن ها را بیاموزید. در اینجا مهم ترین تغییرات و قابلیت هایی را که در چند سال اخیر به جاوا اسکریپت تحت عنوان ویژگی های 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: 'ali@examle.com'
}

//استفاده در فراخوانی توابع
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) {
   return "Selected product is: \n" + 
   " name: " + name + "\n" + 
   " price: " + price + "\n" +
   " description: " + description
 }

همانطور که می بینید برای ایجاد یک رشته چند خطی که در آن از متغیرهایی استفاده شده شما مجبور هستید از تعداد زیادی کاراکتر + و " استفاده کنید و متغیرها را با سایر رشته ها concat کنید. برای رفع این مشکل و استفاده راحت تر متغیرها درون یک رشته دو عملگر بک تیک یعنی ` و {}$ ایجاد شده اند که عملگرهای interpolation هستند. تابع بالا را با تکنیک interpolation بازنویسی می کنیم:

function getProductDescription = (name, price, description) {
   return `Selected product is \n :  
    name:   ${name} \n 
    price:   ${price} \n 
    description:   ${description}`
 }

دقت کنید که چگونه رشته ی حاوی متغیرها و نوشته های ثابت را بین دو بک تیک ` قرار داده ایم. به کمک interpolation کدهای شما خواناتر شده و از حجم concat های اضافی کم خواهد شد.

4. مختصرنویسی خواص آبجکت

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

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

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

function createCoordinate(x, y) {
  return {
    x,
    y
  }
}

5. خلاصه سازی تعریف متد به عنوان خصیصه (property)

در جاوا اسکریپت خواص یا property های یک شیء می توانند به یک متد اشاره کنند. در ES5 برای تعریف این خواص به شکل زیر عمل می کردیم:

const math = {
  add: function (a,b) { return a + b; },
  sub: function (a,b) { return a - b; }, 
  multiply: function (a,b) { return a * b; }
}

اما در ES6 نیازی به نوشتن کلمه function نیست و می توانیم به شکل زیر عمل کنیم:

const math = {
  add(a,b) { return a + b; },
  sub(a,b) { return a - b; },
  multiply(a,b) { return 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) {
return 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 اضافه شده زبان جاوا اسکریپت بیش از پیش غنی شده و نوشتن کد جاوا اسکریپت آسان تر و لذت بخش تر شده است. با تمرین و استفاده از قابلیت های جدید این زبان کدهایی به مراتب زیباتر، کوتاه تر و با قابلیت نگهداری و توسعه بالاتر خواهید داشت 

مشاهده دوره رایگان آموزش جاوا اسکریپت