درک تخریب ، پارامترهای استراحت و گسترش نحو در جاوا اسکریپت

بسیاری از ویژگی های جدید برای کار با آرایه ها و اشیاء از زمان نسخه 2015 مشخصات ECMAScript در دسترس زبان JavaScript قرار گرفته است. تعدادی از موارد قابل توجه که در این مقاله یاد خواهید گرفت ، تخریب ، پارامترهای استراحت و گسترش نحو هستند. این ویژگی ها روشهای مستقیم تری برای دسترسی به اعضای یک آرایه یا یک شی ارائه می دهد و می تواند کار با این ساختارهای داده را سریعتر و موجز تر کند.

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

تخریب

انتساب تخریب یک نحو است که به شما امکان می دهد ویژگی های شیء یا آرایه ها را به عنوان متغیرها اختصاص دهید. این می تواند خطوط کد لازم برای دستکاری داده ها در این ساختارها را به شدت کاهش دهد. دو نوع تخریب وجود دارد: تخریب شیء و تخریب آرایه.

تخریب کننده شیء

تخریب شی به شما امکان می دهد متغیرهای جدیدی را با استفاده از یک ویژگی شی به عنوان مقدار ایجاد کنید.

این مثال را در نظر بگیرید ، شیء که یک یادداشت با یک شناسه ، عنوان و تاریخ را نشان می دهد:

به طور سنتی ، اگر می خواستید متغیر جدیدی را برای هر خاصیت ایجاد کنید ، باید هر متغیر را به صورت جداگانه اختصاص دهید ، با تکرار زیادی:

با تخریب شی ، این همه می تواند در یک خط انجام شود. با اطراف هر متغیر در براکت های مجعد<>، JavaScript متغیرهای جدیدی را از هر ویژگی با همین نام ایجاد می کند:

اکنون ، console. log () متغیرهای جدید:

مقادیر خاص خاصیت را به عنوان خروجی دریافت خواهید کرد:

توجه: تخریب یک شیء شیء اصلی را تغییر نمی دهد. شما هنوز هم می توانید با تمام نوشته های آن دست نخورده با یادداشت اصلی تماس بگیرید.

تکلیف پیش فرض برای تخریب شیء متغیرهای جدیدی را با همین نام به عنوان ویژگی شی ایجاد می کند. اگر نمی خواهید متغیر جدید به همان نام دارای نام ویژگی باشد ، شما همچنین می توانید با استفاده از یک روده بزرگ ، متغیر جدید را تغییر نام دهید (:) برای تصمیم گیری در مورد نام جدید ، همانطور که در زیر با NoteID مشاهده می شود:

متغیر جدید NoteID را به کنسول وارد کنید:

خروجی زیر را دریافت خواهید کرد:

همچنین می توانید مقادیر شیء تو در تو را ویران کنید. به عنوان مثال ، شیء یادداشت را به روز کنید تا یک شیء نویسنده تو در تو داشته باشید:

اکنون می توانید یادداشت تخریب ، سپس ویران کردن یک بار دیگر برای ایجاد متغیرهایی از خواص نویسنده:

در مرحله بعد ، متغیرهای جدید FirstName و FaintName را با استفاده از الگوی الگو وارد کنید:

این نتیجه زیر را ارائه می دهد:

توجه داشته باشید که در این مثال ، اگرچه به محتویات شیء نویسنده دسترسی دارید ، خود شیء نویسنده در دسترس نیست. برای دسترسی به یک شی و همچنین مقادیر تو در تو ، باید آنها را به طور جداگانه اعلام کنید:

این کد موضوع نویسنده را خروجی می کند:

تخریب یک شی نه تنها برای کاهش میزان کدی که باید بنویسید مفید است. همچنین به شما امکان می دهد دسترسی خود را به خواص مورد نظر خود هدف قرار دهید.

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

این ویژگی طول ذاتی یک رشته را پیدا کرده و آن را برابر با متغیر طول قرار می دهد. طول ورود به سیستم برای دیدن اینکه آیا این کار کرده است:

خروجی زیر را دریافت خواهید کرد:

رشته A رشته به طور ضمنی برای بازیابی خاصیت طول به یک شیء در اینجا تبدیل شد.

تخریب آرایه

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

