campaign-experts

همه چیز در مورد ویژگی‌های اضافه شده به Javascript در Ecmascript 2017 - قسمت 1 - String padding و Object.entries



visibility  
mode_comment   ۰

همه چیز در مورد ویژگی‌های اضافه شده به Javascript در Ecmascript 2017اینکه بخوایم همیشه آخرین تغییرات Javascript رو دنبال کنیم، مقداری سخت هست و مثالهای ساده‌ای که اونا رو توضیح بده و با استفاده از اونا بتونیم این امکانات جدید رو متوجه بشیم، کم پیدا میشه.

در این مطلب میخوایم ویژگی‌های جدید اضافه شده در Ecmascript 2017 یا ES2017 رو بهتون معرفی کنم و مثالهای کاربردی از اونا در اختیارتون قرار بدم. خب با متد values اضافه شده به شئ سراسری Object شروع میکنم.

1. Object.values

Object.values() یک متد جدید هست که شبیه به Object.keys() هست که همه مقادیر شئ مورد نظرتون رو بصورت یک آرایه برگشت میده. این متد فقط مقادیر مربوط به خود Object رو برگشت میده و به اون مقادیری که در زنجیره‌ی Prototype هستند کاری نداره.

در ES2015 برای اینکه آرایه‌ای از مقادیر رو به دست بیاریم بصورت زیر عمل میکردیم:

همونطور که میبینید در ابتدا آرایه‌ای از کلیدها رو به دست میاریم و بعد از اون با استفاده از map، مقادیر اونا رو به وجود میاریم. حالا با استفاده از Object.values دیگه نیاز به این کار نیست و بصورت مستقیم میتونیم آرایه‌ای از مقادیر رو بدست بیاریم. بصورت زیر:

به همین راحتی.

2. Object.entries

Object.entries() ترکیبی از Object.keys() و Object.values() هست که ترکیبی از کلیدها و مقادیر رو بصورت آرایه در اختیارتون قرار میده.

با استفاده از این متد استفاده از Object ها در حلقه بسیار راحتتر از قبل شده است. برای مثال فرض کنیم که میخوایم کلیدها و مقادیر یک شئ رو چاپ کنیم. در ES2015 بصورت زیر عمل میکنیم:

همونطور که میبینید در ابتدا کلیدها رو بیرون کشیدیم و با استفاده از forEach مقادیر اونا رو بدست آوردیم. خروجی بصورت زیر خواهد بود:

بجای این کار میتونین از Object.entries استفاده کنید و کار خودتون رو راحتتر کنید:

به همین راحتی. میبینید که Object.entries آرایه‌ای از آرایه‌های دو عضوی کلید و مقدار رو برگشت میده و میتونین از اونا استفاده کنید.

3. String padding

2 متد padStart و padEnd به متدهای موجود برای رشته‌ها اضافه شدند که میتونین با استفاده از اونا رشته‌ای رو به ابتدا و انتهای String مورد نظرتون اضافه کنید. Syntax استفاده از این متدها بصورت زیر هست:

همونطور که میبینید در ابتدا رشته مورد نظری که میخوایم تغییرات رو بر روی اون اعمال کنیم مشخص میکنیم و بعد از متد padStart استفاده میکنیم. متد padStart و padEnd دو ورودی رو دریافت میکنند. ورودی اول تعداد کاراکترهای رشته خروجی رو مشخص میکنه و ورودی دلخواه یا optional دوم نیز رشته‌ای که میخوایم با استفاده از اون padding رو به وجود بیاریم، مشخص میکنیم. اگر ورودی دوم رو مشخص نکنیم، padding با استفاده از space یا فضای خالی به وجود میاد.

متخصص جاوا اسکریپت
با جاوا اسکریپت جادوگری کنید! آیا می دونید با زبان جاوااسکریپت می تونید، برای فرانت اند و بک اند وبسایت ها برنامه نویسی کنید؟ همینطور اپلیکیشن دسکتاپ و موبایل بسازید؟ اگر دوست داری اینکارها رو انجام بدی و React, ElectronJS, ReactNative, NodeJS,MongoDB و ... رو تو یه دوره یاد بگیری، متخصص جاوااسکریپت سون لرن رو حتما ببین : متخصص جاوا اسکریپت arrow_back

مثالهایی زیر رو ببینید:

همونطور که میبینید میتونیم رشته مورد نظر رو به تعداد کاراکتری که بخوایم تبدیل کنیم. حالا میخوایم مثالی برای padStart بزنیم. کد زیر رو ببینید:

