آموزش برنامه نویسی

Destructuring

Destructuring یا استخراج کردن، یک ویژگی جدید است که در ES6 معرفی شده و به شما امکان استخراج کردن اطلاعات از آرایه، اشیاء، Set ،Map و ذخیره آنها در متغیر را می دهد.

Destructuring در آرایه

فرض کنید شما یک تابع دارید که آرایه ای از اعداد را بر می گرداند و شما می خواهید اعضای این آرایه را در متغیرهایی ذخیره کنید. به مثال زیر توجه کنید:

function numbers() 
{
   return [70, 80, 90];
}

تابع numbers در مثال بالا یک آرایه از اعداد را بر می گرداند. برای ذخیره این اعداد در چند متغیر کافیست که از ویژگی Destructuring به صورت زیر استفاده کنید:

 1: function numbers() 
 2: {
 3:     return [70, 80, 90];
 4: }
 5: 
 6: let [num1, num2, num3] = numbers();
 7: 
 8: console.log(num1);
 9: console.log(num2);
10: console.log(num3);

70
80
90

در خطوط 4-1 ما یک آرایه تعریف کرده ایم که یک آرایه از اعداد را بر می گرداند. در خط 5 با استفاده از ویژگی Destructuring خروجی تابع را در چندین متغیر ریخته ایم. همانطور که در این خط مشاهده می کنید چندین متغیر با نام دلخواه در داخل دو کروشه قرار می دهیم و آنها را با علامت , از هم جدا می کنیم. با این کار مقادیر موجود در آرایه خط 3 به ترتیب در داخل این متغیرها قرار می گیرند. سپس در خطوط 10-8 این مقادیر این متغیرها را چاپ می کنیم. از کد بالا، می توان این نتیجه را گرفت که برای ریختن عناصر یک آرای در چندین متغیر می توان به صورت زیر عمل کرد :

let [num1, num2, num3] = [70, 80, 90];

اگر تعداد متغیرها از تعداد اعضای آرایه بیشتر باشند، متغیرهای اضافی مقدار undefined می گیرند:

function numbers() 
{
    return [70, 80, 90];
}

let [num1, num2, num3, num4] = numbers();

console.log(num1);
console.log(num2);
console.log(num3);
console.log(num4);

70
80
90
undefined

در کد بالا ما 4 متغیر تعریف کرده ایم در حالیکه آرایه دارای 3 عضو می باشد. پس متغیر num4 ما مقدار undefined می گیرد. اگر بخواهید مثلا عنصر آخر یک آرایه را درون یک متغیر ذخیره کنید، باید از , یا کامای خالی استفاده کنید. کد زیر رو در نظر بگیرید:

function numbers() 
{
    return [70, 80, 90];
}

let [, , num3] = numbers();

console.log(num3);

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

let person = ['John'];

let [firstName, lastName = 'Doe'] = person;

console.log(firstName, lastName);

John Doe

در کد بالا، مقدار عنصر آرایه person در داخل متغیر firstName قرار می گیرد. متغیر دوم هم که مقدار خود را دارد. یکی دیگر از کابردهای Destructuring، عوض کردن مقدار متغیرهاست. قبل از اضافه شدن Destructuring، برای عوض کردن مقدار دو متغیر به صورت زیر عمل می کردیم:

let num1 = 10,
    num2 = 20,
    temp;

temp = num1;
num1 = num2;
num2 = temp;

console.log("num1 = ", num1);
console.log("num2 = ", num2);

num1 =  20
num2 =  10

اما با استفاده از ویژگی Destructuring کد بالا را به صورت زیر می توان ساده کرد:

let num1 = 10,
    num2 = 20,
    temp;

[num1, num2] = [num2, num1]

console.log("num1 = ", num1);
console.log("num2 = ", num2);

num1 =  20
num2 =  10

Rest Parameter را هم می توان در هنگام استفاده از Destructuring، به کار برد:

function numbers() 
{
    return [70, 80, 90];
}

let [num1, ...rest] = [70, 80, 90];

console.log(num1);
console.log(rest);

70
[80, 90]

در کد بالا، 70 در داخل num1 و 80 و 90 هم در داخل یک آرایه ذخیره می شوند. از ویژگی به صورت تودرتو هم می توان استفاده کرد. فرض کنید یک آرایه تودرتو داریم:

let numbers = [10, 20, [7, 5, 13], 35]

let [num1, num2, [num3, num4, num5], num6] = numbers;

console.log(num4);

5

آرایه numbers یک آرایه است که یکی از اعضای آن، خود یک آرایه می باشد. کافیست که ساختار Destructuring را دقیقا به صورت ساختار این آرایه درآورید. در این صورت به راحتی می توانید عناصر آرایه را در داخل متغیرها بریزید.

Destructuring در اشیاء

برای درک بهتر Destructuring در اشیاء به مثال زیر توجه کنید:

 1: class Person
 2: {
 3:     name   = "Jack";
 4:     age    = 23;
 5:     height = 180;
 6: }
 7: 
 8: let firstPerson = new Person();
 9: 
10: let name   = firstPerson.name;
11: let age    = firstPerson.age;
12: let height = firstPerson.height;
13: 
14: console.log(name);
15: console.log(age);
16: console.log(height);

Jack
23
180

در کد بالا ما یک کلاس تعریف کرده ایم (خطوط 6-1). برای دسترسی به فیلدهای این کلاس، ابتدا باید یک شیء از آن ایجاد کنیم (خط 8). ما می خواهیم مقادیر این فیلدها را در داخل متغیرهایی قرار دهیم. برای این منظور همانطور که در خطوط 12-10 مشاهده می کنید نام شیء را نوشته و سپس علامت نقطه و در نهایت نام فیلد را می نویسیم. مثلا برای دسترسی به مقدار فیلد name باید از کد firstPerson.name استفاده کنیم. در همین خطوط 12-10 سه متغیر تعریف کرده ایم که مقادیر فیلدها در داخل آنها قرار می گیرد. اما همین خطوط 12-10 را به صورت ساده تر زیر هم می توان نوشت که همان استفاده از Destructuring در اشیاء می باشد:

let {name, age, height} = firstPerson;

اگر به جای خطوط 12-10 همین کد را بنویسید و برنامه را دوباره اجرا کنید، نتیجه کد هیچ تغییری نمی کند. به دو نکته توجه کنید که در Destructuring در اشیاء، به جای [] باید از {} استفاده کنید و همچنین نام متغیرهایی که در داخل {} استفاده می کنید باید دقیقا مثل نام فیلدهای کلاس باشد.