کار با آرایه ها در جاوا اسکریپت

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

ایجاد آرایه ها با استفاده از کلاس Array در جاوا اسکریپت

در جاوا اسکریپت بر خلاف جاوا، کلاس درون ساختی به نام Array وجود دارد که از آن برای ایجاد آرایه ها (که البته به عنوان یک شی در نظر گرفته می شوند) استفاده می شود. برای ایجاد یک شی از نوع آرایه از دستورات زیر استفاده می کنیم:

var aValues = new Array();

اگر از قبل تعداد عناصر آرایه مورد نظرتان را بدانید می توانید به شکل زیر عمل کنید:

var aValues = new Array(20);

برای مقداردهی خانه های آرایه به شکل زیر عمل می کنیم:

var aColors = new Array();
aColors[0] = “red”;
aColors[1] = “green”;
aColors[2] = “blue”;

در آرایه بالا با هر بار اضافه کردن عنصر جدید به صورت خودکار به تعداد خانه های آن افزوده می شود.

اگر شما از قبل مقادیری که قرار است درآرایه قرار بگیرند را بدانید می توانید به صورت عمل کنید:

var aColors = new Array(“red”, “green”, “blue”);

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

alert(aColors[1]); //outputs “green”

بدست آوردن طول آرایه

برای مشخص کردن تعداد عناصر موجود در آرایه از خاصیتی به نام length استفاده می شود. این مقدار همیشه یک واحد بیشتر از موقعیت آخرین خانه آرایه است.

اگر درآرایه قبلی که سه عنصر داشت به یکباره موقعیت مثلا ۲۵ را پر کنیم طول آرایه چه خواهد بود؟

در این صورت جاوا اسکریپت خانه های از ۳ تا ۲۴ را با مقدار null پر خواهد کرد و طول آرایه هم برابر ۲۶ خواهد بود:

var aColors = new Array(“red”, “green”, “blue”);
alert(aColors.length); //outputs “۳”
aColors[25] = “purple”;
aColors(arr.length); //outputs “۲۶”

راه دیگر ایجاد یک آرایه استفاده از براکت ها ([ ]) و علامت , بین هر عنصر از آرایه است به صورت زیر:

var aColors = [“red”, “green”, “blue”];
alert(aColors.length); //outputs “۳”
aColors[25] = “purple”;
alert(aColors.length); //outputs “۲۶”

نکته : آرایه ها در جاوا اسکریپت می توانند حداکثر ۴۲۹۴۹۶۷۲۹۵ خانه داشته باشند!

تبدیل آرایه به رشته

آرایه ها از سه متد خاص برای خروجی عناصر خود به صورت رشته ای که با کاما از هم جداشده اند پشتیبانی می کند:

alert(aColors.toString()); //outputs “red,green,blue”
alert(aColors.valueOf()); //outputs “red,green,blue”
alert(aColors.toLocaleString()); //outputs “red,green,blue”

می بینید که حاصل اجرای هر سه کد فوق یکسان است.

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

var aColors = [“red”, “green”, “blue”];
alert(aColors.join(“,”)); //outputs “red,green,blue”
alert(aColors.join(“-spring-”)); //outputs “red-spring-green-springblue”
alert(aColors.join(“][“)); //outputs “red][green][blue”

تبدیل رشته به آرایه

سوالی که در اینجا پیش می آید این است که آیا اشیایی از نوع string را هم می توان به طریق مشابه به آرایه تبدیل کرد؟

جواب مثبت است !

شی string متدی به نام ()split دارد که یک آرگومان می گیرد که همانطور که حدس زدید جداکننده ی رشته برای تبدیل به آرایه را مشخص می کند.

حال اگر شما رشته ای دارید که با , از هم جدا شده است می توانید به صورت زیر عمل کنید:

var sColors = “red,green,blue”;
var aColors = sColors.split(“,”);

اگر هیچ جداکننده ای مشخص نشود ، این تابع آرایه ای را بر می گرداند که هر عنصر آن شامل یکی از کاراکترهای رشته ی مورد نظر است. برای مثال:

var sColors = “green”;
var aColors = sColors.split(“”);
alert(aColors.toString()); //outputs “g,r,e,e,n”

اضافه کردن مقادیر جدید به آرایه ها در جاوا اسکریپت

آرایه ها از متدی به نام ()concat پشتیبانی می کنند. این تابع چندین آرگومان می گیرد و به آرایه جاری اضافه می کند و حاصل آن یک آرایه ی جدید خواهد بود. به مثالهای زیر دقت کنید:

var aColors = [“red”, “green”, “blue”];
var aColors2 = aColors.concat(“yellow”, “purple”);
alert(aColors2.toString()); //outputs “red,green,blue,yellow,purple”
alert(aColors.toString()); //outputs “red,green,blue”

برگرداندن عناصر خاصی از آرایه

از تابعی به نام ()slice برای برگرداندن عناصر خاصی از آرایه استفاده می شود. این تابع دو آرگومان می گیرد و از خانه آرگومان اول تا قبل از آرگومان دوم را به آرایه جدیدی تبدیل می کند. اگر فقط آرگومان اول منظور گردد این تابع عناصر از آن آرگومان تا انتهای آرایه را بر می گرداند. به مثال های زیر دقت کنید:

var aColors = [“red”, “green”, “blue”, “yellow”, “purple”];
var aColors2 = arr.slice(1);
var aColors3 = arr.slice(1, 4);
alert(aColors2.toString()); //outputs “green,blue,yellow,purple”
alert(aColors3.toString()); //outputs “green,blue,yellow”

در حالت کلی arr.slice(n,m) عناصر از خانه n تا m-1 را برمی گرداند.

تبدیل آرایه ها به پشته و صف

یکی از جذابترین ویژگی های آرایه در جاوا اسکریپت امکان تبدیل کردن آنها به دیگر ساختمان داده های رایج همچون stack و queue است.

اگر آرایه ای را به عنوان stack در نظر بگیریم می توانیم به راحتی ازتوابع ()push و ()pop برای اضافه و حذف عناصر از انتهای آرایه استفاده کنیم.

تابع ()push امکان اضافه کردن چندبن عنصر به آرایه و تابع ()pop امکان حذف آخرین عنصر آرایه و برگرداندن آن به عنوان مقدار بازگشتی تابع را فراهم می کند. البته تابع ()pop عنصری را که برمی گرداند از آرایه حذف می کند. به مثال های زیر دقت کنید:

var stack = new Array;
stack.push(“red”);
stack.push(“green”);
stack.push(“yellow”);
alert(stack.toString()); //outputs “red,green,yellow”
var vItem = stack.pop();
alert(vItem); //outputs “yellow”
alert(stack.toString()); //outputs “red,green”

جاوا اسکریپت توابع دیگری برای دستکاری عناصر ابتدایی آرایه فراهم می کند. تابعی به نام ()shift برای حذف و برگرداندن عنصر اول آرایه استفاده می شود. از طرف دیگر تابعی به نام ()unshift یک عنصر را به ابتدای آرایه اضافه کرده و بقیه عناصر را یک موقعیت به جلو جابجا می کند:

var aColors = [“red”, “green”, “yellow”];
var vItem = aColors.shift();
alert(aColors.toString()); //outputs “green,yellow”
alert(vItem); //outputs “red”
aColors.unshift(“black”);
alert(aColors.toString()); //outputs “black,green,yellow”

در شکل زیر نحوه عملکرد توابع فوق بر روی یک آرایه عددی نمایش داده شده است:

مرتب سازی آرایه ها در جاوا اسکریپت

از دو تابع برای مرتب سازی عناصر آرایه استفاده میشود. تابعی به نام ()reverse برای مرتب سازی عکس آرایه استفاده می شود. مثال:

var aColors = [“red”, “green”, “blue”];
aColors.reverse();
alert(aColors.toString()); //outputs “blue,green,red”

از طرف دیگر تابعی به نام ()sort عناصر آرایه را به صورت صعودی بر حسب مقادیرشان مرتب می کند. در این صورت عناصر آرایه بر حسب کدهای کاراکتری شان مرتب می شوند. مثال:

var aColors = [“red”, “green”, “blue”, “yellow”];
aColors.sort();
alert(aColors.toString()); //outputs “blue,green,red,yellow”

در صورتی که عناصر آرایه اعداد باشند نتیجه کمی عجیب و غریب است:

var aColors = [3, 32, 2, 5]
aColors.sort();
alert(aColors.toString()); //outputs “۲,۳,۳۲,۵”

همانطور که اشاره شد متد ()sort به صورت پیش فرض عناصر آرایه را به صورت الفبایی (بر حسب کدهای کاراکتری آن ها) و به صورت صعودی مرتب می کند. چنانچه بخواهیم آرایه ای از اعداد را به صورت صعودی مرتب کنیم می بایست می بایست از یک تابع مقایسهای که در قالب یک آرگومان برای این متد فرستاده می شود استفاده کنیم. خود این تابع مقایسه ای همیشه دو آرگومان(به عنوان مثال a,b) گرفته، آن ها را با هم مقایسه کرده و آرایهی اصلی براساس مقادیر بازگشتی این تابع انجام می شود.

مقدار بازگشتی تابع مقایسه ای به یکی از سه صورت زیر است:

• چنانچه می بایست b (آرگومان دوم) قبل از a (آرگومان اول) قرار بگیرد مقداری مثبت را برمی گرداند.
• چنانچه می بایست مکان a و b تغییری نکند مقدار صفر را برمی گرداند.
• چنانچه می بایست a قبل از b قرار بگیرد مقداری منفی را برمی گرداند.

به عنوان مثال در صورتی که تابع زیر را به عنوان آرگومان برای متد ()sort بفرستیم آرایه به صورت صعودی مرتب خواهد شد:

function Compare(a,b){
If(a>b){
Return 1;
}else if (a<b){
Return -1;
}else{
Return 0;
}
}

دقت داشته باشید که بدنه تابع فوق را می توان به شکل زیر کوتاهتر و ساده تر کرد ضمن اینکه همان عملکرد را خواهد داشت:

function Compare(a,b){
Return a-b;
}

برای مرتب سازی آرایه به صورت عددی نزولی کافی است جای ۱ و ۱- در تابع مقایسه ای را عوض کنید.

حذف و درج در میانه های آرایه

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

عمل حذف: از این متد برای حذف عناصری از میانه های آرایه می توان استفاده کرد. برای این کار از دو پارامتر برای این تابع استفاده می شود: موقعیت اولین عنصر و تعداد عناصر مورد نظر برای حذف. برای مثال (۰,۲)arr.splice دو عنصر اول آرایه ای به نام arr را حذف می کند.

درج بدون حذف: شما می توانید ازاین تابع برای درج عناصر جدید با استفاده از سه پارامتراستفاده کنید : موقعیت شروع ، تعداد عناصر حذفی و عناصر جدید برای درج.

شما می توانید هر تعداد پارامتر برای درج را به این تابع بدهید. برای مثال arr.splice(2, 0, “red”, “green”) عناصر red و green را از خانه دوم در آرایه درج می کند.

درج عنصر همراه با حذف : شما می توانید از این تابع برای درج عناصر جدید در یک موقعیت مشخص همزمان با عمل حذف و استفاده از سه پارامتر استفاده کنید: موقعیت شروع حذف ، تعداد عناصر حذفی و عناصر جدید درجی. به عنوان مثال arr.splice(2, 1, “red”, “green”) یک عنصر را از موقعیت ٢ حذف کرده و مقادیر red و green را از همان موقعیت ( ۲) درج می کند.