آموزش ویژگی های ECMAScript 6 (جلسه 18) : روشهای مختلف ساخت آرایه

آخرین مطالب

امکانات وب

آموزش ویژگی های ECMAScript 6 (جلسه 18) : روشهای مختلف ساخت آرایه

همونطور که اطلاع دارید در جلسات گذشته با کلاسها و امکانات و قابلیتهای اونا بصورت مقدماتی آشنا شدیم. در این جلسه قصد داریم در مورد انواع روشهای ساخت آرایه با هم بحث کنیم و تفاوت اونا رو با استفاده از مثالهای متنوع متوجه بشیم. همونطور که می دونید آرایه ها بخش بسیار مهمی از هر زبان برنامه نویسی از جمله javascript هستند و هر برنامه نویسی باید به خوبی با اونا آشنا باشه. در آرایه ها نیز همانند دیگر اجزای موجود در Javascript پیشرفتها و تغییراتی صورت گرفته که استفاده از اون رو نسبت به گذشته برای توسعه دهندگان راحت تر کرده است. همچنین قابلیتها و متدهایی در ES6 به اون اضافه شده که در این جلسه و جلسه بعد اونا رو بررسی میکنیم.

همونطور که از قبل میدونین دو روش اصلی برای ساخت آرایه در Javascript وجود داره که یکی از اونا استفاده از سازنده Array است و دیگری استفاده از [] می باشد. این موارد محدودیتهای زیادی دارند. همچنین اشیاء یا object هایی بنام Array like Object وجود دارند که برای تبدیل اونا به آرایه باید کدهای اضافه ای رو قرار بدیم. اما با اومدن ES6، دو متد Array.of و Array.from اضافه شدن و با استفاده از این موارد خیلی راحتتر از قبل میتونیم با آرایه ها کار کنیم و اونا رو بسازیم. کد زیر رو در نظر بگیرید:

let items = new Array(2);

console.log(items.length);

console.log(items[0]);

console.log(items[1]);

همونطور که میبینید در خط 1 یک آرایه 2 عضوی رو با استفاده از سازنده Array به وجود آوردیم. زمانی که به این صورت آرایه رو تعریف میکنیم، آرایه دو عضوی ساخته میشه اما هیچ کدام از اعضای اون مقدار خاصی ندارند و در واقع undefined یا تعریف نشده هستند. به همین دلیل زمانی که در خط 4 و 5 مقادیر اعضای صفرم و یکم رو در Console چاپ میکنیم، undefined در Console چاپ خواهد شد. اگر کد بالا رو کمی تغییر بدیم و بصورت زیر در بیاریم:

let items = new Array("2");

console.log(items.length);

console.log(items[0]);

console.log(items[1]);

میبینید که این بار بجای عدد 2 از رشته 2 استفاده کردیم. با اینکار یک آرایه یک عضوی که مقدار اون 2 است به وجود میاریم. پس خروجی خط 3 برابر با 1 هست بدلیل اینکه آرایه مورد نظر یک عضو داره. خروجی خط 4 برابر با رشته 2 میشه. بدلیل اینکه آرایه یک عضو بیشتر ندارد، خروجی خط 5 هم undefined خواهد بود.

حالت بعدی رو در نظر بگیرید:

let items = new Array(1, 2);

console.log(items.length);

console.log(items[0]);

console.log(items[1]);

میبینید که در اینجا دو ورودی رو به سازنده Array پاس دادیم. با اینکار یک آرایه دو عضوی با اعضای 1 و 2 ساخته میشه. پس خروجی کد بالا در Console بصورت زیر خواهد بود:

حالت بعد بصورت زیر است:

let items = new Array(5, "3");

console.log(items.length);

console.log(items[0]);

console.log(items[1]);

میبینید که در اینجا سازنده Array رو با دو ورودی عددی و String مورد استفاده قرار دادیم. با اینکار یک آرایه دو عضوی با عضوهای 5 و رشته 3 به وجود خواهیم آورد. پس خروجی کد بالا در Console بصورت زیر خواهد بود:

میبینید که در این روش تعریف حالت های زیادی به وجود میان و در بعضی از مواقع میتونن باعث گیج کردن یا سردرگمی شما بشن. به همین خاطر بود که ES6 یک متد بنام Array.of() رو معرفی کرده که همه این مشکلات رو برطرف میکنه. این متد دقیقا همانند سازنده Array برای تعریف آرایه ها به کار میره ولی دیگه هیچ کدام از درد سرهای سازنده Array رو نداره و همون چیزی که انتظار دارید رو در خروجی دریافت میکنید. اگر بخوایم کدهای بالا رو بصورت Array.of تعریف کنیم، بصورت زیر عمل میکنیم:

let items = Array.of(2);

console.log(items.length);

console.log(items[0]);

console.log(items[1]);

let items = Array.of("2");

console.log(items.length);

console.log(items[0]);

console.log(items[1]);

let items = Array.of(1, 2);

console.log(items.length);

console.log(items[0]);

console.log(items[1]);

let items = Array.of(5, "3");

console.log(items.length);

console.log(items[0]);

console.log(items[1]);

میبینید که در هر مورد در ابتدا new رو حذف کرده و متد of رو به Array اضافه میکنیم. با اینکار دیگه خروجی همون چیزی که حدس میزنیم خواهد بود و هیچ کدام از موارد گیج کننده قبلی به وجود نمیاد. Array.of به نوع ورودی یا تعداد توجهی نمیکند و هر تعداد رشته یا عدد رو به اون پاس بدین، اونا رو درون یک آرایه قرار داده و بهتون تحویل میده.

متد دیگه ای که در ES6 معرفی شده، Array.from است که با استفاده از اون میتونین اشیای شبیه به آرایه یا Array like رو بصورت آرایه در بیارید و از متدهای آرایه برای اونا استفاده کنید. در گذشته برای تبدیل یک شئ Array like به آرایه باید کدهای زیادی رو قرار میدادیم. مثلا برای تبدیل کردن arguments که یک Array like هست به یک آرایه، در گذشته بصورت زیر عمل می کردیم:

function makeArray(arrayLike) {

var result = [];

for(var i = 0; len = arrayLike.length; i++) {

result.push(arrayLike[i]);

}

return result;

}

function doSomthing() {

var args = makeArray(arguments);

}

میبینید که یک تابع بنام makeArray ساختیم و وظیفه اون تبدیل Array like به آرایه است. بعد از اون درون تابع doSomthing از تابع makeArray استفاده کردیم و شئ arguments رو که یک شئ array like هست به آرایه تبدیل کردیم. اما با استفاده از متد Array.from کار ما در این زمینه خیلی راحتتر شده و کد بالا بصورت زیر خلاصه میشه:

function doSomthing() {

var args = Array.from(arguments);

}

میبینید که به سادگی شئ array like رو به متد Array.from ارسال کردیم و این متد آرایه اون رو درون args قرار میده. به همین راحتی. متد Array.from خیلی قدرتمند هست و توانایی تبدیل هر شئ که ویژگی Symbol.iterator داشته باشه رو داره و میتونین از اون استفاده کنید. پس شما میتونین iterator ها و بیشتر مواردی که در ES6 اضافه شدن رو به راحتی به آرایه تبدیل کنید.

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

یا علی

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

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

برچسب : آموزش,ویژگی,روشهای,مختلف,آرایه, نویسنده : استخدام کار 7learn بازدید : 325 تاريخ : چهارشنبه 29 شهريور 1396 ساعت: 18:22

آموزش ویژگی های ECMAScript 6 (جلسه 18) : روشهای مختلف ساخت آرایه

آخرین مطالب

امکانات وب

آموزش ویژگی های ECMAScript 6 (جلسه 18) : روشهای مختلف ساخت آرایه

آرشیو مطالب

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

لینک دوستان

خبرنامه