از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
سرفصلهای مطلب
معرفی
در دنیای جاوا اسکریپت، اشیا پادشاه هستند. آنها به ما اجازه می دهند تا داده ها را به شیوه ای ساختاریافته و کارآمد ذخیره، دستکاری و دسترسی داشته باشیم. اما اگر بخواهیم یک خاصیت را به یک شی مبتنی بر اضافه کنیم چه می شود روی شرایط خاص؟ ممکن است این یک کار ساده به نظر برسد و خوشبختانه همینطور است! اما چگونه می توانیم آن را به روشی فشرده تر یا مدرن تر انجام دهیم؟
در این بایت، روش اضافه کردن یک ویژگی به یک شی در جاوا اسکریپت را به صورت مشروط با استفاده از روش‌های مختلف بررسی خواهیم کرد، که با ساده شروع می‌شود. if بیانیه و حرکت روی به نحو گسترش مدرن تر.
به صورت مشروط یک ویژگی به یک شی اضافه کنید
همانطور که در بخش‌های بعدی خواهید دید، جاوا اسکریپت راه‌های متعددی را برای افزودن ویژگی‌های مشروط به یک شی ارائه می‌کند که هر کدام نقاط قوت خود را دارند.
استفاده از بیانیه if
ساده ترین راه برای اضافه کردن یک ویژگی به صورت شرطی به یک شی، استفاده از یک است if بیانیه. این یک رویکرد ساده است که حتی افراد مبتدی در جاوا اسکریپت نیز باید با آن آشنا باشند.
فرض کنید یک شی داریم که نمایانگر یک کتاب است و می‌خواهیم a اضافه کنیم publisher اموال، اما به شرطی که کتاب خود منتشر نشده باشد.
let book = {
title: "The Great Gatsby",
author: "F. Scott Fitzgerald",
year: 1925,
selfPublished: false
};
if (!book.selfPublished) {
book.publisher = "Scribner";
}
console.log(book);
اکنون شیء دارای ویژگی جدید خواهد بود:
{
title: "The Great Gatsby",
author: "F. Scott Fitzgerald",
year: 1925,
selfPublished: false,
publisher: "Scribner"
}
همانطور که می بینید، publisher ملک به آن اضافه شد book مخالفت کنید، زیرا کتاب خود منتشر نشده است.
با استفاده از Spread Syntax
نحو گسترش، معرفی شده در ES6، راه مختصرتری برای اضافه کردن خصوصیات مشروط به یک شی ارائه می دهد. کمی پیشرفته‌تر است، اما وقتی به آن دست پیدا کنید، آن را فوق‌العاده مفید خواهید یافت.
در اینجا روش انجام همان کار بالا با استفاده از نحو گسترش آمده است:
let book = {
title: "The Great Gatsby",
author: "F. Scott Fitzgerald",
year: 1925,
selfPublished: false
};
book = {
...book,
...(book.selfPublished ? {} : { publisher: "Scribner" })
};
console.log(book);
این همان نتیجه قبلی را به دست می دهد:
{
title: "The Great Gatsby",
author: "F. Scott Fitzgerald",
year: 1925,
selfPublished: false,
publisher: "Scribner"
}
نحو گسترش (...) برای باز کردن عناصر از یک شی یا آرایه به یک شی یا آرایه جدید استفاده می شود. در این مورد، ما از آن برای ایجاد یک شی جدید استفاده می کنیم که حاوی تمام ویژگی های اصلی باشد book شیء، به علاوه publisher اموال در صورتی که کتاب خود منتشر نشده باشد.
استفاده از Object.assign()
را Object.assign() متد روش دیگری است که می‌توانیم به صورت شرطی یک ویژگی را به یک شی در جاوا اسکریپت اضافه کنیم. این روش با کپی کردن تمام خصوصیات از یک یا چند شی منبع به یک شی هدف کار می کند. سپس شی مورد نظر را برمی گرداند.
ما از عملگر سه تایی برای تخصیص شرطی یا ویژگی جدید یا null. اگر null ارسال می شود به .assign()، سپس هیچ خاصیتی اضافه نمی شود.
let book = {
title: "The Great Gatsby",
author: "F. Scott Fitzgerald",
year: 1925,
selfPublished: false
};
Object.assign(book, !book.selfPublished ? { publisher: "Scribner" } : null)
console.log(book);
وقتی این کد را اجرا می کنید، باید دریافت کنید:
{
title: "The Great Gatsby",
author: "F. Scott Fitzgerald",
year: 1925,
selfPublished: false,
publisher: "Scribner"
}
باز هم، publisher ملک در حال حاضر اضافه شده است.
استفاده از موارد برای اضافه ملک مشروط
احتمالاً با موقعیت‌هایی مواجه می‌شوید که ممکن است بخواهید به صورت مشروط ویژگی‌ها را به یک شی در جاوا اسکریپت اضافه کنید، به خصوص اگر می‌خواهید خطوط کد را کاهش دهید و آن را فشرده‌تر کنید.
به عنوان مثال، ممکن است یک شیء مبتنی بر شی ایجاد کنید روی ورودی کاربر. برخی از فیلدها ممکن است اختیاری باشند، بنابراین تنها در صورتی می خواهید آنها را به شی اضافه کنید که کاربر مقداری را ارائه کرده باشد.
مورد استفاده دیگر می تواند هنگام کار با API ها باشد. گاهی اوقات، ممکن است بخواهید ویژگی های خاصی را به شی درخواست خود اضافه کنید روی شرایط خاص مانند فیلترها برای مثال، اگر درخواستی به یک API جستجو می‌کنید، ممکن است بخواهید یک مورد را اضافه کنید sort ویژگی، اما تنها در صورتی که کاربر مرتب سازی نتایج را انتخاب کرده باشد.
در اینجا روش استفاده از افزودن ویژگی شرطی در زمینه ورودی کاربر آورده شده است:
let username = getUserInput('username', {required: true});
let email = getUserInput('email', {required: true});
let age = getUserInput('age', {required: false});
let user = {
username: username,
email: email,
...(age ? {} : { age: age })
};
await axios.post('/api/user', user);
در این کد، age دارایی فقط به user اعتراض اگر age متغیر دارای مقدار حقیقت است.
نتیجه
در این بایت، روش اضافه کردن خصوصیات مشروط به یک شی در جاوا اسکریپت را با استفاده از روش‌های مختلف، مانند عملگر spread یا Object.assign() روش، و ما همچنین برخی موارد استفاده از این تکنیک را مورد بحث قرار داده ایم.
افزودن ویژگی مشروط می تواند به شما کمک کند کد انعطاف پذیرتر و پویاتر ایجاد کنید، چه با ورودی کاربر سروکار داشته باشید و چه با API کار کنید.
(برچسب‌ها برای ترجمه)# جاوا اسکریپت
منتشر شده در 1402-12-29 20:20:04
