ویژگیهای ES6 قابلیتها و امکانات زیادی را به زبان برنامه نویسی جاوااسکریپت اضافه کردهاند و باعث شدهاند تا تجربه کدنویسی با جاوااسکریپت بسیار بهبود پیدا کند که اینها همه نشاندهنده قدرت جاوااسکریپت است. اگر بخواهیم چند مورد از ویژگیهای ES6 را نام ببریم، میتوانیم به template strings، arrows، classes و … اشاره کنیم. یکی دیگر از این ویژگیهای جدید، توانایی destructing آرایهها و آبجکتها است.
destructing روشی آسان و راحت برای استخراج دادهها از آرایهها و آبجکتها است. در این مقاله قصد داریم تا دقیقتر در مورد destructing، از مجموعه ویژگیهای ES6 صحبت کنیم و بطور کامل با آن آشنا شویم.
در ادامه نحوه استفاده از آن را در آرایهها نشان میدهیم.
فرض کنید که یک آرایه از اسامی را به صورت زیر دارید:
const names = ['Luke', 'Eva', 'Phil'];
در مرحله بعدی از destructing برای استخراج دادهها از آرایه استفاده میکنیم.
با مفاهیم اولیه شروع میکنیم و اولین عنصر را از آرایه استخراج میکنیم.
const [first] = names; console.log(first); // 'Luke'
آنچه که در این سینتکس اتفاق میافتد به صورت زیر میتوانیم تجزیه و تحلیل کنیم. وقتی متغیر را داخل براکتها تعریف میکنیم در واقع مشخص میکنیم که میخواهیم اولین عنصر از آرایه names را بگیریم و به متغیر تخصیص دهیم. در این مثال، اولین عنصر را به متغیر first اختصاص میدهیم.
حال اگر بخواهیم چندین عنصر را استخراج کنیم – مثلا عنصرهای اول و دوم – چه کاری انجام میدهیم؟ به سادگی، کافی است تعداد متغیرهای بیشتری را بین براکتها اضافه کنیم. این کار کمک میکند تا عنصرهای جدید از ابتدای آرایه استخراج شوند و به متغیرهایی که تعریف کردیم، اختصاص داده شوند.
const [first, second] = names; console.log(first, second); // 'Luke' 'Eva'
اگر بخواهیم چهار عنصر را از آرایه خود، که فقط شامل سه عنصراست استخراج کنیم چه اتفاقی میافتد؟
const [first, second, third, fourth] = names; console.log(fourth); // undefined
در چنین حالتی مقدار undefined به متغیر fourth اختصاص داده میشود.
این حالت در بسیاری از سناریوها مورد قبول نیست، بنابراین کاری که میتوانیم انجام دهیم این است که یک مقدار پیشفرض تعریف کنیم که اگر آرایه عناصر کافی را نداشته باشد، از آن استفاده شود.
const [first, second, third, fourth='Martin'] = names; console.log(fourth); // 'Martin'
تا اینجا عناصر را از ابتدای لیست انتخاب میکردیم.
ممکن است سناریوهایی داشته باشیم که بخواهیم از برخی عناصر صرف نظر کنیم. در این حالت میخواهیم از اختصاص عناصر ناخواسته به متغیرها خودداری کنیم.
خوشبختانه destructing راه حل خوبی برای این مشکل فراهم کردهاست.
var [first, , second] = names; console.log(first, second); // 'Luke' 'Phil'
برای اینکار به سادگی با افزودن کاما و بدون مشخص کردن متغیر میتوانیم به عنصر بعدی برویم. در صورتی که بخواهیم از عناصر بیشتری رد شویم به سادگی کاماهای بیشتری اضافه میکنیم.
دیدیم که استخراج عناصر مختلف آسان است اما اغلب میخواهیم بخشی از آرایه که استخراج نشده است را حفظ کنیم.
این کار را با استفاده از destructing به صورت زیر میتوانیم انجام دهیم.
var [first, ...rest] = names; console.log(rest); // ['Eva','Phil']
با افزودن پیشوند … به آخرین متغیر میتوانیم بقیه آرایه را به متغیر با نام rest اختصاص دهیم.
در ادامه بررسی میکنیم که آیا میتوانیم با استفاده از destructing، دادهها را از آبجکتها استخراج کنیم؟
آبجکت زیر را که یک فرد را توصیف میکند در نظر بگیرید.
const person = { name: 'Luke', age: '24', facts: { hobby: 'Photo', work: 'Software Developer' } }
با استخراج name و age از آبجکت person شروع میکنیم.
const {name, age} = person; console.log(name, age); // 'Luke' '24'
همانطور که مشاهده میکنیم تقریبا همان سینتکسی که با آرایه داشتیم را در اینجا استفاده میکنیم – با این تفاوت که به جای براکتهای مربعی از آکولاد استفاده میکنیم تا آنچه را که میخواهیم استخراج کنیم، مشخص کنیم.
حال اگر بخواهیم چیزی عمیقتر را از ساختار آبجکت استخراج کنیم، مثلا hobby، چگونه باید عمل کنیم؟
const {facts: {hobby}} = person; console.log(hobby); // 'Photo'
با استفاده از علامت : میتوانیم مسیر را در داخل آبجکت مشخص کنیم، در نتیجه میتوانیم توضیح دهیم چه ویژگی را میخواهیم استخراج کنیم.
همانطور که هنگام destructing آرایهها مشاهده کردیم، قادر به تعیین مقادیر پیشفرض هستیم تا در صورت عدم وجود دادههای استخراجشده، از آنها استفاده شود.
برای دیدن نحوه انجام این کار، سعی میکنیم hometown را استخراج کنیم، اما با مقدار Unknown به عنوان مقدار پیشفرض.
const {hometown = 'Unknown'} = person; console.log(hometown); // 'Unknown'
آخرین کاربرد مفید این روش، کار با پارامترهای توابع است.
فرض کنیم که تابع شما یک آبجکت را به عنوان پارامتر دریافت میکند. شما میتوانید این پارامتر را با روش destructing در لیست پارامترها قرار دهید.
در مثال زیر یک تابع با نام toString، که نام و سن افراد را چاپ میکند ایجاد کردهایم که متغیرهای name و age از destructing آبجکت person، که به عنوان پارامتر به این تابع داده میشود، به دست میآیند.
const toString = ({name, age}) => { return `${name} is ${age} years old`; } toString(person); // Luke is 24 years old
۵۰ درصد تخفیف ویژه پاییز فرانت کست تا پایان هفته
کد تخفیف: atm
دیدگاهها:
arman-dezfuli
فروردین 17, 1401 در 4:25 ق.ظ
دمت گرم