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

۱. Array Destructuring (برای آرایه‌ها)
۲. Object Destructuring (برای آبجکت‌ها)

 

۱. Array Destructuring

اگه آرایه‌ای داریم به صورت زیر:

const users = ["Mario", "Emily", "John", "Allie"];

و اگه بخوایم همه (یا بعضی از) اعضای آرایه رو بریزیم توی متغیرهای اختصاصی، می‌تونیم از Array Destructuring استفاده کنیم:

const users = ["Mario", "Emily", "John", "Allie"];

>> const [mario, emily, john, allie] = users;

alert(mario);
alert(allie);

کدی که توی خط ۳ نوشتیم، ۴ متغیر با اسم‌هایی که بین براکت‌ها ‪‫[...] با کاما جدا کردیم می‌سازه و مقدارشون رو با توجه به ترتیب قرار گرفتن اونها، از آرایه می‌خونه و به اونها نسبت میده. در واقع کد خط ۳ مشابه کد زیر هست:

const mario = users[0];
const emily = users[1];
const john  = users[2];
const allie = users[3];

همونطور که می‌بینیم باید به صورت دستی برای هر یک از اعضای آرایه یک متغیر درست کنیم و با توجه موقعیتِ عضو آرایه به اون مقدار بدیم. اما با Destructuring خیلی راحت‌تر و خلاصه‌تر می‌تونیم چنین کاری رو انجام بدیم.

توی Array Destructuring ترتیب اهمیت داره. یعنی مقدار اولین آیتمی که توی براکت‌ها قرار می‌گیره، اولین عضو آرایه هست، مقدار دومین آیتم، دومین عضو آرایه و ... .

 

اگه فقط به بعضی اعضا احتیاج داریم

اگه فقط به بعضی از اعضای آرایه احتیاج داریم، مثلاً اولین و آخرین عضو، می‌تونیم از کد زیر استفاده کنیم:

const users = ["Mario", "Emily", "John", "Allie"];

const [mario,<< >>,<< >>, allie] = users;

alert(mario);
alert(allie);

همونطور که گفتیم، چون ترتیب اهمیت داره، باید خونه‌های میانی رو خالی بذاریم تا بتونیم مقدار درستی رو نسبت بدیم به آخرین متغیر.

رست (Rest) اینجا هم کاربرد داره. می‌تونیم برای چند عضو ابتدایی، متغیرهایی اختصاصی درست کنیم و اعضا رو با استفاده از بریزیم توی یک آرایه جدا: