جدید‌ترین ویژگی‌های جاوا اسکریپت در استاندارد ES8

استاندارد جدید جاوا اسکریپت تحت نام EcmaScript 8 یا EcmaScript 2017 به صورت رسمی در ماه ژوئن به وسیله کمیته TC39 انتشار یافت. به نظر می‌رسد ما به میزان زیادی در مورد EcmaScript در سال گذشته حرف زده‌ایم، این بی‌دلیل نیست. در حال حاضر هر ساله یک نسخه جدید از استاندارد ES انتشار می‌یابد. استاندارد ES6 در سال ۲۰۱۵ انتشار یافت و استاندارد ES7 در سال ۲۰۱۶. اما آیا کسی به خاطر می‌آورد که استاندارد ES5 چه سالی منتشر شد؟ این اتفاق در سال ۲۰۰۹ افتاد، قبل از رشد جادویی جاوا اسکریپت.ما توسعه جاوا اسکریپت را به عنوان یک زبان پایدار دنبال می‌کنیم و الان وقتش رسیده است که ES8 را به دایره واژگان‌مان اضافه کنیم.اگر شما آدم باحوصله‌ای هستید وقت بگذارید و نسخه وب یا PDF ویژگی‌های جدید جاوا اسکریپت را بخوانید. برای بقیه در این مقاله عمده‌ترین ویژگی‌های جدید در ES8 را همراه با مثال پوشش داده‌ایم.دنباله‌گذاری رشته‌ها (String padding)این قسمت دو تابع جدید به آبجکت String اضافه کرده است: padStart و padEnd. همچنان که از نام‌شان پیداست هدف این توابع دنباله‌گذاری رشته‌ها در ابتدا یا انتهای آنهاست، در نتیجه طول رشته به مقدار مورد نظر می‌رسد. شما می‌توانید یک رشته را با یک کاراکتر خاص، یک رشته یا به صورت پیش‌فرض با جای خالی دنباله‌گذاری کنید. اعلان این توابع این شکلی است:str.padStart(targetLength [, padString]) str.padEnd(targetLength [, padString])همچنان که می‌بینید اولین پارامتر از این توابع targetLength است که طول نهایی رشته حاصله را تعیین می‌کند. پارامتر دوم اختیاری است و رشته‌ای است که به رشته اصلی اضافه می‌شود، مقدار پیش‌فرض این پارامتر جای خالی (space) است.'es8'.padStart(2); // 'es8' 'es8'.padStart(5); // ' es8' 'es8'.padStart(6, 'woof'); // 'wooes8' 'es8'.padStart(14, 'wow'); // 'wowwowwowwoes8' 'es8'.padStart(7, '0'); // '0000es8' 'es8’.padEnd(2); // 'es8' 'es8’.padEnd(5); // 'es8 ' 'es8’.padEnd(6, 'woof’); // 'es8woo' 'es8’.padEnd(14, 'wow’); // 'es8wowwowwowwo' 'es8’.padEnd(7, '6’); // 'es86666'پشتیبانی مرورگرهامتدهای Object.values و Object.entriesمتد Object.values یک آرایه از مقادیر خصوصیات شمارش‌پذیر (enumerable property) یک آبجکت را برمی‌گرداند، به همان ترتیبی که در یک حلقه for in برگردانده می‌شوند. اعلان این متد این شکلی است:Object.values(obj)پارامتر obj همان آبجکت داده شده برای عملیات است. این پارامتر می‌تواند یک آبجکت یا یک آرایه (که یک آبجکت ایندکس‌دار است) باشد.const obj = { x: 'xxx', y: 1 }; Object.values(obj); // ['xxx', 1] const obj = ['e', 's', '8']; // same as { 0: 'e', 1: 's', 2: '8' }; Object.values(obj); // ['e', 's', '8'] // when we use numeric keys, the values returned in a numerical // order according to the keys const obj = { 10: 'xxx', 1: 'yyy', 3: 'zzz' }; Object.values(obj); // ['yyy', 'zzz', 'xxx'] Object.values('es8'); // ['e', 's', '8']پشتیبانی مرورگرها از Object.valuesمتد Object.entries خصوصیات شمارش‌پذیر یک آبجکت را بصورت جفت‌های کلید و مقدار [key, value] برمی‌گرداند، به همان ترتیبی که متد Object.values خصوصیات را برمی‌گرداند. در مثال زیر نحوه استفاده از این متد را مشاهد می‌کنید:const obj = { x: 'xxx’, y: 1 }; Object.entries(obj); // [[’x’, 'xxx’], [’y’, 1]] const obj = [’e’, 's’, '8’]; Object.entries(obj); // [[’0’, 'e’], [’1’, 's’], [’2’, '8’]] const obj = { 10: 'xxx’, 1: 'yyy’, 3: 'zzz' }; Object.entries(obj); // [[’1’, 'yyy’], [’3’, 'zzz’], [’10’, 'xxx’]] Object.entries('es8'); // [['0', 'e'], ['1', 's'], ['2', '8']]پشتیبانی مرورگرها از Object.entries متد Object.getOwnPropertyDescriptorsاین متد همه‌ی توصیف‌گر‌های خصوصیات یک آبجکت را برمی‌گرداند. یک توصیف‌گر متعلق به یک آبجکت، توصیف‌گری است که مستقیما بر روی آبجکت تعریف شده است و از خصوصیت آبجکت به ارث برده نشده است. اعلان این متد مانند زیر است:Object.getOwnPropertyDescriptors(obj)پارامتر obj آبجکت مورد نظر است. کلید‌های ممکن برای آبجکت‌های توصیف‌گر configurable, enumerable, writable, get, set و value هستند:const obj = { get es7() { return 777; }, get es8() { return 888; } }; Object.getOwnPropertyDescriptors(obj); // { // es7: { // configurable: true, // enumerable: true, // get: function es7(){}, //the getter function // set: undefined // }, // es8: { // configurable: true, // enumerable: true, // get: function es8(){}, //the getter function // set: undefined // } //}داده‌های توصیف‌گر برای ویژگی‌های پیشرفته‌ای مانند دکوراتورها بسیار مهم هستند.پشتیبانی مرورگرهاکامای انتهایی در لیست پارامترهای توابع و هنگام صدا زدن توابعکامای انتهایی در لیست پارامتر‌های توابع یک توانایی کامپایلر برای باز نگردادن خطای SyntaxError وقتی ما یک کامای غیرضروری به انتهای لیست اضافه می‌کنیم است:function es8(var1, var2, var3,) { // ... }همچنین هنگام صدا زدن توابع نیز ما می‌توانیم یک کامای اضافی بگذاریم:es8(10, 20, 30,);ایده این ویژگی از کامای انتهایی که در آرایه‌ها و آبجکت‌ها گذاشته می‌شود گرفته شده است://Array [10, 20, 30,] //Object { x: 1, }توابع Asyncاعلان async function یک تابع ناهمگام (asynchronous) را تعریف می کند که یک آبجکت AsyncFunction را برمی‌گرداند. توابع async باطناً بسیار شبیه جنراتورها عمل می‌کنند، ولی آنها به توابع جنراتور ترجمه نمی‌شوند.function fetchTextByPromise() { return new Promise(resolve => { setTimeout(() => { resolve("es8"); }, 2000); }); } async function sayHello() { const externalFetchedText = await fetchTextByPromise(); console.log(`Hello, ${externalFetchedText}`); // Hello, es8 sayHello();صدا زدن تابع sayHello باعث می‌شود بعد از گذشت ۲ ثانیه عبارت Hello,es8 چاپ شود، به عنوان مثال:console.log(1); sayHello(); console.log(2); خروجی زیر را تولید می‌کند:1 // immediately 2 // immediately Hello, es8 // after 2 secondsاین به این دلیل است که صدا زدن تابع، جریان را بلوکه نمی‌کند.توجه کنید که یک تابع async همیشه یک promise را برمی‌گرداند و کلیدواژه await فقط در توابعی به کار می‌رود که با کلیدواژه async مشخص شده باشند.پشتیبانی مرورگرهاحافظه مشترک و اتمیک‌هاوقتی که حافظه مشترک است چندین تِرِد می‌توانند یک داده واحد را در حافظه بخوانند و بنویسند. عملیات اتمیک منجر به اطمینان از خواندن و نوشتن مقادیر قابل پیش بینی می‌شوند. هر کدام از این نوع عملیات قبل از شروع عملیات بعدی پایان می پذیرد، و همچنین این نوع عملیات وقفه‌پذیر نیستند. این قسمت یک سازنده جدید به نام SharedArrayBuffer و همچنین یک آبجکت فضای نام جدید به نام Atomics را معرفی می‌کند.آبجکت Atomics یک آبجکت مانند Math است که تمام متد‌های آن استاتیک هستند، در نتیجه ما نمی‌توانیم از آن به عنوان یک سازنده استفاده کنیم. چند نمونه از متد‌های این آبجکت در زیر آورده شده‌اند:متد‌های add و sub: یه مقدار را به یک مقدار دیگر در یک موقعیت خاص اضافه یا کم می‌کنند.متدهای and و or و xor: عملگرهای بیتی and,or و xor بر روی بیت‌ها هستند.متد load: یک مقدار را در یک موقعیت خاص دریافت می‌کند.پشتیبانی مرورگرهاو یک ویژگی برای سال بعد در استاندارد ES9: رفع محدودیت template literalدر استاندارد ES6 ما می‌توانیم با template literal تگ شده کارهای جالبی انجام دهیم، مثلا تعریف یک تابع تحلیل‌گر template و بازگرداندن یک مقدار با توجه به منطق مورد نظر ما:const esth = 8; helper`ES ${esth} is `; function helper(strs, ...keys) { const str1 = strs[0]; // ES const str2 = strs[1]; // is let additionalPart = ''; if (keys[0] == 8) { // 8 additionalPart = 'awesome'; } else { additionalPart = 'good'; } return `${str1} ${keys[0]} ${str2} ${additionalPart}.`; }مقدار برگشتی ES 8 is awesome خواهد بود. و اگر مقدار esth برابر با ۷ شود مقدار برگشتی ES 7 is good خواهد بود.اما برای template هایی که به عنوان مثال حاوی عبارت u\ یا x\ هستند محدودیت وجود دارد. استاندارد es9 این محدودیت را رفع می‌کند. برای مطالعه بیشتر در این باره به سایت MDN یا مستندات TC39 مراجعه کنید.پشتیبانی مرورگرهانتیجه‌گیریجاوا اسکریپت در حال تولید است اما همیشه در حال نو شدن است. پروسه اضافه کردن ویژگی‌های جدید به آن بسیار منظم و با توازن است. این ویژگی‌های جدید در آخرین نسخه استاندارد آن به وسیله کمیته TC39 تایید شده و توسط توسعه‌دهندگان مرکزی پیاده‌سازی شده است. بسیاری از این ویژگی‌ها هم اکنون قسمتی از زبان تایپ‌اسکریپت، مرورگرها و دیگر پلی‌فیل‌ها هستند، در نتیجه شما همین حالا می‌توانید بروید و آنها را امتحان کنید.منبع: hackernoon.com