عبارات Destruturing در جاوا اسکریپت این اجازه را به ما می دهد که بتوانیم یک سری متغیر ها را از داخل یک سری اشیا و آرایه ها استخراج کنیم. این ترکیب در طرف راست source می نامیم. در طرف چپ unpacked variables می نامیم. این ترکیب روی اشیا و آرایه ها اعمال می شود (Arrays,Object) . یعنی در دو طرف ‍‍=‍ باید یا شئ یا آرایه باشد. این ترکیب عبارت به دو قسمت Binding and assignment تقسیم می گردد. در طرف source باید یک آرایه یا شئ باشد که می تواند خروجی یک تابع هم باشد.

Normal Assignment

به طور کلی ما برای Assignment به صورت عادی از عبارت variable = value استفاده می کردیم . نوع دیگری از Assignment در جاوا اسکریپت تعیین شده به نام Destructuring . در Normal Assignment ما در طرف چپ هر نامی را قرار می دادیم می توانستیم مقدار دهی کنیم (حال به صورت assignment , bind ) اما در Destructuring حتما باید مقدار دهی به صورت خاص باشند (همنام با مقادیر سمت source ) .

• Normal Assignment
  • Assignment
  • Bind
• Destructuring Assignment
  • Assignment
  • Bind

//Binding in normal assignment
let a = 'value'
//assignment in normal assignment
let a,b;
b = 'hello'
a = b

همان طور که مشاهده کردید در Normal Assignment ما هر متغیری را با هر نامی در سمت چپ به مقدار دوم در سمت راست که مقدار است Assign می کنیم . اما در Destructuring Assignment ما برای مقدار دهی قاعده نام گذاری داریم.

Destructuring Assignment

در این pattern باید نام متغیر های موجود در سمت چپ با کلید های شی در سمت راست عبارت برابر باشند. در ترکیب آرایه نیز باید ترتیب متغیر های سمت چپ باید با ترتیب عبارات سمت چپ برابر باشند.

Binding Destructuring

در این روش می توان به این صورت عمل کرد عناصر در در همان عبارت تعریف کرده باشیم و همراه با کلمات کلیدی تعریف متغیر (declaring keywords) می باشند. Syntax کلی برای این نوع عملیات برای آرایه ها و اشیا به شکل زیر می باشد

const [a, b] = array;
const [a, , b] = array;
const [a = aDefault, b] = array;
const [a, b, ...rest] = array;
const [a, , b, ...rest] = array;
const [a, b, ...{ pop, push }] = array;
const [a, b, ...[c, d]] = array;

const { a, b } = obj;
const { a: a1, b: b1 } = obj;
const { a: a1 = aDefault, b = bDefault } = obj;
const { a, b, ...rest } = obj;
const { a: a1, b: b1, ...rest } = obj;

به طور مثال دو متغیر z , y را با استفاده از عناصر یک آرایه بدست می آوریم :

const x = [1, 2, 3, 4, 5];
const [y, z] = x;
//y=1,z=2

Assignment Destructuring

در این عملیات ما پیش از نگاشت متغیر ها به اعضای آرایه یا شئ باید آن ها را تعریف کرده باشیم و در صورتی که Assignment در اشیا باشد باید کل عبارت را در پرانتز قرار بدهیم. Syntax کلی در انواع عملیات Assignment Destructuring به شکل زیر است

let a, b, a1, b1, c, d, rest, pop, push;
[a, b] = array;
[a, , b] = array;
[a = aDefault, b] = array;
[a, b, ...rest] = array;
[a, , b, ...rest] = array;
[a, b, ...{ pop, push }] = array;
[a, b, ...[c, d]] = array;

({ a, b } = obj); // brackets are required
({ a: a1, b: b1 } = obj);
({ a: a1 = aDefault, b = bDefault } = obj);
({ a, b, ...rest } = obj);
({ a: a1, b: b1, ...rest } = obj);

در مثال زیر ما مقادیرa , b را ابتدا تعریف کرده ایم و بعد از آن باید این مقادیر را Destruturing کنیم:

const numbers = [];
const obj = { a: 1, b: 2 };
({a,b} = obj)

var a;
var obj = { a : 10, b : 11, c : 12 }
{a} = obj
Uncaught SyntaxError: expected expression, got '='
({a} = obj) // a=10

var a=[]
var b = {a:1,b:2}
const {a: a[0],b:a[1]} = b
//Uncaught SyntaxError: missing : after property id
({a: a[0],b:a[1]} = b)
//Array [ 1, 2 ]

در عملیات Destructuring ما به حالت های خاصی بر می خوریم . در ادامه به این حالت های خاص که هر کدام Syntax خاص خود را دارد بررسی می کنیم:

Default value

در این حالت ما اگر در نگاشت سمت راست گزینه ای را نداشتیم می توانیم مقدار پیش فرض برای متغیر در حال نگاشت تعیین کنیم. برای این روش لازم است از علامت = استفاده کنیم.

