برنتی / می‌نویسم که فکر کنم

دنیای جاوااسکریپت ۴ - mutate یا تغییر دادن object

1399.05.31·دنیای جاوااسکریپت

نکته‌ی اول: object تو در تو وجود ندارد!

object تو در تو وجود ندارد و هر جفت علامت کروشه {} نشانه‌ی یک آبجکت متمایز و جدید است.

گام اول: تعریف متغیر sherlock
 

let sherlock = {
  surname: 'Holmes',
  address: { city: 'London' }
};

بیایید نگاه دقیق‌تری به فرایند شکل گیری این مدل ذهنی داشته باشیم.

گام دوم: تعریف متغیر sherlock
 

let john = {
  surname: 'Watson',
  address: sherlock.address
};

نتیجه مدل ذهنی مثال بالا

فرایند شکل گیری مدل ذهنی بالا

نکته‌ی دوم: پراپرتی‌های هر شیئ همیشه به یک مقدار اشاره می‌کنن!

نکته‌ی دوم پراپرتی‌های هر شیئ همیشه به یک مقدار اشاره می‌کنن نه یک متغیر یا پراپرتی دیگر

گام سوم: ایجاد تغییر در پراپرتی‌ها

نتیجه کد زیر را با استفاده از مدل ذهنی گام قبلی حدس بزنید.

john.surname = 'Lennon';
john.address.city = 'Malibu';

مدل ذهنی بصورت زیر تغییر می‌کند.

console.log(sherlock.surname); // "Holmes"
console.log(sherlock.address.city); // "Malibu"
console.log(john.surname); // "Lennon"
console.log(john.address.city); // "Malibu"

نگاه دقیقتر به فرایند اعمال تغییرات

همانطور که مشاهده می‌کنید با تغییر مقدار city آدرس john، مقدار city آدرس sherlock هم عوض می‌شود (صرفا پراپرتی city به یک مقدار دیگر اشاره می‌کند زیرا طبق آنچه آموختیم مقادیر Primitive غیر قابل تغییر هستند.)

راه حل اول ایجاد شیئ address جدید

مشکلی که ما در این مرحله با آن روبرو هستیم تغییر آدرس sherlock در زمان تغییر آدرس john است برای این کار با کد زیر می‌توانیم بصورت زیر یک object جدید برای پراپرتی address تعریف کنیم.

// Replace Step 3 with this code:
john.surname = 'Lennon';
john.address = { city: 'Malibu' };

مدل ذهنی کد بالا

همانطور که مشاهده می‌کنید با عملیات انتصاب = به پراپرتی address این پراپرتی به یک آبجکت جدید که با خط نارنجی مشخص شده‌است متصل شد.

راه حل دوم هیچ تغییری در شیئ john ایجاد نکنیم

راه حل بعدی این است که برای اینکه متغیر john شامل مقادیر جدیدی باشد با عملیات انتصاب یک شیئ جدید ایجاد کرده و متغیر john را به آن متصل کنیم.

// Replace Step 3 with this code:
john = {
  surname: 'Lennon',
  address: { city: 'Malibu' }
};

همانطور که مشاهده می‌کنید آبجکتی که قبلا john به آن متصل بوده که شامل پراپرتی surname که به مقدار  "Watson" متصل است و شامل پراپرتی address می‌باشد به حال خود رها شده و با خط جدید نارنجی رنگ به یک مقدار دیگر متصل شده است که ما با عملیات این کار را انجام دادیم.

§ فهرست « دنیای جاوااسکریپت »
  1. 1405.07.18هزار آیکون در یک میلی‌ثانیه: کش کردن رسم SVG به‌جای memoکامپوننت آیکونی که SVG را از داده می‌سازد در هر رندر کمی کار اضافه می‌کند. اندازه گرفتم memo کجا کمک می‌کند و کجا نه، و با نگه داشتن عناصر رسم هر آیکون، رندر مجدد هزار آیکون را از ۳.۶ به حدود ۱ میلی‌ثانیه رساندم.
  2. 1405.07.04ساختن هوکی شبیه useSyncExternalStore از صفربا useState و useEffect قدم‌به‌قدم هوکی می‌سازم که به یک store بیرونی subscribe شود، باگ هر نسخه را نشان می‌دهم و آخر کار توضیح می‌دهم چرا نسخه‌ی خودِ ری‌اکت کاری می‌کند که از کد کاربر برنمی‌آید.
  3. 1405.06.29مشکل Tearing در ری‌اکت چیست؟تیرینگ زمانی رخ می‌دهد که یک مقدار بیرون از چرخه‌ی رندر ری‌اکت حین رندر تغییر کند و کامپوننت‌های مختلف در یک فریم، دو مقدار متفاوت از همان داده را نشان بدهند.
  4. 1405.06.29چطور در دیجیکالا با useSyncExternalStore جلوی رندرهای اضافه را گرفتیموقتی داده‌ی ویجت‌های یک لیست با تأخیر و به‌صورت پلکانی می‌رسد، نگه‌داشتن آن در یک state یا Context مشترک باعث می‌شود کل لیست با هر آپدیت دوباره رندر شود؛ useSyncExternalStore به‌همراه React.memo راه می‌دهد فقط همان ویجتی که داده‌اش عوض شده رندر شود.
  5. 1399.06.03دنیای جاوااسکریپت - مقدمهآموزش ساده و روان اصول جاوااسکریپت با مدل ذهنی Dan Abramov
  6. 1399.06.01دنیای جاوااسکریپت ۵ - Prototypesمفهوم ساده‌ی Prototypes یا نمونه اولیه در جاوااسکریپت
  7. 1399.05.31دنیای جاوااسکریپت ۴ - mutate یا تغییر دادن object"مثال‌هایی از تغییر در object
  8. 1399.05.31دنیای جاوااسکریپت ۳ - انواع روش‌های مقایسه برابریانواع روش‌های مقایسه در جاوااسکریپت Object.is
  9. 1399.05.31دنیای جاوااسکریپت ۲ - متغیرها در جاوااسکریپتمتغیرها یا Variables در جاوااسکریپت و تفاوت آنها با مقادیر یا Values
  10. 1399.05.24دنیای جاوااسکریپت ۱ - انواع مقدارها یا Valuesجاوااسکریپت شامل ۹ نوع از مقادیر هست که ۷ مورد آن از نوع Primitive و یا اولیه و اصلی و ۲ مورد دیگر که از نوع Object و Function می‌باشند.