آرایه ها در JavaScript برای حفظ سفارش خود تضمین می شوند ، بنابراین در این حالت اولین فهرست همیشه یک سال خواهد بود ، دوم ماه و غیره. با دانستن این موضوع ، می توانید متغیرهایی را از موارد موجود در آرایه ایجاد کنید:

اما انجام این کار به صورت دستی می تواند فضای زیادی را در کد شما ایجاد کند. با تخریب آرایه ، می توانید مقادیر را از آرایه به ترتیب باز کنید و آنها را به متغیرهای خود اختصاص دهید ، مانند این:

اکنون متغیرهای جدید را وارد کنید:

خروجی زیر را دریافت خواهید کرد:

مقادیر را می توان با رها کردن نحو تخریب کننده بین کاما ، رد کرد:

اجرای این کار ارزش سال و روز را می دهد:

آرایه های تو در تو نیز می توانند ویران شوند. ابتدا یک آرایه تو در تو در تو ایجاد کنید:

سپس تخریب آن آرایه و متغیرهای جدید را وارد کنید:

خروجی زیر را دریافت خواهید کرد:

نحو تخریب می تواند برای تخریب پارامترها در یک عملکرد اعمال شود. برای آزمایش این موضوع ، شما کلیدها و مقادیر خارج از Object. entries () را تخریب خواهید کرد.

ابتدا موضوع یادداشت را اعلام کنید:

با توجه به این شی ، می توانید جفت های ارزش کلیدی را با استدلال های تخریب کننده همانطور که به روش foreach () منتقل می شوند ، لیست کنید:

یا می توانید همان کار را با استفاده از یک حلقه انجام دهید:

در هر صورت ، موارد زیر را دریافت خواهید کرد:

تخریب شیء و تخریب آرایه را می توان در یک تکلیف مخرب واحد ترکیب کرد. پارامترهای پیش فرض نیز می تواند با تخریب استفاده شود ، همانطور که در این مثال مشاهده می شود که تاریخ پیش فرض را در تاریخ جدید () تعیین می کند.

ابتدا موضوع یادداشت را اعلام کنید:

سپس شیء را تخریب کنید ، در حالی که متغیر تاریخ جدید را با پیش فرض تاریخ جدید () تنظیم کنید:

Console. Log (تاریخ) سپس خروجی مشابه موارد زیر را ارائه می دهد:

همانطور که در این بخش نشان داده شده است ، نحو واگذاری تخریب انعطاف پذیری زیادی را به JavaScript اضافه می کند و به شما امکان می دهد کد موجز بیشتری بنویسید. در بخش بعدی ، خواهید دید که چگونه می توان از نحو گسترش برای گسترش ساختار داده ها در ورودی های داده های تشکیل دهنده آنها استفاده کرد.

گسترش

گسترش نحو (.) یکی دیگر از موارد مفید JavaScript برای کار با آرایه ها ، اشیاء و تماس های عملکردی است. گسترش اجازه می دهد تا اشیاء و موارد تکرار شونده (مانند آرایه ها) بسته بندی نشده یا گسترش یابد ، که می تواند برای تهیه نسخه های کم عمق ساختارهای داده برای افزایش سهولت در دستکاری داده ها استفاده شود.

با آرایه ها پخش می شود

گسترش می تواند کارهای مشترک را با آرایه ها ساده کند. به عنوان مثال ، بیایید بگوییم که شما دو آرایه دارید و می خواهید آنها را با هم ترکیب کنید:

در ابتدا شما برای جمع آوری دو آرایه از Concat () استفاده می کنید:

اکنون می توانید از PROPEAT برای باز کردن آرایه ها در یک آرایه جدید استفاده کنید:

اجرای این موارد به شرح زیر است:

این می تواند به ویژه در مورد تغییرپذیری مفید باشد. به عنوان مثال ، شما ممکن است با برنامه ای کار کنید که کاربران را در مجموعه ای از اشیاء ذخیره کرده است:

شما می توانید از Push برای اصلاح آرایه موجود استفاده کنید و یک کاربر جدید اضافه کنید ، که این گزینه قابل تغییر است:

اما این تغییر آرایه کاربر را تغییر می دهد ، که ممکن است بخواهیم آن را حفظ کنیم.

گسترش به شما امکان می دهد یک آرایه جدید از موجود موجود ایجاد کنید و یک مورد جدید را به انتها اضافه کنید:

اکنون آرایه جدید ، به روزرسانی های جدید ، کاربر جدید را دارد ، اما آرایه کاربران اصلی بدون تغییر باقی مانده است:

ایجاد نسخه های داده به جای تغییر داده های موجود می تواند به جلوگیری از تغییرات غیر منتظره کمک کند. در JavaScript ، هنگامی که یک شی یا آرایه ایجاد می کنید و آن را به متغیر دیگری اختصاص می دهید ، در واقع یک شی جدید ایجاد نمی کنید - شما در حال گذر از مرجع هستید.

این مثال را بگیرید ، که در آن یک آرایه ایجاد شده و به متغیر دیگری اختصاص داده می شود:

حذف آخرین مورد آرایه دوم ، مورد اول را اصلاح می کند:

این به خروجی می دهد:

گسترش به شما امکان می دهد یک کپی کم عمق از یک آرایه یا شیء تهیه کنید ، به این معنی که هرگونه ویژگی سطح بالا کلون می شود ، اما اشیاء تو در تو هنوز هم با مرجع منتقل می شوند. برای آرایه ها یا اشیاء ساده ، یک کپی کم عمق ممکن است تمام آنچه شما نیاز دارید باشد.

اگر همان کد مثال را بنویسید اما آرایه را با پخش کپی کنید ، آرایه اصلی دیگر اصلاح نمی شود:

موارد زیر به کنسول وارد می شود:

از گسترش نیز می توان برای تبدیل یک مجموعه یا هر نوع قابل تکرار دیگر به یک آرایه استفاده کرد.

یک مجموعه جدید ایجاد کنید و برخی از ورودی ها را به آن اضافه کنید:

در مرحله بعد ، از اپراتور پخش با تنظیم و ورود به سیستم استفاده کنید:

این موارد زیر را ارائه می دهد:

این همچنین می تواند برای ایجاد یک آرایه از یک رشته مفید باشد:

این یک آرایه با هر کاراکتر به عنوان یک مورد در آرایه می دهد:

با اشیاء پخش می شود

هنگام کار با اشیاء ، می توان از گسترش برای کپی و به روزرسانی اشیاء استفاده کرد.

در ابتدا ، Object. Assign () برای کپی کردن یک شی استفاده شد:

SecondObject اکنون یک کلون از OriginalObject خواهد بود.

این با نحو گسترش یافته ساده می شود - می توانید با گسترش آن در یک مورد جدید ، یک شیء را کپی کنید:

این به موارد زیر منجر می شود:

درست مانند آرایه ها ، این فقط یک نسخه کم عمق ایجاد می کند و اشیاء تو در تو هنوز هم با مرجع منتقل می شوند.

افزودن یا اصلاح خصوصیات روی یک شی موجود به روشی تغییر ناپذیر با گسترش ساده می شود. در این مثال ، خاصیت isloggedin به موضوع کاربر اضافه می شود:

این موارد زیر را صادر می کند:

نکته مهمی که باید با به روزرسانی اشیاء از طریق گسترش به آن توجه داشته باشید این است که هر شیء تو در تو نیز باید پخش شود. به عنوان مثال ، بیایید بگوییم که در شیء کاربر یک شیء سازمان تو در تو وجود دارد:

اگر سعی کردید مورد جدیدی را به سازمان اضافه کنید ، زمینه های موجود را رونویسی می کند:

این به موارد زیر منجر می شود:

اگر جهش پذیری مسئله ای نباشد ، می توان این زمینه را مستقیماً به روز کرد:

اما از آنجا که ما به دنبال یک راه حل غیرقابل تغییر هستیم ، می توانیم شیء داخلی را برای حفظ خواص موجود پخش کنیم:

این موارد زیر را ارائه می دهد:

با تماس های عملکردی پخش می شود

گسترش نیز می تواند با آرگومان در تماس های عملکردی استفاده شود.

به عنوان نمونه ، در اینجا یک عملکرد ضرب که سه پارامتر را می گیرد و آنها را ضرب می کند:

به طور معمول ، شما سه مقدار را به صورت جداگانه به عنوان آرگومان به تماس عملکرد منتقل می کنید ، مانند این:

این موارد زیر را ارائه می دهد:

با این حال ، اگر تمام مقادیری که می خواهید به عملکردی که قبلاً در یک آرایه وجود دارد منتقل کنید ، نحو گسترش به شما امکان می دهد از هر مورد در یک آرایه به عنوان یک آرگومان استفاده کنید:

این همان نتیجه را خواهد داد:

توجه: بدون گسترش ، این می تواند با استفاده از Apply () انجام شود:

اکنون که دیده اید که چگونه گسترش می تواند کد شما را کوتاه کند ، می توانید نگاهی به استفاده متفاوت از آن بیندازید. نحو: پارامترهای استراحت.

پارامترهای استراحت

آخرین ویژگی ای که در این مقاله خواهید آموخت ، نحو پارامتر REST است. نحو همانند گسترش () به نظر می رسد اما اثر متضاد دارد. به جای باز کردن یک آرایه یا شیء به مقادیر فردی ، نحو استراحت مجموعه ای از تعداد نامحدود از آرگومان ها را ایجاد می کند.

به عنوان مثال ، در عملکرد مجدد عملکرد ، اگر می خواستیم استدلال ها آرایه ای باشد که از تعداد نامحدودی از استدلال ها تشکیل شده است ، می توانیم موارد زیر را داشته باشیم:

تمام استدلال های منتقل شده به عملکرد RESTTEST اکنون در آرایه Args موجود است:

Syntax REST را می توان به عنوان تنها پارامتر یا به عنوان آخرین پارامتر در لیست استفاده کرد. اگر به عنوان تنها پارامتر مورد استفاده قرار گیرد ، تمام استدلال ها را جمع می کند ، اما اگر در پایان یک لیست باشد ، همانطور که در این مثال مشاهده می شود ، هر استدلالی را که باقی مانده است جمع می کند:

این دو آرگومان اول را به صورت جداگانه طی می کند ، سپس بقیه را به یک آرایه گروه بندی می کند:

در کد قدیمی ، متغیر آرگومان ها می توانند برای جمع آوری تمام آرگومان های منتقل شده به یک عملکرد استفاده شوند:

این نتیجه زیر را می دهد:

با این حال ، این چند معایب دارد. اول ، متغیر آرگومان با توابع فلش قابل استفاده نیست.

این خطایی به وجود می آورد:

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

در هنگام تخریب آرایه ها نیز می توان از استراحت استفاده کرد:

از استراحت نیز می توان هنگام تخریب اشیاء استفاده کرد:

ارائه خروجی زیر:

در این روش ، SYNTAX REST روشهای کارآمد برای جمع آوری مقدار نامشخص از موارد را فراهم می کند.

نتیجه

در این مقاله ، شما در مورد تخریب ، گسترش نحو و پارامترهای استراحت آموخته اید. به طور خلاصه:

• تخریب برای ایجاد متغیرها از آرایش آرایه یا خصوصیات شی استفاده می شود.
• گسترش نحو برای باز کردن موارد تکرار شده مانند آرایه ها ، اشیاء و تماس های عملکردی استفاده می شود.
• SYNTAX پارامتر REST آرایه ای را از تعداد نامحدودی از مقادیر ایجاد می کند.

تخریب ، پارامترهای استراحت و گسترش نحو ویژگی های مفیدی در JavaScript است که به تمیز نگه داشتن کد شما کمک می کند.

اگر می خواهید در عمل ویران کنید ، نگاهی به چگونگی سفارشی کردن اجزای React با غرفه ها بیندازید ، که از این نحو برای داده های تخریب استفاده می کند و آن را به اجزای جلویی سفارشی منتقل می کند. اگر می خواهید در مورد JavaScript اطلاعات بیشتری کسب کنید ، به صفحه نحوه کدگذاری ما در صفحه سری JavaScript برگردید.

اگر از این آموزش و جامعه گسترده تر ما لذت بردید ، در نظر بگیرید که محصولات دیجیتالی ما را بررسی کنید که می تواند به شما در دستیابی به اهداف توسعه خود نیز کمک کند.

سری آموزش: نحوه کدگذاری در JavaScript

JavaScript یک زبان اسکریپتینگ با سطح بالا و مبتنی بر شیء است که به عنوان ابزاری برای ایجاد صفحات وب محبوب است.