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

ES6 یک ویژگی جدید به نام destructing assignment معرفی کرد که به شما این امکان را می دهد تا properties یک object یا element های یک آرایه را به متغیرهای جداگانه assignment کنید.در این نوشته array destructuring را مورد بررسی قرار می دهیم.

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

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

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

function getScores() {

return [70, 80, 90];

}

قطعه کد زیر تابع () getScores را فراخوانی کرده و مقدار برگشتی را به یک متغیر اختصاص می دهد:

let scores = getScores();

1	let scores = getScores();

برای به دست آوردن هر score، باید مشابه زیر عمل کنید:

let x = scores[0], 
    y = scores[1], 
    z = scores[2];

let x = scores[],

y = scores[1],

z = scores[2];

تا قبل از ES6 راه مستقیمی برای assign کردن element های یک آرایه به چندین متغیر مثل x, y و z وجود نداشت.خوشبختانه ، با در ES6 می توانید از destructing assignment مشابه مثال زیر استفاده کنید:

let [x, y, z] = getScores();

console.log(x); // 70
console.log(y); // 80
console.log(z); // 90

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 خواهد بود:

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

let [x, y, z] = getScores();

console.log(x); // 70
console.log(y); // 80
console.log(z); // undefined

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 های اضافی در نظر گرفته نمی شوند.به مثال زیر توجه کنید:

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

let [x, y, z] = getScores();

console.log(x); // 70
console.log(y); // 80
console.log(z); // 90

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 می توانید تمامی عناصر باقی مانده یک آرایه را گرفته و در یک آرایه جدید قرار دهید:

let [x, y ,...args] = getScores();
console.log(x); // 70
console.log(y); // 80
console.log(args); // [90, 100]

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 متغیر ها باشد.به مثال زیر توجه کنید:

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

let a, b;

[a, b] = [10, 20];

console.log(a); // 10

console.log(b); // 20

Setting default values

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

function getItems() {
    return [10, 20];
}

let items = getItems();
let thirdItem = items[2] != undefined ? items[2] : 0;
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://reactapp.ir/javascript-promises/" target="_blank" class="IRPP_ruby"><!-- INLINE RELATED POSTS 1/1 //--><style> .IRPP_ruby , .IRPP_ruby .postImageUrl , .IRPP_ruby .centered-text-area { height: 130px; position: relative; } .IRPP_ruby , .IRPP_ruby:hover , .IRPP_ruby:visited , .IRPP_ruby:active { border:0!important; } .IRPP_ruby .clearfix:after { content: ""; display: table; clear: both; } .IRPP_ruby { display: block; transition: background-color 250ms; webkit-transition: background-color 250ms; width: 100%; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #2C3E50; } .IRPP_ruby:active , .IRPP_ruby:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #34495E; } .IRPP_ruby .postImageUrl { background-position: center; background-size: cover; float: right; margin: 0; padding: 0; width: 31.59%; } .IRPP_ruby .centered-text-area { float: left; width: 65.65%; padding:0; margin:0; } .IRPP_ruby .centered-text { display: table; height: 130px; right: 0; top: 0; padding:0; margin:0;float: left;width: 100%; } .IRPP_ruby .IRPP_ruby-content { display: table-cell; margin: 0; padding: 0 0px 0 74px; position: relative; vertical-align: middle; width: 100%; } .IRPP_ruby .ctaText { border-bottom: 0 solid #fff; color: #3498DB; font-size: 13px; font-weight: bold; margin: 0; padding: 0; } .IRPP_ruby .postTitle { color: #ECF0F1; font-size: 16px; font-weight: 600; margin: 0; padding: 0; } .IRPP_ruby .ctaButton { background: url(https://d2ffcs5wrcif.cdn.shift8web.com/wp-content/plugins/intelly-related-posts-pro/assets/images/next-arrow.png)no-repeat; display: inline-block; height: 130px; width: 54px; } .IRPP_ruby .ctaButton { background-color: inherit; margin-left: 10px; position: absolute; left: 0; top: 0; } .IRPP_ruby:after { content: ""; display: block; clear: both; } </style><div class="postImageUrl" style="background-image:url(https://d2ffcs5wrcif.cdn.shift8web.com/wp-content/uploads/promise-in-javascript-300x210.jpg);"></div><div class="centered-text-area"><div class="centered-text"><div class="IRPP_ruby-content"><div class="ctaText"></div><div style="clear:both"></div><div class="postTitle">promise در جاوا اسکریپت</div></div></div><div class="ctaButton"></div></div></a></div>
console.log(thirdItem); // 0

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 مشخص کرد:

let [, , thirdItem = 0] = getItems();

console.log(thirdItem); // 0

let [, , thirdItem = ] = getItems();

console.log(thirdItem); // 0

اگر مقدار گرفته شده از آزایه برابر با undefined باشد، شما می توانید default value برای متغیر مشخص کنید:

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

let a, b;

[a = 1, b = 2] = [10];

console.log(a); // 10

console.log(b); // 2

اگر تابع ()getItems یک آرایه را برنگرداند و شما توقع آرایه داشته باشید،نتیجه destructing assignment چیزی جز error نحواهد بود.به مثال زیر توجه کنید:

function getItems() {
    return null;
}

let [x = 1, y = 2] = getItems();

function getItems() {

return null;

}

let [x = 1, y = 2] = getItems();

Error:

Uncaught TypeError: getItems is not a function or its return value is not iterable

1	Uncaught TypeError: getItems is not a function or its return value is not iterable

یک روش معمول برای حل این مشکل این است که مقدار برگشتی تابع () getItems را به یک آرایه خالی مانند مثال زیر جایگزین کنید:

function getItems() {
    return null;
}

let [a = 10, b = 20] = getItems() || [];

console.log(a); // 10
console.log(b); // 20

function getItems() {

return null;

}

let [a = 10, b = 20] = getItems() || [];

console.log(a); // 10

console.log(b); // 20

Nested array destructuring

تابع زیر یک آرایه را برمی گرداند که یکی از element های آن خود نیز یک آرایه است:

function getProfile() {
    return [
        'John',
        'Doe',
        ['Red', 'Green', 'Blue']
    ];
}

function getProfile() {

return [

'John',

'Doe',

['Red', 'Green', 'Blue']

];

}

از آنجایی که سومین element از آرایه برگشتی یک آرایه است باید از nested array destructuring استفاده کنیم:

let [
    firstName,
    lastName,
    [
        color1,
        color2,
        color3
    ]
] = getProfile();

console.log(color1, color2, color3); // Red Green Blue

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) آسان می کند:

let a = 10, 
    b = 20;

[a, b] = [b, a];

console.log(a); // 20
console.log(b); // 10

let a = 10,

b = 20;

[a, b] = [b, a];

console.log(a); // 20

console.log(b); // 10

2) Functions that return multiple values

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

function stat(a, b) {
    return [
        a + b,
        (a + b) / 2,
        a - b
    ]
}

function stat(a, b) {

return [

a + b,

(a + b) / 2,

a - b

]

}

حالا با استفاده از array destructuring میتوان element های آرایه برگشتی را به متغیرهای جداگانه assign کرد:

let [sum, average, difference] = stat(20, 10);
console.log(sum, average, difference); // 30, 15, 10

1 2	let [sum, average, difference] = stat(20, 10); console.log(sum, average, difference); // 30, 15, 10

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

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

Array Destructuring و Rest syntax

Setting default values

Nested array destructuring

1) Swapping variables

2) Functions that return multiple values

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

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

Array Destructuring و Rest syntax

Setting default values

Nested array destructuring

1) Swapping variables

2) Functions that return multiple values

مطالب زیر را حتما مطالعه کنید

Reflection در جاوا اسکریپت

Proxy در جاوا اسکریپت

()includes در جاوا اسکریپت

endsWith در جاوا اسکریپت

startsWith در جاوا اسکریپت

()Object.is در جاوا اسکریپت

دیدگاهتان را بنویسید لغو پاسخ