آموزش کامل جاوا اسکریپت Es10 (اکما اسکریپت 2019)

مقدمه

قبلا تو مقاله ی ” ورژن بندی اکما اسکریپت (جاوا اسکریپت) ” از مجله آموزشی ویکس سون، امکانات و فیچرهایی که تو Es10 به جاوا اسکریپت اضافه شده رو معرفی کردیم. در ادامه به جزییات این قابلیت ها و آموزششون میپردازیم.

امکانات و قابلیت های جاوا اسکریپت Es10 (2019)

1. متد string.trimStart یا string.trimLeft در استرینگ (رشته) ها
2. متد string.trimEnd یا string.trimRight در استرینگ (رشته) ها
3. متد Array.prototype.flat در آرایه ها
4. متد Array.prototype.flatMap در آرایه ها
5. بهبود عملکرد متد Array.prototype.sort در آرایه ها
6. متد Object.fromEntries در آبجکت ها
7. بهبود عملکرد متد toString
8. پشتیبانی کامل از JSON و بهبود عملکرد متد JSON.stringify
9. بهبود ساختار try-catch (قابلیت catch binding اختیاری)
10. اضافه شدن Symbol Description Accessor

آموزش کامل جاوا اسکریپت Es10 (2019)

پیشنیاز این آموزش :

1. آشنایی با مفاهیم پایه جاوا اسکریپت
2. آشنایی با قابلیت های جدید جاوا اسکریپت تا اکما اسکریپت 2018 یا Es9

1) متد string.trimStart یا string.trimLeft در استرینگ (رشته) های جاوا اسکریپت Es10

تو ورژن های قبل، ما میتونستیم به کمک متد trim، فاصله ها یا اسپیس های اول و آخر استرینگ رو حذف کنیم. مثلا :

const string = "     We are WiX7.COM     ";
console.log(string.trim()); // output: 'We are WiX7.COM'

تو Es10 متد trimStart اضافه شد که این امکان رو میده که بتونیم فقط اسپیس های اول استرینگ رو حذف کنیم. متد trimLeft هم همین کار رو انجام میده (هر دو متد یکی هستن). برای مثال بالا :

console.log(string.trimStart()); // output: 'We are WiX7.COM     '
console.log(string.trimLeft()); // output: 'We are WiX7.COM     '

رفرنس : MDN / jstut

2) متد string.trimEnd یا string.trimRight در استرینگ (رشته) های جاوا اسکریپت Es10

متد trimEnd یا trimRight هم اسپیس های آخر استرینگ رو حذف میکنه. برای مثال بالا :

console.log(string.trimEnd()); // output: '     We are WiX7.COM'
console.log(string.trimRight()); // output: '     We are WiX7.COM'

نکته : این متدها یه استرینگ جدید رو برمیگردونن و کاری با استرینگ اصلی ندارن !

رفرنس : MDN / jstut

3) متد Array.prototype.flat در آرایه های جاوا اسکریپت Es10

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

const myArr = [1, 2, [3, 4, [5, 6, [7, 8]]]];

console.log(myArr.flat());  // output: (5) [1, 2, 3, 4, Array(3)]
console.log(myArr.flat(1)); // output: (5) [1, 2, 3, 4, Array(3)]
console.log(myArr.flat(2)); // output: (7) [1, 2, 3, 4, 5, 6, Array(2)]
console.log(myArr.flat(3)); // output: (8) [1, 2, 3, 4, 5, 6, 7, 8]

نکته : همونطور که تو مثال بالا هم مشخصه، در صورتی که عددی به عنوان عمق داخل flat قرار ندیم، به صورت پیشفرض عمق رو 1 در نظر میگیره، پس نتیجه flat() , flat(1) یکسانه نکته : یکی دیگه از استفاده های متد flat برای از بین بردن مقادیر empty داخل آرایه های پراکنده (sparse) هستش. همونطور که توی مثال زیر میبینید، مقادیر empty تو خروجی دیده نمیشن :

const myArr = [1, 2, , 5, , , , 10];

console.log(myArr.flat()); // output: (4) [1, 2, 5, 10]

رفرنس : MDN / jstut

4) متد Array.prototype.flatMap در آرایه های جاوا اسکریپت Es10

const myArr = [1, [2], 3, [4]];

const newArr = myArr.flatMap((x) => x * 2);

console.log(newArr); // output: (4) [2, 4, 6, 8]

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

رفرنس : MDN / jsinfo

5) بهبود عملکرد متد Array.prototype.sort در جاوا اسکریپت Es10

همونطور که میدونید، از متد sort برای مرتب سازی المنت های آرایه استفاده میشه. اگه المنت های آرایه :

1. 1. استرینگ (رشته) باشن، بر اساس حروف الفبا مرتب میشه
   2. عدد باشن، بصورت پیشفرض از عددهای کوچیکتر به بزرگتر (صعودی) مرتب میشه

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

const numbers = [1, 20, 100, 14, 2, 5, 56];

numbers.sort();
console.log(numbers); // output: [1, 100, 14, 2, 20, 5, 56]

numbers.sort((a, b) => a - b);
console.log(numbers); // output: [1, 2, 5, 14, 20, 56, 100]

نکته : تو کد بالا اگه به جای a – b مینوشتیم b – a ، عددها به صورت نزولی مرتب میشدن

خب حالا اگه یه آرایه داشتیم باشیم که هر المنتش یه آبجکت باشه چی؟ اونوقت چطور میتونیم مرتب سازی انجام بدیم ؟ مثال زیر رو در نظر بگیرید. تو این مثال مرتب سازی محصولات رو بر اساس rating هر محصول انجام دادیم و با توجه به تابع مقایسه ای که براش نوشتیم انتظار داریم که محصولات به ترتیب از امتیاز بیشتر به کمتر مرتب بشن :

const product = [
  { name: "tv", rating: 12 },
  { name: "computer", rating: 13 },
  { name: "mobile", rating: 12 },
  { name: "laptop", rating: 14 },
];

console.log(product.sort((a, b) => b.rating - a.rating));
/*
{name: 'laptop', rating: 14}
{name: 'computer', rating: 13}
{name: 'tv', rating: 12}
{name: 'mobile', rating: 12}
*/

به نظر میرسه که مشکلی وجود نداره و مرتب سازی همونطور که انتظار داشتیم انجام میگیره، پس این بهبود عملکردی که میگیم کجاست؟ تا قبل از Es10 مرورگرها از الگوریتم های ناپایدار مثل QuickSort برای مرتب سازی داده ها استفاده میکردن که باعث میشد تو چنین شرایطی نتایج متفاوتی حاصل بشه. چه شرایطی؟ چه نتایجی؟ تو کد بالا از اونجایی که امتیاز mobile و tv با هم برابره، ممکن بود هر مرورگر به یه شکل نتیجه رو نمایش بده، مثلا یکی بر اساس حرف الفبا mobile رو قبل از tv قرار بده و یکی دیگه برعکس. اما از سال 2019 بر اساس مستنداتی که تیم اکما ارائه کرد، مرورگرها شروع به استفاده از الگوریتم های مرتب سازی پایدار کردن. همه مرورگرها از این به بعد تو چنین شرایطی، برای المنت هایی که پراپرتی دومشون مساویه (تو این مثال: امتیاز مساوی)، خروجی رو دقیقا به همون ترتیبی که تو آرایه اصلی قرار گرفته بودن، مرتب میکنن. مثلا تو کد بالا که امتیاز tv و mobile با هم برابره، چون تو آرایه اولیه tv قبل از mobile قرار گرفته، تو خروجی هم به همین شکل قرار میگیره.

رفرنس : MDN / V8

6) متد Object.fromEntries در آبجکت های جاوا اسکریپت Es10

متد fromEntries یه لیست از جفت های قابل پیمایش key-value رو به آبجکت تبدیل میکنه. مثلا لیست زیر چند میوه به همراه قیمتشون رو نمایش میده که با این متد تبدیل میشه به یه آبجکت که key هاش اسم میوه ها و value هاش قیمت میوه هاست :

const fruits = [
  ["apples", 400],
  ["orange", 600],
  ["bananas", 500],
];
console.log(Object.fromEntries(fruits)); // output: {apples: 400, orange: 600, bananas: 500}

نکته : از Es8 بخاطر داریم که میتونستیم به کمک متد entries، آبجکت ها رو به دیتای Map تبدیل کنیم. اینجا به کمک متد fromEntries میتونیم عکس اون عمل رو انجام بدیم، یعنی دیتاهای Map رو به آبجکت تبدیل کنیم, به عنوان مثال :

const mapData = new Map([
  ["apples", "400"],
  ["bananas", "500"],
]);

console.log(Object.fromEntries(mapData)); // output: Object {apples: '400', bananas: '500'}

رفرنس : MDN

7) بهبود عملکرد متد toString در جاوا اسکریپت Es10

همونطور که میدونید، متد Function.prototype.toString سورس کد تابع مورد نظرمون رو برمیگردونه. تا قبل از از ارائه Es10، متد toString توی مرورگرهای مختلف خروجی های متفاوتی رو نمایش میداد. مثلا تو بعضی از مرورگرها کامنت های داخل تابع یا فاصله ها رو نمایش نمیداد. از این ورژن به بعد (یعنی از سال 2019) این متد، تو مرورگرهای مختلف باید دقیقا سورس تابع (به همون شکلی که نوشته میشه) رو نمایش بده. این سورس شامل کامنتها، فاصله ها و جزییات سینتکس هست. به عنوان مثال کد زیر تو کنسول، دقیقا سورسی که برای تابع نوشتیم نمایش میده :

function myFunction(a, b) {
  return a * b;
}
console.log(myFunction.toString());

رفرنس : MDN / DEV

8) پشتیبانی کامل از JSON و بهبود عملکرد متد JSON.stringify در جاوا اسکریپت Es10

تا قبل از این ورژن، جاوا اسکریپت، پشتیبانی کاملی از JSON نداشت، مثلا نمیتونستیم از متد JSON.stringify برای کاراکترهایی که با \ کد گذاری شدن استفاده کنیم. در واقع اگه یه کاراکتر خاص از یونیکد UTF-8 رو به عنوان ورودی به این متد میدادیم خروجی چیزی شبیه به ��� بود. اما Es10 این قابلیت رو برامون فراهم کرد که بتونیم استرینگ هایی که شامل این کاراکترهای خاص هستن رو به عنوان ورودی به این متد پاس بدیم و نتیجه رو بدون مشکل دریافت کنیم. مثلا کدهای زیر ایموجی اخطار ⛔ رو تو کنسول نمایش میدن در حالی که قبلا یا خطا داشتیم یا خروجی با مشکل نمایش داده میشد :

console.log(JSON.stringify("\u26D4"));
console.log(JSON.parse('"\u26D4"'));
console.log("\u26D4");

همچنین نمادهای جدا کننده (Separator Symbols) ی خطوط و پاراگراف ها، یعنی u2028\ و u2029\ از سال 2019 تو جاوا اسکریپت مجاز شدن و میتونیم بدون دریافت خطا ازشون استفاده کنیم.

رفرنس : MDN

9) بهبود ساختار try-catch (قابلیت catch binding اختیاری) در جاوا اسکریپت Es10

تا قبل از این ورژن، توی ساختار try-catch مجبور بودیم که پارامتر ورودی catch رو حتما بنویسیم. به این صورت :

try {
  // codes
} catch (err) {
  // codes
}

اما حالا میتونیم از نوشتنش صرف نظر کنیم و فقط در صورتی که نیاز باشه ازش استفاده کنیم :

try {
  // codes
} catch {
  // codes
}

رفرنس : jstut

10) Symbol Description Accessor در جاوا اسکریپت Es10

همونطور که میدونید موقع ساخت Symbol میتونیم یه استرینگ رو به عنوان description بنویسیم. قبلا برای دسترسی به این description هیچ اکسسوری نداشتیم و به کمک متد toString مقدار description رو میخوندیم. توی Es10 اکسسوری به نام Symbol.prototype.description اضافه شده که به کمکش میتونیم مستقیما description رو بخونیم :

const symbol = Symbol("Symbol Description");
// old way (befor Es10)
console.log(symbol.toString()); // output: Symbol(Symbol Description)
// new way (after Es10)
console.log(symbol.description); // output: Symbol Description

رفرنس : MDN / w3s.io

جمع بندی

همونطور که دیدین، تو جاوا اسکریپت Es10 به نسبت ورژن قبل از خودش، تغییرات بیشتری رو داشتیم و فیچرهای بیشتری به جاوا اسکریپت اضافه شده. چند متد جدید برای استرینگ ها، آرایه ها، آبجکت ها و بهبود عملکرد برخی از ساختارها و متدها و همچنین پشتیبانی کامل از JSON از جمله تغییرات این ورژن بود. اگه ایرادی تو آموزش دیدین یا سوالی داشتین خوشحال میشیم تو قسمت نظرات مطرح کنید. پیروز باشید.