آموزش ویژگی های ECMAScript 6 (جلسه 14) : متدهای جدید برای اشیاء

- visibility ۶ mode_comment

همونطور که اطلاع دارید در جلسات قبل موارد بهبود یافته مربوط به اشیاء رو با هم بررسی کردیم و باهاشون آشنا شدیم. در این جلسه میخوایم با متدهای جدید is و assign که در ES6 به شئ سراسری Object اضافه شده اند، آشنا بشیم. با استفاده از این متدها میتونین بعضی از موارد خاص رو با دقت و سادگی بیشتری انجام بدین که در ادامه با استفاده از مثالهای متنوع، اونا رو بهتون آموزش میدیم.

استفاده از متد Object.is

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

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

در مثال اول به دلیل اینکه هر دو عدد هستند و مقدار اونا نیز با یکدیگر برابر است، true در Console چاپ میشه. اما در مثال دوم چون دیگه رشته 5 نمیتونه به عدد تبدیل بشه، پس مقدار false در خروجی نمایش داده میشه. میبینید که با استفاده از === میتونیم جوابهای دقیقتری رو بدست بیاریم. اما بعضی از حالات هست که عملگر === نیز نمیتونه اونا رو به درستی با یکدیگر مقایسه بکنه و باعث گیج شدن برنامه نویسان میشه.

همونطور که میدونین علاوه بر 0، مقادیر -0 و +0 نیز وجود دارند و میدونیم که با هم برابر نیستند ولی زمانی که از عملگرهای == یا === استفاده میکنیم، جواب درست به ما نمایش داده نمیشه. کدهای زیر رو در نظر بگیرید:

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

همونطور که دیدید متد is از شئ سراسری Object رو مورد استفاده قرار دادیم و دو ورودی مورد نظر رو به اون پاس دادیم. با اینکار در خروجی false نمایش داده میشه. میبینید که به راحتی این کار رو انجام دادیم. مورد دیگه ای که با استفاده از == و === نمیتونیم اونا رو به درستی با یکدیگر مقایسه کنیم، NaN است. مثلا کدهای زیر رو در نظر بگیرید:

همونطور که میدونید، NaN مختصر Not a Number هست و انتظار داریم که موارد بالا مقدار true رو برگشت بدن. اما هر دو عملگر بالا، مقدار false رو در خروجی نمایش میدن. در اینجا نیز میتونیم با استفاده از متد is مشکل رو برطرف کنیم:

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

استفاده از متد Object.assign

استفاده از این متد خیلی راحت و در عین حال خیلی مفید است. این متد حداقل دو ورودی رو دریافت میکنه و ورودی اول target یا هدف است و ورودی های بعدی Source یا منبع برای قرار گرفتن در target هستند. همه این ورودی ها باید object یا شئ باشند و کاری که این متد انجام میده اینه که همه ویژگی های اشیاء Source رو کپی میکنه و درون target قرار میده. مثلا فرض کنید که میخوایم از یک شئ یک کپی بگیریم. برای اینکار بصورت زیر عمل میکنیم:

در خط 1 شئ مورد نظر رو تعریف کردیم و در خط بعد با استفاده از متد assign ویژگی های شئ obj رو درون یک شئ خالی قرار دادیم و اون رو به متغیر copy نسبت دادیم. با اینکار به سادگی یک کپی از شئ obj گرفتیم. حالا فرض کنید میخوایم تعداد بیشتری از اشیاء رو با هم ترکیب کنیم. برای اینکار بصورت زیر عمل میکنیم:

با اینکار خروجی بصورت زیر میشه:

بهمین راحتی. حالا بنظرتون اگر این اشیاء ویژگی های مشترک و هم نام داشته باشند، چه اتفاقی میوفته؟ کد زیر رو در نظر بگیرید:

همونطور که میبینید ویژگی های مشترک وجود دارند. در این مواقع ویژگی ها بازنویسی یا override میشن و آخرین مقداری که برای ویژگی مشخص شده، به عنوان مقدار اون ویژگی در شئ ترکیب شده، قرار میگیره. خروجی کد بالا بصورت زیر میشه:

امیدوارم از این متدها خوشتون اومده باشه و بتونه بهتون کمک کنه.

موفق و پیروز باشید.

یا علی

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

ممنون استاد یدونه‌ای

محمد اسفندیاری

خواهش میکنم
موفق باشید

hamid7n

سلام آقای اسفندیاری عزیز
من اولین باره عدد صفر منفی و مثبت دیدم لطفا کاربردشونو توضیح بدید که در کدنویسی کجا استفاده میشن.
بازم ممنون بابت آموزشهای خوبتون و وقتی که صرف میکنید

محمد اسفندیاری

سلام دوست عزیز
برای مطالعه بیشتر در این زمینه میتونین این لینک رو ببینید:
http://2ality.com/2012/03/signedzero.html
موفق باشید

hamid7n

تشکر بابت پاسخگویی

محمد اسفندیاری

خواهش میکنم
موفق باشید

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.