آشنایی با استاندارد JavaScript ECMA6

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

اکمااسکریپت چیست؟

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

متغییر ها  و پارامترها :

Let :

به کمک let  می تونیم متغییرها را تعریف کنیم ، خوب قبلا هم می تونستیم این کار انجام بدیم اون هم با دستور var   ، پس چه نیازی به let هست ؟؟؟

دستور var  محدودیت هایی دشت ، var فقط دو اسکوپ ساپورت می کنه .

1-گلوبال اسکوپ

2- فانکشن اسکوپ

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

ecma6pic1

در تصویر بالا قرمز گلوبال اسکوپ ، فانکشن اسکوپ ، بلاک اسکوپ را می بینید.

همان طور که می بینید x با var تعریف شده است و var، x را در فانکشن اسکوپ تعریف کرده ، به همین دلیل return  به راحتی خارج از if به x دسترسی داره ، حالا اگر ما بخواهیم x به صورت بلاک اسکوپ تعریف بشه باید به جای var از let  استفاده کنیم ، در این حالت return  دیگه به x دسترسی نداره و باید return را به درون  if ببریم تا بتوانه از x استفاده کنه.

مثال : به کد زیر دقت کنید:

در کد بالا وقتی فلگ را true قرار دهیم عدد 3 چاپ خواهد شد ، اگر فلگ را false قرار دهم ، undefined  چاپ می شود .  خوب حالا بیاید از let استفاده کنیم .

در این حالت این پیغام در کنسول چاپ می شه:

ecma6pic2

X در بلاک اسکوپ تعریف شده و خارج از بلاک if  وجود نداره پس چه فلگ را false قرار دهید  چه true با همین پیام روبرو خواهید شد ، در نتیجه return باید به درون بلاک if  بره به این شکل

نتیجه اجرای کد بالا چاپ شدن عدد 3  خواهد بود .

Const  :

از const برای ایجاد متغییرهایی استفاده می کنیم که می خواهیم مقدار آنها ثابت باشد و هیچ وقت تغییر نکند.

اگر کد بالا را اجرا کنید با خطای Assignment to constant variable. روبه رو خواهید شد ، نمی توانید به MY_NUMBER مقدار جدیدی بدهید.

Destructuring  :

ممکنه destructoring  را در زبان های مانند پایتون دیده باشید ، destructuring به شما این امکان میده تا طبق پترن خاصی به متغییرها داده هایی را بدهید ، مثال :

در مثال بالا من متغییری به نام x و y ساختم ، دقت کنید که در خط و سط من آرایه جدید نساختم بلکه فقط دارم مقدار y را به x و x را به y می دهم . دقت کنید که چیزی که درسمت راست این مقداردهی می بینید یک آرایه است اما چیزی که در سمت چپ وجود دارد آرایه نیست  و آن را به این دلیل داخل [] قرار دارم چون دارم یک آرایه را destructuring  می کنم (تخریب می کنم)

بیاید چند نمونه دیگه ببینیم :

در مثال بالا مقادیر را از فانکشن می گیرم و مقدار دهی می کنم .

اگر آرایه ما 3 مقدار داشته باشد چه ؟

در مثال بالا اگر بخواهم عدد 7 هم نمایش داده شود می توانم یک متغییر دیگر برای آن ایجاد کنم در غیر این صورت کافیست یک کاما بگذارم و برای 7 هیچ متغییری تعریف نکنم.

در مورد آبجکت ها به شکل عمل کنیم ؟

به یاد داشته باشید ، آنچه سمت راست کلون است ، متغییریست که من تعریف کرده ام می توانید نام آن را هر چه که می خواهید بگذارید ، سمت چپ پراپرتی آبجکت من است.

و اگر کمی پیچیده تر باشد مانند شکل زیر عمل می کنیم .

اگر متغییرشما هم نام با پراپرتی آبجکت شما است ، می توانید به این شکل کد را بنویسید، یک شرت کد.

مقادیر پیشفرض :

