آموزش ویژگی های ECMAScript 6 (جلسه 21) : آموزش Destructuring در آرایه ها

آخرین مطالب

امکانات وب

آموزش ویژگی های ECMAScript 6 (جلسه 21) : آموزش Destructuring در آرایه ها

همونطور که اطلاع دارید در جلسه قبل در مورد Destructuring در اشیاء یا object ها توضیحاتی رو قرار دادیم و شما رو بصورت کامل با اونا آشنا کردیم. در این قسمت قصد داریم در مورد Destructuring در آرایه ها بحث کنیم. Destructuring در آرایه ها بسیار شبیه به Destructuring در اشیاء است. درون اشیاء با استفاده از نام ویژگی، به مقادیر مورد نظر دسترسی پیدا میکردیم. اما در آرایه ها دیگه چنین چیزی وجود نداره و با استفاده از موقعیت اعضا، به اونا دسترسی پیدا میکنیم. مثال زیر رو در نظر بگیرید:

var foo = ['one', 'two', 'three'];

var [one, two, three] = foo;

console.log(one); // "one"

console.log(two); // "two"

console.log(three); // "three"

همونطور که میبینید در خط 1 یک آرایه سه عضوی رو تعریف کردیم و در خط 3 از Destructuring استفاده کردیم و سه نام دلخواه رو برای متغیرها در نظر گرفتیم و سه مقدار مربوط به آرایه foo به ترتیب و بصورت متناظر در متغیرهای one و two و three قرار میگیرن. در خط 5 تا 7 نیز این مقادیر رو در Console چاپ کردیم و خروجی اونا در مقابلشون قرار داده شده. همونطور که میبینید آرایه مورد نظر سه عضو داره و ما از سه عضو اون نیز استفاده کردیم. اما ما میتونیم از یک یا دو عضو اون نیز استفاده کنیم. بصورت زیر:

var foo = ['one', 'two', 'three'];

var [one, two] = foo;

console.log(one); // "one"

console.log(two); // "two"

میبینید که دو مقدار اول آرایه رو در متغیرهای one و two قرار دادیم. فرض کنید که شما فقط میخواید به مقدار آخر آرایه دسترسی داشته باشید و اون رو درون یک متغیر ذخیره کنید. برای اینکار باید از , یا کامای خالی استفاده کنید. کد زیر رو در نظر بگیرید:

var foo = ['one', 'two', 'three'];

var [,, three] = foo;

console.log(three); // "three"

همونطور که میبینید از دو کاما یا , استفاده کردیم و این کار به این معنا هست که با دو مقدار اول کاری نداریم و فقط به مقدار سوم نیاز داریم. در بالا عضو سوم آرایه رو درون متغیر three ذخیره کردیم. همونطور که در اشیاء هم توضیح دادیم، گاهی اوقات پیش میاد که مرحله تعریف متغیر و مقدار دهی اونا در یکجا انجام نمیشه. برای این کار بصورت زیر عمل میکنیم:

var a, b;

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

console.log(a); // 1

console.log(b); // 2

همونطور که میبینید در خط 1 متغیرها رو تعریف کردیم و در خط 3 مقادیر 1 و 2 رو به روش Destructuring به متغیرهای a و b نسبت دادیم (در آرایه ها دیگه نیازی نیست که مثل اشیاء دور اونا یک پرانتز قرار بدیم و به همین صورت به خوبی اجرا خواهند شد). در آخر نیز اونا رو در Console چاپ کردیم.

همانند اشیاء میتونیم در آرایه ها نیز از مقادیر پیش فرض استفاده کنیم. کد زیر رو در نظر بگیرید:

let names = ['Mohammad'];

let [firstName, secondName] = names;

console.log(firstName); // Mohammad

console.log(secondName); // undefined

میبینید که آرایه مورد نظر فقط یک عضو داره ولی ما میخوایم دو متغیر رو مقداردهی کنیم. مقدار متغیر firstName برابر با Mohammad میشه ولی برای متغیر secondName هیچ مقداری در آرایه وجود ندارد و به همین دلیل در خروجی undefined قرار داده میشه. در این مواقع میتونین از مقادیر پیش فرض استفاده کنید. بصورت زیر:

let names = ['Mohammad'];

let [firstName, secondName = 'Ali'] = names;

console.log(firstName); // Mohammad

console.log(secondName); // Ali

میبینید که برای secondName مقدار پیش فرض قرار دادیم و زمانی که آرایه مورد نظر مقداری برای این متغیر نداشته باشد، از این مقدار پیش فرض استفاده خواهد شد.

کاربرد دیگه ای که Destructuring داره و کار مارو راحتتر میکنه در Swap کردن یا عوض کردن مقدار دو متغیر است. فرض کنید که دو متغیر a = 1 و b = 2 رو دارید و میخواید مقادیر اونا رو با هم عوض کنید و بصورت a = 2 و b = 1 در بیارید. برای اینکار در گذشته از روش زیر استفاده میکردیم:

let a = 1,

b = 2,

tmp;

tmp = a;

a = b;

b = tmp;

console.log(a); // 2

console.log(b); // 1

میبینید که یک متغیر موقتی بنام tmp تعریف کردیم و از اون برای تغییر دادن مقادیر دو متغیر استفاده کردیم. اما با استفاده از Destructuring به راحتی میتونین این کار رو انجام بدین. بصورت زیر:

let a = 1,

b = 2;

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

console.log(a); // 2

console.log(b); // 1

با اینکار مقدار متغیرهای a و b به سادگی تغییر میکنه.

اگر یادتون باشه قبلا در مورد Rest Parameter ها براتون توضیحاتی رو قرار دادیم. در اینجا نیز میتونیم از قدرت Rest Parameter ها استفاده کنیم. کد زیر رو در نظر بگیرید:

let names = ['Mohammad', 'Ali', 'Hassan', 'Ahmad'];

let [firstName, ...RestNames] = names;

console.log(firstName); // Mohammad

console.log(RestNames); // ['Ali', 'Hassan', 'Ahmad']

میبینید که یک آرایه در خط 1 تعریف کردیم و در خط 3 با استفاده از Destructuring مقدار Mohammad رو درون firstName قرار دادیم و با استفاده از ... بقیه مقادیر رو درون آرایه RestNames قرار دادیم. در آخر نیز اونا رو در Console چاپ میکنیم. خروجی در مقابل هر دستور و بعد از // قرار داده شده است.

فرض کنید که آرایه هایی داشته باشیم که تودرتو باشند. برای این موارد هم میتونیم به همه مقادیرشون دسترسی داشته باشیم. کد زیر رو در نظر بگیرید:

let colors = ["red", ["green", "darkgreen", "lightgreen"], "blue"];

let [redColor, [,, lightgreenColor]] = colors;

console.log(redColor); // red

console.log(lightgreenColor); // lightgreen

میبینید که با استفاده از [] یه مرحله دیگه وارد آرایه شدیم و به آرایه ای که درون آرایه مورد نظر قرار داره نفوذ کردیم و متغیر سوم اون رو مورد استفاده قرار دادیم و در Console چاپ کردیم. به همین راحتی.

موفق و پیروز باشید.

یا علی

سون لرن • آموزش...

ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : آموزش,ویژگی,آموزش,آرایه, نویسنده : استخدام کار 7learn بازدید : 351 تاريخ : جمعه 31 شهريور 1396 ساعت: 6:54

آموزش ویژگی های ECMAScript 6 (جلسه 21) : آموزش Destructuring در آرایه ها

آخرین مطالب

امکانات وب

آموزش ویژگی های ECMAScript 6 (جلسه 21) : آموزش Destructuring در آرایه ها

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه