خانه Front-End کوچ از ES5 به ES6 [بخش اول] Front-End نوشته شده توسط: محمد رضا عظیمی ۱۴ بهمن ۱۳۹۷ زمان مطالعه: 10 دقیقه ۰ (۰) کوچ از ES5 به ES6 با بررسی برنامههایی که در بستر وب توسعه داده شدهاند. متوجه میشویم که اکثر این برنامهها در بستر ES5 طراحی شدهاند. یکی از مهمترین دلایل؛ این موضوع بوده است که اکثر مرورگرها از ES5 پشتیبانی میکنند و احتمال اجرا نشدن در مرورگرهای مختلف را بسیار پایین میآورد. به همین دلیل هنوز اکثر برنامه نویسها از ES5 استفاده میکنند. اما با به وجود آمدن فریم ورکهای جاوا اسکرییتی توسعه برنامهها با ES5 بسیار سخت و زمانبر خواهد بود اما با تغییراتی که از ES6 به بعد به وجود آمده است؛ توسعه برنامهها آسانتر شده است. در طی چندین مقاله سعی به معرفی و بیان تفاوتهای بین ES5 و ES6 و بالاتر خواهیم داشت.در این مقاله قصد داریم در مورد تغییراتی که در زمینه متغیرها ایجاد شده بحث کنیم. متغیرها ۱- Const این امکان را به ما میدهد که بین متغیرهایی که قرار است بدون تغییر باقی بماند با متغیرهای دیگر تفاوت قائل شویم. برای مثال: // ES5 var start = 'hello '; var name = 'Microsoft'; console.log(start + name); name = 'Nikamooz'; console.log(start + name); //ES6 const start = 'hello'; var name = 'Microsoft'; console.log(start + name); name = 'Nikamooz'; console.log(start + name); ۲- Let متغیرهایی که با کلمه کلیدی let تعریف میشوند فقط در همان Scope (محدوده) که تعریف شده است قابل استفاده میباشد. برای مثال: //ES5 var number = 0; var language = 'C#'; if(number == 0){ var language = 'Java'; console.log(language);// => Java } console.log(language)// => Java //ES6 var number = 0; var language = 'C#'; if(number == 0){ let language = 'Java'; console.log(language);// => Java } console.log(language)// => C# اما با پیدایش دستورات کلیدی Const، Let برای برنامه نویسها این سوال پیش میآید که علاوه بر مواردی که گفته شد؛ آیا روی سرعت اجرای برنامه هم تأثیری دارد یا خیر. که برای مقایسه آنها میتوانید از لینکهای زیر استفاده نمایید. مقایسه Var و Const https://jsperf.com/const-vs-var/26 مقایسه Var و Let https://jsperf.com/let-vs-var-performance مقایسه Var ، Let و Const https://jsperf.com/let-vs-var-performance/34 با بررسی تستهای بالا و تستهای دیگری که انجام شده Var بهتر عمل کرده است. ولی این موضوع دلیل بر این نیست که در همهی موارد Var به خوبی عمل کند. اما زمانی که کارایی و سرعت برنامه به تمیز بود کد اهمیت بیشتری دارد بهتر است از var استفاده کنیم اما زمانی که از ES6 به بعد استفاده میکنید برای انجام اکثر کارها استفاده از Const و Let پیشنهاد میشود. ۳– Destructuring در ES5 خارج کردن مقدار خانههای آرایه یا Object و اختصاص دادن آنها به متغیرها به راحتی انجام میشود اما در ES6 قابلیت جذابی وجود دارد که سادگی کار را بسیار ساده میکند. ابتدا با آرایهها شروع میکنیم. آرایه a را به صورت زیر تعریف میکنیم. var a = [1, 2, 3, 4, 5, 6] در ES5 برای اینکه بخواهیم مقادیر آرایه را درون متغیرها بریزیم به صورت زیر عمل می کنیم. // ES5 var a0 = a[0], a1 = a[1], a2 = a[2], a3 = a[3], a4 = a[4], a5 = a[5] console.log(a0 + a2); اما برای سادگی و تمیزی بیشتر کد در ES6 به صورت زیر عمل میکنیم. // ES6 var [a0, a1, a2, a3, a4, a5] = a; console.log(a0 + a2); و همچنین شاید لازم داشته باشیم فقط تعدادی از خانههای آرایه را درون متغیر بریزیم برای این کار به جای متغیرهایی که لازم نداریم جای خالی قرار میدهیم. // ES6 var [a0, , , , , a5] = a; console.log(a0 + a5); در مورد Objectها هم به همین صورت میتوانیم عمل کنیم. برای مثال Object با نام a را به صورت زیر در نظر بگیرید. var a = { a1: 1, a2: 2, a3: 3, a4: 4, a5: 5, a6: 6 }; // ES5 var a1 = a.a1, a2 = a.a2, a3 = a.a3, a4 = a.a4, a5 = a.a5, a6 = a.a6; console.log(a1 + a5); // ES6 var {a1, a2, a3, a4, a5, a6} = a; console.log(a1 + a5); یک ویژگی جالب دیگری که میتوان در ES6 مشاهده کرد این هست که در یک Object اگر بخواهیم اسم متغیر با اسم Property یکی نباشد میتوانیم از روش زیر استفاده کنیم. با این کار مثلا Property با اسم a1 به متغیری با اسم First اختصاص داده میشود. // ES6 var {a1: first, a6: second} = a; console.log(first + second); و اما یکی دیگر از مواردی که میتوانیم با Destructuring انجام دهیم جا بجایی مقدار متغیرها میباشد. برای مثال // ES6 var a = 1; var b = 5; [a, b] = [b, a]; چه رتبه ای میدهید؟ میانگین ۰ / ۵. از مجموع ۰ اولین نفر باش برچسب ها # es6# روش مهاجرت از es5 به es6# مهاجرت از es5 به es6 معرفی نویسنده مقالات 5 مقاله توسط این نویسنده محصولات 0 دوره توسط این نویسنده محمدرضا عظیمی پروفایل نویسنده مقالات مرتبط ۲۱ اردیبهشت Front-End جاوا اسکریپ چیست؟ تیم فنی نیک آموز ۱۲ اردیبهشت Front-End سایر انواع زبانهای کدنویسی: راهنمای تبدیل شدن به یک برنامهنویس ارشد تیم فنی نیک آموز ۰۶ شهریور Front-End Html5 چیست و چه فرقی با html دارد؟ تیم فنی نیک آموز ۳۱ مرداد Front-End HTML چیست و چه کاربردی دارد؟ تیم فنی نیک آموز دیدگاه کاربران لغو پاسخ دیدگاه نام و نام خانوادگی ایمیل ذخیره نام، ایمیل و وبسایت من در مرورگر برای زمانی که دوباره دیدگاهی مینویسم. موبایل برای اطلاع از پاسخ لطفاً مرا با خبر کن ثبت دیدگاه Δ