خبرکاو:

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

من در این مقاله به شما نشان خواهم داد که چگونه آنها کار می کنند.

کلیدهای استاتیک و دینامیک چیست؟

منظورم از کلیدهای استاتیک چیست؟ به این شی نگاه کنید:

 const obj = { name: "dillion", age: 1000, }

می توانید ببینید که name و age کلیدهای ثابت هستند. آنها از جایی نمی آیند - آنها محاسبه نمی شوند (محاسبه می شوند). این کلیدها مستقیماً به شی اضافه می شوند.

اگر بخواهید یک کلید پویا اضافه کنید چه؟ یک کلید پویا در اینجا به نتیجه یک عبارت اشاره دارد. به عنوان مثال، یک کلید پویا می تواند یک متغیر یا یک مقدار محاسبه شده باشد.

من در این مقاله به شما نشان خواهم داد که چگونه این کار را انجام دهید.

من یک نسخه ویدیویی از این موضوع دارم که می توانید آن را نیز تحلیل کنید.

ویژگی Computed Property Names

ویژگی Computed Property Names در ES6 به شما این امکان را می‌دهد که نام ویژگی‌ها را به صورت پویا تنظیم کنید - یعنی نام ویژگی‌ها عباراتی هستند که به یک مقدار ارزیابی می‌شوند.

این ویژگی برای نام های دارایی که از قبل نمی دانید مفید است. برای یک نام دارایی مانند "name"، شما قبلاً این را می دانید، پس می توانید شی خود را به این صورت ایجاد کنید:

 const object = { name: value }

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

در چنین مواردی، نام ملک را از قبل نمی دانید. و اینجا جایی است که از ویژگی نام‌های اموال محاسبه شده استفاده می‌کنید.

برای استفاده از مقادیر محاسبه شده برای نام اموال، از براکت مربع استفاده می کنید و عبارت را ارسال می کنید.

در اینجا نحو است:

 const object = { [expression]: value }

نحوه تنظیم متغیرها به عنوان نام ویژگی

بیایید به یک مثال متغیر نگاه کنیم:

 const key1 = "language" const key2 = "isStudent" const obj = { name: "dillion", age: 1000, [key1]: "javascript", [key2]: true } console.log(obj) // { // name: "dillion", // age: 1000, // language: "javascript", // isStudent: true // }

همانطور که در این مثال می بینید، name و age به طور مستقیم به عنوان کلیدهای ثابت اضافه می شوند. اما language و isStudent به عنوان کلیدهای ثابت اضافه نمی شوند. آنها به صورت پویا به عنوان عبارات متغیر اضافه می شوند: [key1] و [key2] . سپس مقادیر بازگشتی عبارات کلیدهایی را نشان می دهد که به شی اضافه می شوند.

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

بیایید مثال بیان دیگری را ببینیم.

نحوه تنظیم عبارات شرطی به عنوان نام ویژگی

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

بیایید مثالی را با استفاده از یک عبارت شرطی به عنوان نام ویژگی ببینیم:

 const age = 10 const key1 = "ageIsMoreThan5" const key2 = "ageIsMoreThan10" const obj = { name: "dillion", [age > 10 ? key2 : key1]: true } console.log(obj) // { // name: "dillion", // ageIsMoreThan5: true // }

در اینجا، یک متغیر age داریم که مقدار عددی آن 10 است.

در شیء obj یک عبارت شرطی داریم: age > 10 ? key2 : key1 . این عبارت بیان می کند که اگر مقدار متغیر age بزرگتر از 10 باشد، key2 برگردانده می شود، در غیر این صورت key1 برگردانده می شود.

از آنجایی که 10 (مقدار age ) از 10 بیشتر نیست، key2 برگردانده می شود. مقدار متغیر key2 ageIsMoreThan5 است.

و اگر age 20 باشد، یک کلید ویژگی متفاوت به obj اضافه می شود:

 const age = 20 const key1 = "ageIsMoreThan5" const key2 = "ageIsMoreThan10" const obj = { name: "dillion", [age > 10 ? key2 : key1]: true } console.log(obj) // { // name: "dillion", // ageIsMoreThan10: true // }

همانطور که در اینجا می بینید، عبارت شرطی به key2 ارزیابی می شود زیرا age > 10 true را برمی گرداند. مقدار key2 "ageIsMoreThan10" است، پس ویژگی اضافه شده به شی است.

بسته بندی

در این مقاله، من به شما نشان دادم که چگونه پشتیبانی از Computed Property Names در جاوا اسکریپت برای گفت ن کلیدهای پویا هنگام اعلان اشیا کار می کند.

شما می توانید به هر عبارتی فکر کنید که مقداری را برمی گرداند. چنین عباراتی را می توان در براکت ها استفاده کرد تا به عنوان کلید ویژگی در یک شیء استفاده شود.

همچنین می توانید از این ویژگی برای دسترسی/تغییر یک ویژگی موجود یا اضافه کردن یک ویژگی جدید استفاده کنید. می توانید در مقاله من در مورد علامت گذاری نقطه و علامت گذاری براکت برای ویژگی های شی بیشتر در مورد این موضوع بیاموزید.

اگر این قطعه برای شما مفید بود، لطفا به اشتراک بگذارید 🙏🏾