حتما فانکشنی داشته اید که باید به آن مقداری پاس داده شود ، اما این کار صورت نمی گرفته و فانکشن شما undefined بر می گردانده ، قبلا به این شکل عمل می کردیم :

در ECMA6 برای رفع این مشکل به این شکل عمل می کنیم .

 

Rest Parameters :

حتما تا به حال چنین کدی نوشته اید :

فانکشنی برای جمع اعداد اما نمی دانیم چند عدد به ما داده خواهد شد ، بهتر است به جای استفاده از arguments از rest parameters استفاده کنیم ، arguments در واقع چیزی شبیه آرایه است اما یک آرایه نسیت.

 

همان طور که در کد بالا می بینید ، برای تعریف rest paramet ها کافیست … و یک نام برای آن بنویسیم.

Templates :

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

Hello,${name}
; }; let result = darkoobweb(“Pouria”); alert(result);

در مثال بالا کلمه Hello با pouria به هم متصل می شوند ، یک مثال دیگر:

;alert(url);
مثالی دیگر :

;alert(result);
در کد بالا string این خواهد بود strings =[“”,”+”,”is”,””]; و values = [1,3,4];
با استفاده از تمپلیت ها می توانید تگ های کاستمایز شده ای ایجاد کنید که در آینده به کمک شما بیان ،
مثل :

برای دیدن مثال های بیشتر برای درک این مفهوم Template Literals را در گوگل سرچ کنید

کلاس :
در گذشته کلاس را به این شکل ایجاد می کردیم :

اما در ECMA6 می توانیم از کلمه کلیدی class برای ایجاد کلاس استفاده کنیم:

خوب بیاد برای کلاس پوریا یک فانکشن دیگر هم بنویسیم :

);

Constructor :

حتما می دانید کانستراکتور چیست ، در ECMA6 به این شکل از کانستراکتور استفاده می کنیم :

);

getters and setters :

از گتر و ستر به این شکل استفاده می کنیم :

inheritace وراثت :

برای اینکه یک کلاس از کلاس دیگر ارث ببرد (inheritace)از extends استفاده می کنیم مانند کد زیر:

${this.name} kar mikonad
;
}
}

let shakhs = new Shakhs(“Pouria”);
let karmand = new Karmand(“Hooman”);

alert(shakhs.name);
alert(karmand.name);
alert(karmand.kar());

super class :

برای استفاده از سوپر کلاس کافیست از super استفاده کنید مانند کد زیر:

${this.name} kar mikonad
;
}
}

let karmand = new Karmand(“Hooman”, “Modir”);

alert(karmand.name);
alert(karmand.magham);

override :

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

می بینید که متد کار کردن در شخص و جود دارد و کارمند آن را اورراید کرده است .

Arrow Functions :

Arrow function چیست ؟ با لامبدا در پایتون آشناهستید ؟ اArrow function شبیه همان است .
قبلا به این شکل یک فانکشن برای مجموع دو عدد می نوشتیم :

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

Iterables and iterators :

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

حال به این روش نیز می توانیم اعداد را جمع کنیم :

روش بعدی استفاده از for of می باشد :
از for of زمانی استفاده می کنیم که فقط می خواهیم مقادیر را iterate کنیم ، نه کلید ها نه ایندکس فقط
مقادیر.

برای درک بهتر این موضوع آرایه را یه [4,2,3,4] تغییر دهید و به حلقه for بالا console.log(n); را اضافه کنید ، حال اگر به کنسول نگاه کنید می بینید که 4,2,3,4 چاپ می شود نه 0,1,2,3 فکر کنم حالا بهتر متوجه شدید.

چگونه خومان آبجکت iterator بسازیم ؟
بیاید ببینیم پست این عمل let iterator = new numbers(); let next = iterator.next(); چه چیزی قرار دارد من ابتدا کدی که کمی پیچیده است و نشونتون میدم بعدا کد ساده :

خوب اما توضیح کد :
در ابتدا می بینید که کلاسی به نام Dustam دارم و این کلاس یک کالکشن از dustha را می گیره ، همچنین فانکشنی داریم که هروقت بخوایم می تونیم دوستانی را با استفاده از اون اضافه کنیم .
و برای تست من یک آبجکت از Dustam ساختم و به وسیله فانکشن ezafeKardaneDust تعدادی از دوستام و اضافه کردم و بعد از آن از حلقه for of برای بدست آوردن تعداد دوستام استفاده کردم
من به یک iterable function هم نیاز دارم و آن را با کلمه کلیدی [Symbol.iterator] ایجاد کردم درون آن باید فانکشن next استفاده شود و همچنین باید بفهمیم فلگ done در چه وضعیتی است خوب برای این کار من یک کلاس ساختم و در داخل [Symbole.iterator]قرار دادم ،و این کلاس را ریترن می کنم ، در داخل این کلاس آرایه را می گیریم و سپس فانکشن next را می نویسیم ، اولین باری که next صدا زده بشه باید اولین ایتم را از آرایه بردارد داخل آبجکت بزاره و به caller بده (درمورد caller بعد صحت خواهیم کرد) آبجکت باید پراپرتی Value و فلگ done را داشته باشد پس من اونو هم ساختم و سپس result را به ریترن کردم.

فانکشن Generators :

فانکشنی است که یک iterator تولید می کنه و همین طور در generator باید از کلمه کلیدی به نام yield استفاده کنید .
برای ساخت یک generator function از علامت * استفاده می کنیم سپس از yield برای فرستادن چندین values استفاده می کنیم.

چیزی که yield را قابل توجه می کنه اینه که هر دفعه از yield استفاده میشه فانکشن مقدار جدید می سازه ، می تونیم مقادیر مختلفی را با yield برگردونیم چون آبجکت جنیریتور مثل یک کار خونه برای iterator عمل می کنه ، ابجکت iterator با دستور next به yield ها دسترسی پیدا می کنه .
وقتی اولین next اجرا می شه به اولین yield اشاره داریم ، درون حلقه next به yield بعدی اشاره می کنه و به همین ترتیب
من حتی می تونم برای generator پارامتر ورودی تعریف کنیم :

حالا بیاید مثال مبحث قبلی را با استفاده از generator بنویسیم :

می بینید ، به همین راحتی ، حالا تعداد خط کدهای کمتری هم نوشتیم .
اگر بخواهم نتیجه را فیلتر کنم چطور؟ مثلا دوستانی که حرف اول اسم آنها با A شروع می شود؟

Comprehensions :

اگر با python آشنایی داشته باشید با این مفهوم هم آشنا هستید ، بیاد در مثال ببینیم :

کد بالا بسیار آشناست و نتیجه آن 1,4,9 می شود ، حالا comprehension را ببینید:

نتیجه 1,4,9 خواهد بود.
بیاید در مثال دوستان از comprehension استفاده کنیم :

آبجکت ها در ECMA6 :

Number :

به کد و توضیحات دقت کنید :

در کد بالا می بینید که برای تعریف یک عدد اکتال از 0 وo و برای عدد باینری از 0 و b استفاده می کنیم .

عدد اینتیجر را باید به این شکل تشخیص دهید :

همان طور که خواهید دید 1.0 اینتیجر است اما 1.5 نیست.
وقتی از isNaN و isFinite استفاده می کنید مراقب باشید ،آنها در هنگام استفاده شدن با Number جواب های متفاوتی به شما نشان می دهند.

Math :

دوستان عزیز پیشنهاد می کنم حتما در مورد آبجکت های ریاضیECMA6 خودتون هم تحقیق کنید
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math

تابع هذلولوی یا Hyperbolic function :

توابع متفرقه :

درکد بالا به ترتیب مکعب ریشه عدد ، تعداد صفر بیت در 32 بیتی باینری یک عدد ، تابع لگاریتم طبیعی (پایه e) 1 + یک عدد را برمی گرداند ، تابع پایه 10 لگاریتم یک عدد را برمی گرداند ، تابع پایه 2 لگاریتم یک عدد را برمی گرداند، EX – 1، که در آن x آرگمان ااست و E پایه لگاریتم طبیعی ، تابع ریشه دوم مجموع مربعات از آرگمانهای آن باز می گردد ، نزدیکترین تک دقتی نمایندگی شناور یک عدد.

Sign و trunc :

sign نشان می دهد عدد مثبت است یا منفی یا صفر است.

آرایه Array :

Find :

فرض کنید آرایه ای به نام array داریم که دارای [1,2,8]است ، اگر بخواهیم عدد بزرگتر از 7 را بیابیم چه باید کرد ؟ به این شکل از دستور find استفاده می کنیم.

Fill :

فرض کنید بخواهیم آرایه array را با a پرکنیم ، برای این کار از دستور fill استفاده می کنیم.

و اگر بخواهم به جای عدد 3 a قرار دهم :

در کد بالا گفتیم ، a را بجای ایندکس 2 قرار بده و از ایندکس 3 خودش چاپ کن.

CopyWithin :

فرض کنید آرایه ای به شکل [1,2,3,4] داریم و می خواهیم به این شکل در بیاید [1,2,1,2] برای این کار از دستور copywithin به شکل زیر استفاده می کنیم :

اول باید تارگت را مشخص کنیم ، ایندکسی که کپی گرفتن من تا آنجا باشد، برای ما ایندکس 2 یعنی عدد 3 و سپس مشخص می کنیم از کدام ایندکس کپی گرفتن شروع شود ، برای ما ایندکس 0 یعنی عدد 1

arrayOf :

اگر بخاطر داشته باشید ما نمی توانستیم آرایه را به این شکل تعریف کنیم var array = new array(3); چون در نتیجه چنین چیزی برای ما ایجاد می شود [, ,] حال اگر بخواهیم آرایه ما فقط عدد 3 را داشته باشد چه باید کرد ؟ از Array.of به شکل زیر استفاده کنید.

حالا من دارای آرایه ای به طول یک و مقدار 3 هستم.

ArrayFrom :

اگر از کد زیر استفاده کنید undefined به شما بر می گرداند

برای حل این مشکل از Array.from به شکل زیر استفاده کنید:

entries :

اگر بخواهیم ایندکس و ومقدار اولین ورودی را ببینیم :

keys :

اگر بخواهیم فقط ایندکس را ببینیم :

Array Comprehensions :

قبلا با مفهوم Comprehensions آشنا شدید حالا بیاید در آرایه از آنها استفاده کنیم ، به مثال های زیر دقت کنید ، مثال ها ساده هستند و بعد از اجرا شما متوجه چگونگی عملکرد آنها می شوید.

${name} ${family}
)];
alert(array4);

آبجکت set :

برای ساخت یونیک لیست از set استفاده می کنیم :

می تونیم یک آبجکت بهش بدیم :

has به ما می گوید آیا چیزی که به دنبال آن هستیم در set وجود دارد یا نه .

نمی توانیم یک ایتم را دوباربه set اضافه کنیم :

سایز ما یک خواهد بود نه دو
برای پاک کردن تمام مقادیر set از دستور clear استفاده می کنیم.

برای ایتریت کردن set :

entries در set :

Map :

برای نگه داری داده هایی که دارای یک کلید و یک مقدار هستند استفاده می شود.

می توان یک آبجکت را به عنوان کلید داد :

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

اگر از یک کلید استفاده کنید مقدار آن override می شود:

برای پاک کردن همه موارد از clear میتوان استفاده کرد:

برای پاک کردن یک مورد از delete :

استفاده از forEach :

استفاده از for of :

Object.is :

.is مانند === عمل میکند .

Object.assign :

یک آبجکت را یه آبجکت دیگری اساین می کند اختصاص می دهد .

در مثل بالا آبجکت درخت و چیدن را اساین کردیم به ترتیب درخت نیز فانکشن چیدن را خواد داشت و می تواند از آن استفاده کند.
کدهای کوتاه شده در آبجکت ها :
حتما به یاد دارید که به این شکل میتوانستیم یک آبجکت بسازیم :

اگر آبجکت ما دارای فانکشن بود به این شکل می نوشتیم :

و حالا می توانیم به این شکل بنویسیم :

اما در مورد پراپرتی ها :

