Destructuring یک ویژگی قدرتمند جاوا اسکریپت است که در ES6 (ECMAScript 2015) معرفی شده است. استخراج مقادیر از آرایه ها یا خصوصیات از اشیا و تخصیص آنها به متغیرها به روشی قابل خواندن آسان تر می شود.

بیایید در مورد نحوه عملکرد ساختارشکنی و موارد استفاده مختلف با مثال‌ها تحقیق کنیم.

کد منبع را می توانید از اینجا دریافت کنید.

فهرست مطالب

تخریب چیست ؟

تخریب آرایه

تخریب شی

نتیجه

تخریب چیست؟

Destructuring تکنیکی است که به شما امکان می دهد مقادیر را از آرایه ها یا اشیاء در متغیرهای جداگانه باز کنید.

این فرآیند شامل تجزیه ساختارهای داده پیچیده به بخش‌های ساده‌تر است و کار با آنها را آسان‌تر می‌کند.

تخریب آرایه

بیایید با تخریب آرایه شروع کنیم. از مثال زیر استفاده خواهیم کرد.

بدون ساختارشکنی، استخراج مقادیر از یک آرایه می تواند پرمعنا باشد:

 const hobbies = ["Reading", "Coding", "Hiking"]; const firstHobby = hobbies[0]; const secondHobby = hobbies[1]; const thirdHobby = hobbies[2]; console.log(firstHobby); // Output: Reading console.log(secondHobby); // Output: Coding console.log(thirdHobby); // Output: Hiking

در اینجا، شما به هر عنصر آرایه hobbies با استفاده از نشانه‌گذاری شاخص دسترسی پیدا می‌کنید و آنها را به متغیرهای جداگانه اختصاص می‌دهید.

تخریب این فرآیند را در یک خط کد ساده می کند، مانند زیر:

 const hobbies = ["Reading", "Coding", "Hiking"]; const [firstHobby, secondHobby, thirdHobby] = hobbies; console.log(firstHobby); // Output: Reading console.log(secondHobby); // Output: Coding console.log(thirdHobby); // Output: Hiking

در این مثال، شما مقادیر را از آرایه hobbies استخراج می‌کنید و آنها را به ترتیب به متغیرهای firstHobby ، secondHobby و thirdHobby اختصاص می‌دهید.

پرش عناصر از آرایه

شما می توانید با حذف برخی از عناصر از الگوی تخریب، نادیده گرفته شوید:

 const hobbies = ["Reading", "Coding", "Hiking"]; const [firstHobby, , thirdHobby] = hobbies; console.log(firstHobby); // Output: Reading console.log(thirdHobby); // Output: Hiking

در این مثال، شما در حال تخریب آرایه hobbies هستید اما فقط مقادیری را به متغیرهای firstHobby و thirdHobby اختصاص می‌دهید. با قرار دادن کاما بدون نام متغیر بین firstHobby و thirdHobby از عنصر دوم در آرایه صرفنظر می کنید. این به شما این امکان را می دهد که عناصر خاصی را از آرایه استخراج کنید در حالی که دیگران را نادیده می گیرید، انعطاف پذیری و کنترل بیشتری را در الگوهای تخریب کننده خود فراهم می کند.

تخریب آرایه تودرتو

تخریب آرایه نیز می تواند تودرتو باشد. در اینجا یک مثال است:

 const nestedArray = [1, [2, 3], 4]; const [firstValue, [secondValue, thirdValue], fourthValue] = nestedArray; console.log(firstValue); // Output: 1 console.log(secondValue); // Output: 2 console.log(thirdValue); // Output: 3 console.log(fourthValue); // Output: 4

در این کد، یک آرایه تودرتو nestedArray داریم. با استفاده از ساختارشکنی آرایه تو در تو، مقادیری را از هر دو آرایه بیرونی و داخلی استخراج می‌کنید و آنها را به متغیرهای firstValue ، secondValue ، thirdValue و fourthValue اختصاص می‌دهید.

تخریب شی

با حرکت به سمت تخریب شیء، شی زیر را در نظر بگیرید:

 const person = { name: "John Doe", age: 30, city: "New York", occupation: "Software Engineer", hobbies: ["Reading", "Coding", "Hiking"] };

تخریب منظم

تخریب شی به شما امکان می دهد تا ویژگی ها را از اشیا استخراج کنید:

 const { name, age, city } = person; console.log(name); // Output: John Doe console.log(age); // Output: 30 console.log(city); // Output: New York

در این مثال، { name, age, city } نحو تخریب کننده است. این بدان معنی است که شما name ، age و ویژگی های city را از شی person استخراج می کنید و آنها را به متغیرهایی با همان نام اختصاص می دهید. پس name مقدار "John Doe" ، age 30 و city دارای "New York" خواهد بود.

تخریب با نام های مختلف

می توانید ویژگی های استخراج شده را به متغیرهایی با نام های مختلف اختصاص دهید:

 const { name: personName, age: personAge, city: personCity } = person; console.log(personName); // Output: John Doe console.log(personAge); // Output: 30 console.log(personCity); // Output: New York

در این مثال، شما از نحوی مانند { name: personName, age: personAge, city: personCity } استفاده می کنید که به شما امکان می دهد ویژگی های استخراج شده را به متغیرهایی با نام های مختلف اختصاص دهید. در اینجا، name از شی person به personName ، age به personAge و city به personCity اختصاص داده می شود.

داشتن مقادیر پیش فرض هنگام تخریب

شما همچنین می توانید مقادیر پیش فرض را برای ویژگی های شی ارائه دهید:

 const { name, age, gender = "Unknown" } = person; console.log(gender); // Output: Unknown

در اینجا، شما یک مقدار پیش‌فرض "Unknown" برای ویژگی gender در صورتی که در شی person وجود نداشته باشد، ارائه می‌دهید. اگر gender person تعریف نشده باشد، متغیر gender به طور پیش‌فرض روی "Unknown" خواهد بود.

اشیاء تو در تو

ساختار تخریب شی از اشیاء تودرتو پشتیبانی می کند:

 const { name, address: { city, country } } = person; console.log(city); // Output: New York console.log(country); // Output: undefined (assuming address does not have a country property)

در این مثال، { name, address: { city, country } } نحو تخریب کننده است. شما در حال استخراج ویژگی name به طور مستقیم از شی person هستید. سپس در شی address ، ویژگی های city و country را استخراج می کنید. پس city دارای مقدار "New York" خواهد بود و country به صورت پیش فرض undefined خواهد بود با این فرض که address دارایی country نباشد.

نتیجه

خودشه! اکنون باید درک خوبی از نحوه عملکرد ساختارشکنی جاوا اسکریپت برای آرایه ها و اشیاء داشته باشید.

برای تقویت بیشتر درک خود، می توانید با نمونه های کد آزمایش کنید. اگر بازخورد یا سؤالی دارید، لطفاً در توییتر یا لینکدین با من تماس بگیرید. یادگیری مبارک!

خبرکاو