الگوهای ES6 Destructuring در جاوااسکریپت
یکی از قابلیت‌های قدرتمند ECMAScript 2015 (ES6)، الگوی Destructuring است که امکان استخراج داده‌ها از آرایه‌ها یا اشیا را با syntax مختصر و خوانا فراهم می‌کند. این ویژگی به ویژه در کار با ساختارهای پیچیده داده‌ای بسیار مفید است.
انواع Destructuring
- آرایه‌ها (Array Destructuring)
- اشیاء (Object Destructuring)
- پارامترهای تابع (Parameter Destructuring)
مثال ساده آرایه:
const numbers = [1, 2, 3];
const [first, second] = numbers;
console.log(first); // خروجی: 1
| نوع |
مثال |
| مقدار پیش‌فرض |
const [a=5, b=7] = [1]; |
| جابجایی مقادیر |
[a, b] = [b, a]; |
| حذف آیتم‌ها |
const [,, third] = [1, 2, 3]; |
کاربردهای پیشرفته
- استخراج از اشیاء تو در تو
- بازگرداندن چند مقدار از توابع
- پارامترهای تابع با ساختار پیچیده
- کار با ماژول‌ها و کتابخانه‌ها
برای مثال در کار با React، از Destructuring برای دریافت props به صورت زیر استفاده می‌شود:
function UserProfile({ name, age, email }) {
return <div>{name} - {age}</div>;
}
برای اطلاعات بیشتر درباره آرایه‌ها و ساختارهای داده در جاوااسکریپت می‌توانید به لینک مراجعه کنید.
نکات مهم:
- Destructuring باعث تغییر ساختار اصلی داده نمی‌شود
- می‌توان از نام‌های متفاوت برای متغیرها استفاده کرد
- پشتیبانی گسترده در مرورگرهای مدرن
- نیاز به transpiler برای مرورگرهای قدیمی
