Array Destructuring در جاوا اسکریپت

ES6 یک ویژگی جدید به نام destructing assignment معرفی کرد که به شما این امکان را می دهد تا properties یک object یا element های یک آرایه را به متغیرهای جداگانه assignment کنید.در این نوشته array destructuring را مورد بررسی قرار می دهیم.
معرفی Array destructuring در جاوا اسکریپت
فرض کنید که شما یک تابع به صورت زیر دارید که آرایه ای از اعداد را بر می گرداند:
1 2 3 |
function getScores() { return [70, 80, 90]; } |
قطعه کد زیر تابع () getScores را فراخوانی کرده و مقدار برگشتی را به یک متغیر اختصاص می دهد:
1 |
let scores = getScores(); |
برای به دست آوردن هر score، باید مشابه زیر عمل کنید:
1 2 3 |
let x = scores[], y = scores[1], z = scores[2]; |
تا قبل از ES6 راه مستقیمی برای assign کردن element های یک آرایه به چندین متغیر مثل x
, y
و z
وجود نداشت.خوشبختانه ، با در ES6 می توانید از destructing assignment مشابه مثال زیر استفاده کنید:
1 2 3 4 5 |
let [x, y, z] = getScores(); console.log(x); // 70 console.log(y); // 80 console.log(z); // 90 |
متغیر های x
, y
و z
به ترتیب value اولین،دومین و سومین element آرایه برگشتی را می گیرند.
توجه داشته باشید که []
square brackets شبیه syntax آرایه است اما در واقع آرایه ای در کار نیست.
اگر تابع ()getScores یک آرایه با دو element را برگرداند،سومین متغیر undefined خواهد بود:
1 2 3 4 5 6 7 8 9 |
function getScores() { return [70, 80]; } let [x, y, z] = getScores(); console.log(x); // 70 console.log(y); // 80 console.log(z); // undefined |
تابع ()getScores اگر یک آرایه با بیش از سه element را برمی گرداند.در این حالت element های اضافی در نظر گرفته نمی شوند.به مثال زیر توجه کنید:
1 2 3 4 5 6 7 8 9 |
function getScores() { return [70, 80, 90, 100]; } let [x, y, z] = getScores(); console.log(x); // 70 console.log(y); // 80 console.log(z); // 90 |
Array Destructuring و Rest syntax
با استفاده از (…) rest syntax می توانید تمامی عناصر باقی مانده یک آرایه را گرفته و در یک آرایه جدید قرار دهید:
1 2 3 4 |
let [x, y ,...args] = getScores(); console.log(x); // 70 console.log(y); // 80 console.log(args); // [90, 100] |
متغیرهای x و y مقادیر دو element ابتدایی آرایه برگشتی را می گیرند و متغیر args تمامی arguments های باقی مانده را می گیرد که دو element آخری آرایه است.
توجه داشته باشید که destructure آرایه لازم نیست حتما در زمان declaration متغیر ها باشد.به مثال زیر توجه کنید:
1 2 3 4 |
let a, b; [a, b] = [10, 20]; console.log(a); // 10 console.log(b); // 20 |
Setting default values
به مثال زیر توجه کنید:
1 2 3 4 5 6 7 8 |
function getItems() { return [10, 20]; } let items = getItems(); let thirdItem = items[2] != undefined ? items[2] : ; console.log(thirdItem); // 0 |
قطعه کد بالا چگونه کار می کند:
- در ابتدا تابع ()getItems که یک آرایه را بر می گرداند،تعریف شده است.
- سپس آرایه برگشتی از تابع ()getItems به متغیر items تخصیص یافته است
- در انتها چک می شود اگر سومین element آرایه برابر با undefined است و وجود ندارد،مقدار 0 به آن اختصاص داده شود.
با destructuring assignment خیلی ساده تر می توان default value برای یک element مشخص کرد:
1 2 3 |
let [, , thirdItem = ] = getItems(); console.log(thirdItem); // 0 |
اگر مقدار گرفته شده از آزایه برابر با undefined باشد، شما می توانید default value برای متغیر مشخص کنید:
1 2 3 4 |
let a, b; [a = 1, b = 2] = [10]; console.log(a); // 10 console.log(b); // 2 |
اگر تابع ()getItems یک آرایه را برنگرداند و شما توقع آرایه داشته باشید،نتیجه destructing assignment چیزی جز error نحواهد بود.به مثال زیر توجه کنید:
1 2 3 4 5 |
function getItems() { return null; } let [x = 1, y = 2] = getItems(); |
Error:
1 |
Uncaught TypeError: getItems is not a function or its return value is not iterable |
یک روش معمول برای حل این مشکل این است که مقدار برگشتی تابع () getItems را به یک آرایه خالی مانند مثال زیر جایگزین کنید:
1 2 3 4 5 6 7 8 |
function getItems() { return null; } let [a = 10, b = 20] = getItems() || []; console.log(a); // 10 console.log(b); // 20 |
Nested array destructuring
تابع زیر یک آرایه را برمی گرداند که یکی از element های آن خود نیز یک آرایه است:
1 2 3 4 5 6 7 |
function getProfile() { return [ 'John', 'Doe', ['Red', 'Green', 'Blue'] ]; } |
از آنجایی که سومین element از آرایه برگشتی یک آرایه است باید از nested array destructuring استفاده کنیم:
1 2 3 4 5 6 7 8 9 10 11 |
let [ firstName, lastName, [ color1, color2, color3 ] ] = getProfile(); console.log(color1, color2, color3); // Red Green Blue |
در ادامه چندین مثال کاربردی از array destructuring assignment را کار خواهیم کرد
1) Swapping variables
array destructuring عملیات جابجایی مقدار متغیرها را بدون استفاده از متغیرهای موقت (temporary variable) آسان می کند:
1 2 3 4 5 6 7 |
let a = 10, b = 20; [a, b] = [b, a]; console.log(a); // 20 console.log(b); // 10 |
2) Functions that return multiple values
در جاوا اسکریپت، یک تابع می تواند فقط یک مقدار را برگرداند.با این وجود شما می توانید یک آرایه را برگردانید که شامل چندین مقدار است:
1 2 3 4 5 6 7 |
function stat(a, b) { return [ a + b, (a + b) / 2, a - b ] } |
حالا با استفاده از array destructuring میتوان element های آرایه برگشتی را به متغیرهای جداگانه assign کرد:
1 2 |
let [sum, average, difference] = stat(20, 10); console.log(sum, average, difference); // 30, 15, 10 |
دیدگاهتان را بنویسید