const [a = 1] = []; // a is 1
const { b = 2 } = { b: undefined }; // b is 2

Nested Properties

در صورتی که عمق آرایه یا شئ داخل عبارت Destructuring ما بیش از یک باشد به شکل زیر عمل می کنیم:

const [a, b, ...[c, d, ...[e, f]]] = [1, 2, 3, 4, 5, 6];
console.log(a, b, c, d, e, f); // 1 2 3 4 5 6

در این قسمت ما در دو مرحله Nested Destructuring را انجام می دهیم .

const obj = { a: 1, b: { c: 2 } };
const { a } = obj; // a is constant
let { b: { c: d } } = obj; // d is re-assignable

Alias unpacking

در صورتی که قرار است در هنگام unpack کردن عبارت است . این روش تنها در حالتی می توان استفاده کرد که دو طرف عبارت شئ باشند:

const { a: name, b: famil } = {a:'abolfazl',b:'sabagh'} 

var a,name,b,famil
({a:name,b:famil}) = {a:'ali',b:'alavi'})

Rest in Destructuring

rest یک عبارت است که روی اشیا و آرایه ها استفاده می شود و معنی آن ادامه همه اعضا است . به طور مثال زمانی که می خواهیم پارامتر ورودی برای یک تابع تعیین کنیم اگر بخواهیم به گونه ای باشد که بتوان تعداد زیادی پارامتر دریافت کند باید به این شکل تعریف کنیم :

function omelete(...args){
    console.log(args,arguments)
}

omelete(['egg','cheez','beard','potato'])
//Array(4) [ "egg", "cheez", "beard", … ]
//Arguments { 0: Array(4) [ "egg", "cheez", "beard", … ]} 

omelete('egg','cheez','beard','tomato') 
//Array(4) [ "egg", "cheez", "beard", "tomato" ]
//Arguments { 0: "egg", 1: "cheez", 2: "beard", 3: "tomato", … }

omelete({0:'egg',1:'cheez',3:'beard',4:'tomato',5:'potato',6:'onion'})
//Array(1) [0: Object { 0: "egg", 1: "cheez", 3: "beard", … }]
//Arguments { 0: Object { 0: "egg", 1: "cheez", 3: "beard", … } }

حال می توان از ...rest در روند Destructuring نیز استفاده کرد. نکته مهم این است که rest همیشه باید به عنوان آخرین پارامتر باشد و وجود متغیر غیر rest پس از آن خطای Syntax خواهد بود.

به ... در برنامه نویسی spread syntax  هم می گویند که در پارامتر توابع و concatenate arrays , concatenate objects و Destructuring و … کاربرد دارد.

const [a, b, ...rest] = [1,2,3,4,5,6] //rest = [3,4,5,6]
const { a, b, ...rest } = {a:1,b:2,c:3,d:4} //rest = {c:3,d:4}

var a,b,c,d,rest
[a, b, ...rest] = [1,2,3,4,5,6] //rest = [3,4,5,6]
({ a, b, ...rest } = {a:1,b:2,c:3,d:4}) //rest = {c:3,d:4}

یکی از کاربرد های Rest برای merge کردن کامل دو شئ (concatenate Objects) است که می توان از روش زیر استفاده کرد:

var a = {
    name: 'ali',
    famil: 'alavi'
}
var b = {
  job: 'sfs',
    age: 29
}
var person = {...a,...b}

گاه می توان شئ را در ساختار Destruturing Expression تعریف کرد:

var a = {
    name: 'ali',
    famil: 'alavi'
}
var person = {...a,...{job: 'sfs',age: 29}} 
//Object { name: "ali", famil: "alavi", job: "sfs", age: 29 }

ترتیب ادغام دو شئ می تواند اولویت اعضای شئ را تعیین کند. به طور مثال اگر دو شئ کلید های یکسان دارند شئ که در آخر عبارت spread syntax قرار می گیرد مقادیر کلید های آن در ادغام در اولویت بالاتری قرار دارد:

var a = {
    a: 10,
    b: 20
}
var b = {
    b: 25,
    c: 30
}

({...a,...b}) //Object { a: 10, b: 25, c: 30 }
({...b,...a}) //Object { b: 20, c: 30, a: 10 }

برای merge کردن آرایه ها نیز می توان به همین منوال عمل کرد:

var a = [1,2,3,4,5]
var b = [6,7,8,9,10]
var c = [...a,...b]
console.log(c)
//Array(10) [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

کاربرد Destructuring در تعریف توابع به این شکل است که حالت unpack را در تعریف پارامتر ها تعیین می کنیم و ورودی تابع همان source است.

function omelete({ egg , cheez}){
    console.log(egg,cheez)
}

omelete({egg:10,cheez:'100gr'}) 
//10,100gr

Destructuring in for…of