ویژگی‌‌های ES6 قابلیت‌ها و امکانات زیادی را به زبان برنامه نویسی جاوااسکریپت اضافه کرده‌اند و باعث شده‌اند تا تجربه کدنویسی با جاوااسکریپت بسیار بهبود پیدا کند که این‌ها همه نشان‌دهنده قدرت جاوااسکریپت است. اگر بخواهیم چند مورد از ویژگی‌‌های ES6 را نام ببریم، می‌توانیم به template strings، arrows، classes و … اشاره کنیم. یکی دیگر از این ویژگی‌های جدید، توانایی destructing آرایه‌ها و آبجکت‌ها است.

destructing روشی آسان و راحت برای استخراج داده‌ها از آرایه‌ها و آبجکت‌ها است. در این مقاله قصد داریم تا دقیق‌تر در مورد destructing، از مجموعه ویژگی‌‌های ES6 صحبت کنیم و بطور کامل با آن آشنا شویم.

در ادامه نحوه استفاده از آن را در آرایه‌ها نشان می‌دهیم.

استخراج داده از آرایه‌ها

فرض کنید که یک آرایه از اسامی را به صورت زیر دارید:

const names = ['Luke', 'Eva', 'Phil'];

در مرحله بعدی از destructing برای استخراج داده‌ها از آرایه استفاده می‌کنیم.

استخراج عناصر از یک آرایه

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

const [first] = names;  
console.log(first); // 'Luke'

آنچه که در این سینتکس اتفاق می‌افتد به صورت زیر می‌توانیم تجزیه و تحلیل کنیم. وقتی متغیر را داخل براکت‌ها تعریف می‌کنیم در واقع مشخص می‌کنیم که می‌خواهیم اولین عنصر از آرایه names را بگیریم و به متغیر تخصیص دهیم. در این مثال، اولین عنصر را به متغیر first اختصاص می‌دهیم.

حال اگر بخواهیم چندین عنصر را استخراج کنیم – مثلا عنصرهای اول و دوم – چه کاری انجام می‌دهیم؟‌ به سادگی، کافی است تعداد متغیرهای بیشتری را بین براکت‌ها اضافه کنیم. این کار کمک می‌کند تا عنصرهای جدید از ابتدای آرایه استخراج شوند و به متغیرهایی که تعریف کردیم، اختصاص داده شوند.

const [first, second] = names;  
console.log(first, second); // 'Luke' 'Eva'

مقادیر پیش‌فرض هنگام نبودن عناصر

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

const [first, second, third, fourth] = names;  
console.log(fourth); // undefined

در چنین حالتی مقدار undefined به متغیر fourth اختصاص داده می‌شود.

این حالت در بسیاری از سناریوها مورد قبول نیست، بنابراین کاری که می‌توانیم انجام دهیم این است که یک مقدار پیش‌فرض تعریف کنیم که اگر آرایه عناصر کافی را نداشته باشد، از آن استفاده شود.

const [first, second, third, fourth='Martin'] = names;  
console.log(fourth); // 'Martin'  

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

تا اینجا عناصر را از ابتدای لیست انتخاب می‌کردیم.

ممکن است سناریوهایی داشته باشیم که بخواهیم از برخی عناصر صرف نظر کنیم. در این حالت می‌خواهیم از اختصاص عناصر ناخواسته به متغیرها خودداری کنیم.

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

var [first, , second] = names;  
console.log(first, second); // 'Luke' 'Phil'  

برای اینکار به سادگی با افزودن کاما و بدون مشخص کردن متغیر می‌توانیم به عنصر بعدی برویم. در صورتی که بخواهیم از عناصر بیشتری رد شویم به سادگی کاماهای بیشتری اضافه می‌کنیم.

اختصاص دادن بقیه آرایه به یک متغیر

دیدیم که استخراج عناصر مختلف آسان است اما اغلب می‌خواهیم بخشی از آرایه که استخراج نشده ‌است را حفظ کنیم.

این کار را با استفاده از destructing به صورت زیر می‌توانیم انجام دهیم.

var [first, ...rest] = names;  
console.log(rest); // ['Eva','Phil']  

با افزودن پیشوند … به آخرین متغیر می‌توانیم بقیه آرایه را به متغیر با نام rest اختصاص دهیم.

Destructing آبجکت‌ها

در ادامه بررسی می‌کنیم که آیا می‌توانیم با استفاده از destructing، داده‌ها را از آبجکت‌ها استخراج کنیم؟

آبجکت زیر را که یک فرد را توصیف می‌کند در نظر بگیرید.

const person = {  
  name: 'Luke',
  age: '24',
  facts: {
    hobby: 'Photo',
    work: 'Software Developer'
  }
}

استخراج داده از آبجکت

با استخراج name و age از آبجکت person شروع می‎‌کنیم.

const {name, age} = person;  
console.log(name, age); // 'Luke' '24'  

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

استخراج مقادیر تودرتو

حال اگر بخواهیم چیزی عمیق‌تر را از ساختار آبجکت استخراج کنیم، مثلا hobby، چگونه باید عمل کنیم؟

const {facts: {hobby}} = person;  
console.log(hobby); // 'Photo' 

با استفاده از علامت : می‌توانیم مسیر را در داخل آبجکت مشخص کنیم، در نتیجه می‌توانیم توضیح دهیم چه ویژگی را می‌خواهیم استخراج کنیم.

مقادیر پیش‌فرض در هنگام از دست رفتن داده‌ها

همانطور که هنگام destructing آرایه‌ها مشاهده کردیم، قادر به تعیین مقادیر پیش‌فرض هستیم تا در صورت عدم وجود داده‌های استخراج‌شده، از آن‌ها استفاده شود.

برای دیدن نحوه انجام این کار، سعی می‌کنیم hometown را استخراج کنیم، اما با مقدار Unknown به عنوان مقدار پیش‌فرض.

const {hometown = 'Unknown'} = person;  
console.log(hometown); // 'Unknown'  

Destructing پارامترهای تابع

آخرین کاربرد مفید این روش، کار با پارامترهای توابع است.

فرض کنیم که تابع شما یک آبجکت را به عنوان پارامتر دریافت می‌کند. شما می‌توانید این پارامتر را با روش destructing در لیست پارامترها قرار دهید.

در مثال زیر یک تابع با نام toString، که نام و سن افراد را چاپ می‌کند ایجاد کرده‌ایم که متغیرهای name و age از destructing آبجکت person، که به عنوان پارامتر به این تابع داده می‌شود، به دست می‌آیند.

const toString = ({name, age}) => {  
  return `${name} is ${age} years old`;
}

toString(person); // Luke is 24 years old  

منبع