معرفی Destructuring در جاوااسکریپت

Destructuring چیست؟

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

بزارید با مثال و توضیح بیشتر معرفی کنیم این ویژگی عالی رو.

یک زمانی میشه که ما از یک تابع یه آرایه میگیریم و میخوایم توی چندتا متغیر ذخیره کنیم . روش متداول این شکلیه .

function genre(){
    return ["post-rock","trance","dubstep"];
}

var getGenre = genre();

var a  = getGenre[0];
var b  = getGenre[1];
var c  = getGenre[2];

اما اگه بخوایم از destructuring استفاده کنیم باید یک تغییری توی تعریف متغیر بدیم , به این صورت که از ‍[ ] استفاده کنیم که در اصل ارایه نیست و کار متغیر getGenre رو انجام میده.

function genre(){
    return ["post-rock","trance","dubstep"];
}

var [a,b,c] = genre();

اما یک سوال اگه آرایه دو تا فیلد رو برگردونه چه اتفاقی میوفته ؟ به متغیر undefined c داده میشه . و اگر بیشتر از سه تا برگردونه ؟ در اصل سه تای اولی اختصاص داده میشن به a,b,c و بقیه به هیچی اختصاص داده نمیشن .

اما اگر میخواین دو تا فیلد اولی رو بریزید توی متغیر‌های ابتدایی و بقیه رو بریزید توی متغییر سوم باید از spread یا همون ‍‍... استفاده کنید. به این صورت

var [a, b, ...c] = genre();

حالا اگه ما ابجکت داشته باشیم به این صورت کد ما میشه .

همه چیز ساده به نظر میرسه . فقط یک نکته اینه که چون ما داخل obj آیتم a رو داریم .وقتی که میخوایم داده‌ها رو از ابجکت بکشیم بیرون نیازی نیست که a:a‍‍‍ استفاده کنیم به جای این از a تنها استفاده میکنیم . اما اگه بخوایم بریزیم توی یک متغیر جدید مثل x باید از این روش استفاده کنید . b:x

حالا فرض کنید که دو تا متغیر دارین و میخواین مقادیرشون رو جابه جا کنید برای اینکار باید از یک متغیر جدید استفاده کنید. مثلا :

    var temp =a;
    a=b;
    b=temp;

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

[x,y] = [y,x];

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

این‌ موارد فقط جزئی از روش استفاده سینتکس destructuring هست.