Destruct کردن آبجکت یکی از ویژگیهای قدرتمند جاوااسکریپت و تایپ اسکریپت است که میتواند به ما در نوشتن کدهای تمیزتر و خواناتر کمک کند. این سینتکس به ما اجازه میدهد تا ویژگیها را از یک آبجکت استخراج کنیم و آنها را به متغیرها یا پارامترها اختصاص دهیم.
میتوانیم از destruct کردن آبجکت برای ایجاد متغیرها، تخصیص مقادیر پیشفرض، تغییر نام ویژگیها یا حذف برخی از ویژگیها استفاده نماییم.
// An object with two properties const person = { name: "Alice", age: 25, hobby: "reading" }; // Destructuring the name and hobby properties and assigning default values const { name, hobby = "reading" } = person; // Destructuring the name property and omitting the rest const { name, ...others } = person; // Destructuring the name and age properties and renaming them to firstName and years const { name: firstName, age: years } = person;
در تایپ اسکریپت میتوانیم تایپ آبجکت یا ویژگیهایی را که در حال destruct کردن آن هستیم نیز مشخص کنیم. دو راه برای انجام این کار وجود دارد:
const { name, age }: { name: string; age: number } = person;
این کد به تایپ اسکریپت میگوید آبجکتی که در حال destruct کردن آن هستیم دارای دو ویژگی name
و age
است و هر دو به ترتیب از تایپ رشته و عدد هستند.
interface Person { name: string; age: number; } const { name, age }: Person = person;
این کد به تایپ اسکریپت میگوید آبجکتی که در حال destruct کردن آن هستیم با اینترفیس Person
مطابقت دارد که به ترتیب دارای دو ویژگی name
و age
از تایپ رشته و عدد است.
استفاده از یک interface یا type alias میتواند راحتتر و قابل استفادهتر از نوشتن type annotation داخلی باشد.
همچنین میتوانیم از destruct کردن آبجکت در پارامترهای تابع استفاده کنیم، که میتواند کد ما را مختصرتر و خواناتر کند. به عنوان مثال، به جای نوشتن تابعی مانند این:
function greet(person: Person) { console.log(`Hello ${person.name}, you are ${person.age} years old.`); }
میتوانیم آن را اینگونه بنویسیم:
function greet({ name, age }: Person) { console.log(`Hello ${name}, you are ${age} years old.`); }
به این ترتیب، لازم نیست پارامتر person
را در داخل بدنه تابع تکرار کنیم، همینطور میتوانیم مستقیماً به ویژگیهای name
و age
دسترسی داشته باشیم.
به طور کلی عمل destruct کردن میتواند با کاهش تعداد خطوط کد و روشنتر کردن هدفی که داریم، خوانایی کد ما را بیشتر کرده و نگهداری آن را آسانتر کند.
۵۰ درصد تخفیف ویژه زمستان فرانت کست تا ۱۴ دی
کد تخفیف: wnt
دیدگاهها: