دوشنبه , مرداد ۱ ۱۳۹۷
خانه / مقالات / برنامه نویسی / web developer / Front End / ویژگی های جدید اکما اسکریپت 6
آموزش ES6

ویژگی های جدید اکما اسکریپت 6

ویژگی های جدید اکما اسکریپت 6

در این مقاله سعی داریم بصورت خلاصه و مفید ویژگی های جدید اکما اسکریپت 6 را معرفی کنیم برای آشنایی با مفهوم اکما اسکریپت و اینکه چرا باید اکما اسکریپت را یاد بگیریم به مقاله ES6 چیست؟ مراجعه کنید.

کلمه کلیدی let

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

"use strict";

let i = 0;
for(let i=0;i<2;i++){
  console.log(i);
}
console.log(i);

دستور forEach

اضافه شدن دستور foreach که بصورت سینتکس زیر میتوان استفاده کرد.

array.forEach(function(item){
  console.log(item);
});

Destructuring assignment

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

var a,b;
[a,b] = [1,2];

تعریف پارامتر Default در توابع

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

function sum(a=1,b=2){
 return a+b;
}

تعریف پارمتر rest در توابع

گاهی اوقات تعداد پارامترهای تابع از قبل مشخص نیست و بصورت داینامیک زیاد و کم میشود ES6 قابلیتی با عنوان rest برای این منظور بوجود آورده است. این امکان با اضافه کردن سه نقطه (…) قبل از نام آرگومان تابع مورد نظر استفاده می شود.

function sum(...num){
  var x=0;
 num.forEach(function(item){
    x += item;
 })
  return x;
}

sum(1,2,3,4,6,8,4);

تعریف پارمتر spread  در توابع

گاهی ممکن است نیاز باشد مقادیر داخل یک آرایه از اندیس خاص یک آرایه دیگر شروع به بارگزاری شود در این صورت می توان از قابلیت spread استفاده کرد.

var array1 = ['2','3'];
var array2 = ['1', ...array1 ,'4'];

template string

در بیشتر زبان‌های برنامه‌نویسی قابلیتی تحت عنوان String Interpolation وجود دارد. منظور، فرآیند جایگزین کردن مقادیر، با یکسری placeholder درون یک رشته است.در نسخه‌های قبلی جاوا اسکریپت محدودیت‌هایی در استفاده از رشته‌ها وجود داشت و امکان انجام این کار به صورت توکار مهیا نبود. یعنی برای پیاده‌سازی این قابلیت می‌توانستیم با تغییر prototype شیء String و یا روش‌های دیگری این‌حالت را پیاده‌سازی کنیم .

در ES6 با کمک قابلیتی تحت عنوان template string این محدودیت‌ها به طور قابل ملاحظه‌ایی کاهش پیدا کرده است. در واقع یک template string، یک رشته‌ی جاوااسکریپتی است که به جای (” “) و یا (‘ ‘) درون دو کاراکتر (` `) یا به اصطلاح back-tick character محصور خواهد شد. این ویژگی در سناریوهای مختلفی کاریرد دارد.دو ویژگی بارز بک تیک امکان چند خطی نویسی رشته و امکان تعریف متغیر درون رشته است.

function back_tick(){
  var name = 'Back Tick';
  return `this is ${name}
           test string.`;
}

تعریف کلاس و شی گرایی

در ES6 کلاس و شی گرایی معرفی شده است ولی بطور کامل در این ورژن مبحث شی گرایی پیاده نشده است و تعریف کلاس در ES6 در واقع نمایی از تعریف متد است که بوسیله دستور typeof مشهود می شود و در ورژن های بعدی اکما اسکریپت بطور حتم مبحث شی گرایی و کلاس کاملا در اکما اسکریپت پشتیبانی خواهد شد.

class Point{
  constructor(x,y) {
    this.x =x;
    this.y=y;
  }
  tostring(){
    return `${this.x},${this.y}`;
  }
}

let p = new Point(25,4);

تعریف gettter و setter

class Point{
 set point(value){
    this.x =value[0];
    this.y=value[1]
 }
  get point(){
     return `${this.x},${this.y}`;
  }
}

override inherited

class Point{
   constructor(x,y){
    this.x = x;
    this.y = y;
  }
  
  toString(){
    return `x is ${this.x} ,y is  ${this.y}`;
  }
}

class colorPoint extends Point{
   constructor(x,y,color){
    super(x,y);
    this.color = color;
  }
  
  toString(){
    return ` ${ super.toString() } and color is ${this.color} `;
  }
  
}

توابع arrow

توابع Arrow در خیلی از زبان‌های سطح بالا مثل #C و Java وجود دارد. حال این امکان به جاوااسکریپت نیز اضافه شده‌است که syntax ایی مشابه lambda expression در سی شارپ دارد و تقریبا میشود گفت امکاناتی مشابه Lodash به جاوا اسکریپت می دهد.

var users = [{'name':'ehsan'},{'name':'ali'},{'name':'amir'},{'name':'yasin'}];
users.map(f=>{return f.name}).toString()

Iterators و Iterables

یکی از اهداف ES6، استاندارد سازی کار با Iterators و Iterables است. فرض کنید شیءایی را داریم که مجموعه‌ای از عناصر را در بر دارد. این مجموعه می‌تواند آرایه‌ای از عناصر باشد و یا set و map اضافه شده به ES6 و یا حتی اشیایی که در زمان اجرا ایجاد می‌شوند. اگر این مجموعه Iterable باشد، حرکت بر روی آن یک Iterator را تولید می‌کند که امکان حرکت در این مجموعه را آیتم به آیتم میسر خواهد کرد. در واقع Iterator پیمایش درون آرایه را میگویند و Iterable  به آرایه ای با قابلیت پیمایش می گویند.

var numbers = [1,2,3,4];

let Iterators = numbers.values();
let next = Iterators.next();

var sum = 0;
while(!next.done){
  sum += next.value;
  next = Iterators.next();
}

for (let num of numbers){
  console.log(num);
}

Generators

Generators در حقیقت نوعی Iterator هستند. آن‌ها نوع خاصی از توابع هستند که قابلیت تعلیق و از سرگیری مجدد را دارند. برای رسیدن به این هدف، اینبار تعریف function به صورت * function خواهد بود و در آن برای بازگشت مقادیر، از واژه‌ی کلیدی yield استفاده می‌شود .

function* random(max){
  while(true){
      yield Math.floor(Math.random() * max)+1;
  }
}
let val = random(20);
console.log(val.next());

ساختارهای داده‌ی توکار

در اکما اسکریپت 5 تنها آرایه (Array) و آبجکت (Object) را به عنوان ساختار داده‌ایی، به صورت توکار در اختیار داریم. اما در اکما اسکریپت 6 ساختار های دیگه ای اضافه شده که در این قسمت قصد دارم بعضی از اونها رو به شما آموزش بدم .

Set

که یک مجموعه از مقادیر (values) است. و بصورت یک Iterators می توان آن را پیمایش کرد.

let set= new Set();
set.clear(); // clear all data in set object.
set.add(1);  // add 1 in set object.
set.has(1)   // check 1 exist in set object.
set.entries(); // active Iterators in set object.
set.delete(1); //  delete 1 from set object.
Map
برخلاف Set که یک مجموعه از مقادیر (values) است، Map یک مجموعه از کلید/مقدار (key/value) می‌باشد. در اینجا نیز کلیدها باید unique باشند. همچنین می‌توان از هر نوعی برای کلید استفاده کرد. برای افزودن یک مقدار به این مجموعه باید از تابع set استفاه کنیم:
var map = new Map();
map.set('name', 'ehsan');
map.set('name', 'ali');

map.get('name');
تابع copyWithin
با کمک این تابع می‌توانیم یک قسمت از آرایه را بوسیله اندکس آن کپی و در جای دیگر ذخیره کنیم.
[1, 2, 3, 4, 5].copyWithin(1, 4) // [1, 5, 3, 4, 5]

تابع fill

پرکردن آرایه با مقدار دلخواه

var newarray = [1,2,3];

newarray.fill('a'); // ['a','a','a']
تابع find
این تابع از ورودی، یک callback را گرفته و نتایج یافته شده را در خروجی برمی‌گرداند:
var newarray = [1,7, 21,5,96];
var match = newarray.find(item => item > 5 ); // 7
تابع findIndex
این تابع مشابه تابع find عمل می‌کند با این تفاوت که در خروجی ایندکس عنصر یافته شده را برمی‌گرداند:
var newarray = [1,7, 21,5,96];
var match = newarray.findIndex(item => item > 5 ); // 1

Reflection

در زبان‌های برنامه‌نویسی مانند سی‌شارپ و یا جاوا می‌توانیم از Reflection جهت خواندن متادیتاها استفاده کنیم. به عنوان مثال امکان تعریف پراپرتی و یا متدها و حتی تایپ‌هایی در زمان اجرا را در اختیارمان قرار می‌دهد. اما از آنجائیکه جاوا اسکریپت یک زبان داینامیک است، این قابلیت کمتر مورد توجه قرار گرفته است. در جاوا اسکریپت حین کار با کلاس‌ها و اشیاء، ممکن است نیاز داشته باشید تا از اعضای یک کلاس کوئری بگیرید و یا اینکه یک سری پراپرتی و متدهایی را در زمان اجرا به اشیاء‌تان اضافه کنید و یا مواردی از این دست. اطلاعات بیشتر

let Person = {
  name: 'ehsan',
  family : 'lotfinia',
  activity: function(){ return true;}
}
Reflect.get(Person,'name');// Get the value of a attribute by the key
Reflect.get(Person,'age','27');// Set new attribute
Reflect.deleteProperty(Person,'name');// delete attribute
Reflect.has(Person,'name');// check attribute
Reflect.enumerate(Person);// convert Object to Iterators

نوع داده ای  Symbols

برای تعریف یک iterator بصورت سفارشی از نوع داده ای Symbols استفاده می شود.

class SymbolClass {
    constructor(arr){
      this.arr = arr;
    }
  
    [Symbol.iterator](){
      let nextIndex =0;
      return{ 
        next :()=>{ 
          return (nextIndex <  this.arr.length) ? {value :  this.arr[nextIndex++],done:false}: {done:true};
      }
    }
   }
}

Proxy

دقیقا مانند یک پراکسی بروی عملیات اشیا مانند set ,get عمل میکند یعنی قبل از هر عمل بروی شی باید از فیلتر پراکسی عبور داده شود.

//target همان شی مورد نظر
// handler رویداد مورد نظر بروی شی

new Proxy(target, handler);
//handler انواع

var handler =
{
  // target.prop
  get: ...,
  // target.prop = value
  set: ...,
  // 'prop' in target
  has: ...,
  // delete target.prop
  deleteProperty: ...,
  // target(...args)
  apply: ...,
  // new target(...args)
  construct: ...,
  // Object.getOwnPropertyDescriptor(target, 'prop')
  getOwnPropertyDescriptor: ...,
  // Object.defineProperty(target, 'prop', descriptor)
  defineProperty: ...,
  // Object.getPrototypeOf(target), Reflect.getPrototypeOf(target),
  // target.__proto__, object.isPrototypeOf(target), object instanceof target
  getPrototypeOf: ...,
  // Object.setPrototypeOf(target), Reflect.setPrototypeOf(target)
  setPrototypeOf: ...,
  // for (let i in target) {}
  enumerate: ...,
  // Object.keys(target)
  ownKeys: ...,
  // Object.preventExtensions(target)
  preventExtensions: ...,
  // Object.isExtensible(target)
  isExtensible :...
}

Promise

Promises همیشه به عنوان یک راه‌حل برای callback hell شناخته شده هستند. Promises در واقع اشیایی هستند که این اطمینان را به شما خواهند داد تا بعد از پایان یک عملیات غیرهمزمان، پاسخ را صرفنظر از اینکه عملیات fail و یا success شده باشد، در اختیارتان قرار خواهند داد.

let promise = new Promise(function(resolve,reject){
   if(true){
     resolve('done');
   } else {
     reject('error');
   }
})

promise.then(function(val){
  console.log(val);
}).catch(function(err){
  console.log(err);
})

استفاده از کاراکتر یونیکد

var احسان = [1,2,3];

for (var فیلد of احسان){
  console.log(فیلد);
}

 

  • آیا این مقاله مفید بود؟
  • بله   خیر

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

یک کامنت

  1. خیلی عالی بود.ممنون

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.