همونطور که میبینید یک لیست از اعداد با تعداد کاراکترهای متفاوت داریم. مثلا میخوایم اونا رو در جایی چاپ کنیم و میخوایم همه اونا 10 کاراکتر باشند و به زیبایی در کنار یکدیگر نمایش داده بشن. با اینکار تا جایی که تعداد کاراکتر آیتمها به 10 برسه، 0 به ابتدای اونا اضافه میشه. خروجی کد بالا در انتها قرار داده شده است.

حالا برای padEnd هم میشه به همین صورت عمل کرد. فرض کنید که یک لیست داریم که تعداد کاراکترهای اونا متفاوت هست و میخوایم مقادیر اونا رو در سمت راست در زیر یکدیگر قرار بدیم. برای انجام اینکار در کدهای زیر از padEnd و padStart و Object.entries بصورت همزمان استفاده شده تا خروجی مناسبی رو به وجود بیاریم:

همونطور که میبینید padEnd تا جایی که name به 20 کاراکتر برسه، - رو به انتهای اون اضافه میکنه و به count نیز تا جایی که به 3 کاراکتر برسه، 0 به ابتدای اون اضافه میکنه. میبینید که خروجی در انتها قرار گرفته و نام ماشین‌ها و مقادیر اونا به زیبایی در زیر یکدیگر قرار داده شده‌اند.

استفاده از padStart و padEnd برای کاراکترهای 2 بایتی

هنگامی که دارید از این متدها برای ایموجی یا Emoji ها و کاراکترهای 2 بایتی دیگر استفاده میکنید، باید توجه داشته باشید که ممکنه اونطوری که توقع دارید، خروجی مورد نظرتون رو مشاهده نکنید. مثلا فرض کنید که میخوایم Emoji مربوط به Emoji ماشین یا 🚙 رو به 10 کاراکتر برسونیم. برای اینکار بصورت زیر عمل میکنم:

این مشکل بخاطر این هست که این Emoji از 2 کاراکتر \ud83d\ude99 ساخته شده است و چون رشته car سه کاراکتر دارد و فقط 7 تای دیگه برای padding نیاز داریم، Javascript سه تا از Emoji ها رو قرار میده و فقط یک کاراکتر دیگه برای جا دادن باقی میمونه. به همین دلیل فقط اولین بایت Emoji قرار داده میشه که همون \ud83d که باعث به وجود اومدن � میشه.

4. Object.getOwnPropertyDescriptors

این متد همه جزئیات مربوط به شئ مورد نظر رو در اختیارتون قرار میده. همونطور که میدونین Object.assign همه اطلاعات مربوط به شئ رو به جزء متدهای getter و setter بصورت سطحی کپی میکنه. با استفاده از Object.getOwnPropertyDescriptors علاوه بر اطلاعاتی که Object.assign کپی میکنه، اطلاعات مربوط به getter و setter رو نیز کپی میکنه. کدهای زیر رو ببینید:

همونطور که میبینید یک Object به نام Car با ویژگی‌های مختلفی قرار داده شده که یک getter و setter نیز به نام discount برای اون تعریف شده است. در خط 12 با استفاده از متد getOwnPropertyDescriptor میخوام اطلاعاتی در مورد ویژگی discount مربوط به این شئ Car رو به دست بیاریم. میبینید که خروجی اون در خط 13 به صورت comment قرار داده شده و مشخصه که این ویژگی بصورت getter و setter هست.

حالا اگر یک کپی از شئ Car با استفاده از Object.assign بگیریم و اون رو در متغیر ElectricCar قرار بدیم و مجددا از getOwnPropertyDescriptor استفاده کنیم، میبینیم که اطلاعاتی در مورد ویژگی discount در اختیارمون قرار نمیده و به این دلیل هست که Object.assign متدهای getter و setter رو کپی نمیکنه.

برای برطرف کردن این مشکل میتونین از متد Object.defineProperties و Object.getOwnPropertyDescriptor استفاده کنید. بصورت زیر:

میبینید که این متد همه ویژگی‌های مربوط به شئ مورد نظر از جمله getter و setter رو نیز کپی میکنه.

در قسمت بعد با ادامه ویژگی‌های اضافه شده به Ecmascript 2017 در خدمتتون هستم.

comment دیدگاه کاربران

add_circle ارسال دیدگاه

خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :