توضیح بکارگیری Destructuring در ES6 به همراه مثال

خلاصه مقاله: در این آموزش چگونگی استفاده از Destructuring در ES6 که به شما اجازه می دهد تا اطلاعات یک شئ یا یک آرایه را به متغیرهای شخصی استخراج کنید را می آموزید.

ES6 ویژگی جدیدی به نام destructing assignment فراهم کرده است که به شما اجازه می دهد شئ یا آرایه را به متغیرهای تک تبدیل کنید.  destructing assignment نه تنها به شما کمک می کند تا typing را ذخیره کنید بلکه شیوه ساخت کد شما را نیز تغییر می دهد.

با Destructuring آرایه شروع می کنیم.

Destructuring آرایه

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

var scores = [70, 80, 90, 100];

برای تعیین متغیرهای عناصر یک آرایه، از کد زیر استفاده کنید:

let [x,y,z] = scores;
console.log(x); // 70
console.log(y); // 80
console.log(z); // 90

متغیر x، y و z مقادیر عنصر اول، دوم و سوم آرایه scores را می گیرند. عنصر چهارم آرایه scores حذف می شود.

Destructuring آرایه و عملگر rest

امکان اینکه تمام عناصر باقی مانده یک آرایه گرفته شود و در یک آرایه جدید با استفاده از عملگر rest (…). قرار داده شود، وجود دارد. مانند مثال زیر:

let [a,b,...args] = scores;
console.log(a); // 70
console.log(b); // 80
console.log(args); // [90, 100]

متغیرهای a و b مقادیر دو عنصر اول آرایه scores را دریافت می کنند، و متغیر args تمام نشانگرهای باقی مانده که دو عنصر آخر آرایه scores  هستند را دریافت می کند.

تخصیص ها

می توان اطلاعات یک آرایه را در assignment استخراج کرد که از شناسایی متغیر جدا می شود. مثال زیر را مشاهده کنید:

var a, b;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

مقادیر پیش فرض

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

let a, b;
[a = 1, b = 2] = [10];
console.log(a); // 10
console.log(b); // 2

جابجایی متغیرها

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

let a = 10, b = 20;
[a, b] = [b, a];
console.log(a); // 20
console.log(b); // 10

تجزیه آرایه بازگشت داده شده از یک تابع

یک تابع ممکن است آرایه ای از مقادیر را بازگرداند. Destructuring آرایه تجزیه آرایه بازگشت داده شده را سرراست تر می کند.

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

function returnArray() {
    return [10, 20, 30];
}
 
let [a, b, c] = returnArray();
 
console.log(a); // 10
console.log(b); // 20
console.log(c); // 30

در این مثال، تابع returnArray() یک آرایه از سه عنصر را بازمی گرداند‌. ما از destructuring آرایه برای استخراج عناصر آرایه به متغیرهای شخصی a، b و c در یک خط یک طرفه کد استفاده می کنیم.

البته می توانید از destructuring آرایه برای رد کردن بعضی از مقادیر بازگشت داده شده استفاده کنید. فرض کنید فقط می خواهید عناصر اول و سوم از تابع returnArray() بازگردانده شود، می توانید دومین عنصرآرایه را مانند نمونه نادیده بگیرید:

[a, , c] = returnArray();
console.log(a); // 10
console.log(c); // 30

Destructuring شئ

فرض کنید شئ person با دو ویژگی را در اختیار دارید:

let person = {
    firstName: 'John',
    lastName: 'Doe'
};

وقتی اطلاعات را از شیء استخراج می کنید، نام متغیر باید با نام ویژگی در شئ مطابقت داشته باشد. اگر نام متغیر تطبیق نداشته باشد، مقدار undefined را دریافت می کند.

مثال زیر متغیرهای firstName و lastName  از مقادیر ویژگی firstName و lastName شئ person را معین کرده است:

let {firstName, lastName} = person;
console.log(firstName); // John
console.log(lastName); // Doe

در این مثال ما متغیرها را در دستورالعمل یکسان شناسایی و معین کرده ایم.

همچنین می توانید از destructuring شئ در دستور assignment استفاده کنیم، اما باید داخل پرانتز قرار گیرد. مثال زیر را مشاهده کنید:

({firstName,lastName}) = person;

اگر از پرانتز استفاده نکنید، موتور جاوا اسکریپت بخش سمت چپ را به عنوان بلوک تفسیر می کند، بنابراین با خطا مواجه می شوید.

شئ Nested و destructuring شئ

فرض کنیم یک شئ employee دراختیار دارید که دارای یک شئ profile به عنوان یک ویژگی است.

let employee = {
    id: 1001,
    profile: {
        firstName: 'John',
        lastName: 'Doe'
    }
};

کد زیر اطلاعات ویژگی profile را به متغیرهای شخصی تبدیل می کند.

let {profile: {firstName, lastName}} = employee;
 
console.log(firstName); // John
console.log(lastName);  // Doe
1 Star2 Stars3 Stars4 Stars5 Stars (3 votes, average: 4٫67 out of 5)
Loading...
counter customizable free hit