tgoop.com/fullStackDevs/523
Last Update:
❇️ Object Destructuring in ES6
🔸 ویژگی Object Destructuring یکی از ویژگی های جدید ES6 میباشد و در این پست قصد داریم به معرفی آن بپردازیم هم چنین در این پست برای اختصار از OD بجای Object Destructuring استفاده میکنیم.
🔻توجه داشته باشید که این اختصار اصلا رایج نبوده و فقط برای نگارش آسان تر در این پست استفاده شده است
🔹 اضافه شدن ویژگی OD به ES6 باعث به وجود آمدن هزاران syntax جدید در ES6 شد.
ویژگی OD کاربرهای بسیاری دارد و هنگام کار کردن با object ها array ها function ها بسیار پر استفاده خواهد بود.
🔹می توانیم از OD به همراه object ها برای ترکیب کردن دو یا سه یا .. object با یکدیگر استفاده کنیم یا حتی انتخاب برخی از فیلد های یک object و تبدیل آن به یک object کوچکتر استفاده کنیم.
🔹هم چنین از OD به همراه array ها برای ترکیب کردن ارایه ها یا حتی شکستن یک ارایه به بخش کوچکتر استفاده کنیم .
🔹در function ها از OD برای فیلتر کردن ارایه ها و object هایی که به عنوان آرگومان تعریف کرده ایم استفاده میکنیم.
( توجه کنید که کاربرد OD ها محدود به این موارد نیست و کاربرد های بسیار فراوانی دارد، موارد فوق صرفا جهت معرفی بخش کوچکی از کاربرد های این ویژگی ذکر شده اند. )
✳️ در این پست از OD به همراه object ها استفاده میکنیم.
🔸ابتدا باید به کمک یک مثال مشکلی قدیمی را بررسی کنیم و به ببینیم که چگونه OD به کمک ما می آید.
فرض کنید چنین object ای داریم :
const person = {
first: 'Brendan ',
last: 'Eich ',
country: 'USA',
city: 'Pittsburgh',
};
و برای دریافت مقادیر فیلد های این object بدین شکل عمل میکردیم :
const first = person.first;
const last = person.last;
🔹اگر object ما ده ها فیلد داشت برای دریافت مقدار هر یک از فیلد های ان باید متغیر تعریف کنیم و هر بار مقدار فیلد مورد نظر را به متغیر خود اختصاص دهیم. کاری تکراری و طاقت فرسا.
اینجاست که OD وارد میشود و به کمک ما می آید.
const { first, last } = person;
🔹در این کد فیلد های last و first از person خوانده میشود و در متغیر های همنام متناظر خود قرار میگیرد و از این به بعد میتوانیم مقادیر را از متغیر های last و first بخوانیم و در جای جای scope استفاده کنیم.
🔹سینتکس مثال قبل یکی از سینتکس ها و کاربرد های فراوان OD میباشد.
هم چنین اگر مقدار فیلد city را person نیاز داشته باشیم میتوانیم به این شکل عمل کنیم.
const { first, last,city } = person;
console.log(first); //Brendan
console.log(last); //Eich
console.log(city); //Pittsburgh
حال بیایید object خود را کمی پیچیده تر کنیم فرض کنید چنین object ای داریم :
const person = {
first: 'Brendan',
last: 'Eich',
links: {
social: {
site: 'https://brendaneich.com',
twitter: 'https://twitter.com/BrendanEich',
}
}
};
از این object فقط مقادیر site و twitter را نیاز داریم .
در گذشته برا خواندن این مقادیر بدین شکل عمل میکردیم :
const twitter = person.links.social.twitter;
const site = person.links.social.site;
اما می توانیم با کمک OD بدین شکل عمل کنیم :
const { twitter, site } = person.links.social;
console.log(twitter, site);
🔻 نکته مهم این است که متغیر ها بایستی همنام با فیلد های object باشند تا مقادیر مورد نظر در آنها ریخته شود.
اما اگر لازم بود تا متغیری با نامی متفاوت از آنچه که فیلد object هست داشته باشیم بدین شکل عمل میکنیم :
const person = {
first: 'Brendan ',
last: 'Eich ',
country: 'USA',
city: 'Pittsburgh',
};
const { first : personFirstName } = person;
بدین صورت میتوانید به متغیر های خود در OD نامی متفاوت دهید.
✳️ Set default value with OD
🔸چگونه در هنگام destruct کردن یک آبجکت مقادیر پیشفرض برای متغیر ها اختصاص دهیم.
فرض کنیم object زیرا داریم
const settings = {
speed: 150
}
const { speed, width } = settings;
🔹 همانطور که مشخص است ابجکت settings دارای فیلدی به نام width نیست با log کردن این فیلد مقدار undefined لاگ خواهد شد.
برای set کردن مقدار پیفرض برای متغیر width در هنگام destruct کردن آبجکت settings :
const { speed, width = 500 } = settings;
بدین شکل عمل میکنیم .
🔻 نکته بسیار مهم این است که فقط در صورتی که مقدار متغیر width براربر با undefined باشد این مقدار پیشفرض برای آن set خواهد شد.
در صورتی که آبجکت settings دارای فیلد متناظری باشد حتی اگر مقدار آن null false 0 هم باشد این مقادیر در متغیر width قرار میگیرد.
☑️قسمت های بعدی OD در صورت دریافت فیدبک های انرژی بخش ادامه خواهد داشت.
❇️ Happy JS Coding 😉
@FullStackDevs
BY Web Devs
Share with your friend now:
tgoop.com/fullStackDevs/523