حال می توانیم به این شکل بنویسیم :

proxies :

به زبان ساده با استفاده از proxies می توانیم رفتار های کاستم شده ای را خلق کنیم ، برای درک بهتر به مثال زیر توجه کنید :

در کد بالا می بینید که من آبجکتی به نام انسان دارم و انسان دارای سن رنگ چشم و رنده بودن است
سپس یک پروکسی جدید ساختم ، اسم آبجکت مورد نظر خودمو بهش دادم و get تعریف کردم در get گفتم اگر پراپرتی رنگ چشم درخواست شد مقدار پراپرتی را با چه خوشگله متصل کن و برگردان در غیر این صورت مقدار همان پراپرتی را بر گردان .
همان طور که از get می شه استفاده کرد از set هم می تونیم استفاده کنیم به شکل زیر :

دقیقا همون مثال اما ایندفه با set .
حتما تا به حال چنین چیزی نوشته اید :

حالا می خوام کاری کنم که پراپرتی zaban فقط از طریق ابجکت ensan کارکند :

در کد بالا proxy جدیدی ساختم و گفتم اگر آبجکت ensan نبود مقدار ohoh ki bato harf mizane چاپ شه در غیر این صورت متن داخل داخل پراپرتی zaban برگردادنده بشه.

ماژول :

در زمان نگارش این آموزش ماژول هنوز توسط مرورگرها ساپورنمی شود و بایدازtraceur compiler,bable استفاده کنید.

بیاید اولین ماژول خودمون در  ECMA6 بنویسیم :

${this.nameKarmand} kar mikone
;
}
}

در کد بالا من یک کلاس دارم یک کلاس معمولی برای اینکه این کلاس را منتشر کنیم از کلمه کلیدی export قبل از class استفاده کرده ام این کلاس در پوشه module و فایل  karmand.js قرار دارد

حالا در فایل html یا فایل js دیگر این  کلاس را import می کنیم :

در داخل یک ماژول می تونیم چیزهای متفاوت زیادی export کنیم .

${this.nameKarmand} kar mikone
;
}
}

export let log = function (karmand) {

console.log(karmand.name);

};

export let AfzayeshSalane = 0.04;
export let modelKarmand = new Karmand(“Hooman”);

و حالا import kardan  این بار در صفحه html

مخفی کردن جزییات :

برای مخفی کردن جزییات (فانکشن و..) کافیست آنها را export نکنید ، حالا اگر بخواهیم name در مثال قبل را مخفی کنیم چطور ؟

${this.nameKarmand} kar mikone
;
}
}

export let log = function (karmand) {

console.log(karmand.name);

};

export let AfzayeshSalane = 0.04;
export let modelKarmand = new Karmand(“Hooman”);

همان طور که می بینید از Symbol استفاده می کنیم ، به این ترتیب اگر چنین کدی زده شود :

نام تغییر نمی کند.

آیا می تونیم از یه ماژول در یک ماژول دیگه استفاده کینم ؟ بله

فایلی به نام sherkat.js می سازم و karmand.js را درون آن  import  می کنیم :

سپس فایلی به نام main.js می سازم و sherkat.js را در آن import  میکنم :

دست آخر در فایل html :

امیدوارم تونسته باشیم کمی شما عزیزان را با ECMA6 آشنا کنیم ، پیشنهاد می کنم در مورد Traceur تحقیق کنید این traceur یک کامپایلر است که ECMA6 را به ECMA5 تبدیل می کند و این امکان را به شما می دهد تا کدهای js خود را با استاندارد ECMA6 بنویسید   این هم آدرس تریسیر آنلاین

http://google.github.io/traceur-compiler/demo/repl.html#

و این هم توضیحات تریسر:

https://github.com/google/traceur-compiler/wiki/Getting-Started

پیشنهاد می‌کنم این مقالات هم بخوانید

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

۱ ستاره۲ ستاره۳ ستاره۴ ستاره۵ ستاره
(ستاره دهید)
Loading...
Share on twitter
Share on linkedin
Share on telegram
Share on whatsapp
Share on facebook