• توجه: در صورتی که از کاربران قدیمی ایران انجمن هستید و امکان ورود به سایت را ندارید، میتوانید با آیدی altin_admin@ در تلگرام تماس حاصل نمایید.

جاوا اسکریپت - آرایه (Array)

sky boy

متخصص بخش برنامه نویسی

بحث آرایه ها در زبان های برنامه نویسی مخصوصا در برنامه نویسی وب از جمله شیرین ترین و در عین حال حساس ترین مباحث به شمار می آید،
از طرفی استفاده از آرایه (Array) در برنامه نویسی های پیشرفته یک امر اجتناب ناپذیر است
ولی به دلیل وجود ظرایف خاص، جزئیات و اینکه درک صحیح این قابلیت نیاز به فراگیری دقیق مقدمات آن دارد،
می تواند در نگاه نخست مبحثی پیچیده و عجیب به نظر برسد؛

آرایه (Array) چیست؟

آرایه در برنامه نویسی، به یک متغیر گفته می شود که درون خود، متغیرهایی زیر مجموعه با نام و مقادیر متفاوت دارد،
به طور مثال دفترچه ای را در نظر بگیرید (آرایه) که تعدادی صفحه دارد (شماره هر صفحه = نام متغیرهای آرایه)
و در هر صفحه، اطلاعاتی وجود دارد (مقادیر متغیرهای درون آرایه)، کارکرد آرایه ها نیز بی شباهت به این مثال نیست؛
توجه کنید که این سیستم به صورت از پیش تعریف شده (built-in یا درونی) در مفسر جاوا اسکریپت وجود دارد،
یعنی نیازی نیست برای تفهیم کارکرد آرایه ها به مرورگر، تمام جزئیات را بنویسیم،
اما لازم است که برای ایجاد و به کارگیری آرایه ها، اصول و قواعد خاصی را در رابطه با شیوه نگارش (syntax) آنها رعایت کنیم
 

sky boy

متخصص بخش برنامه نویسی

شیوه نگارش (syntax) آرایه در جاوا اسکریپت


برای نوشتن و تعریف یک آرایه در جاوا اسکریپت، تقریبا دو شیوه متفاوت ولی با کارکرد یکسان وجود دارد،
در هر دو شیوه یک متغیر کلی برای آرایه تعریف می کنیم و سپس متغیرها و مقادیر زیر مجموعه آن را به آرایه نسبت می دهیم،
این دو شیوه متفاوت را در مثال زیر می توانید مشاهده کنید.
روش اول (تعریف آرایه به روش استاندارد):

کد:
<script type="text/javascript">
//تعریف متغیر اصلی آرایه
var myArray = new Array();
//تعریف متغیرهای زیر مجموعه و مقادیر برای آرایه ها
myArray[0] = "آموزش";
myArray[1] = "جاوا";
myArray[2] = "اسکریپت";
//گرفتن خروجی از متغیرهای آرایه
document.write(myArray[0] + ' ' + myArray[1] + ' ' + myArray[2]);
</script>






خروجی مثال بالا به شکل زیر خواهد بود.


کد:
آموزش جاوا اسکریپت





توضیح:
- همانطور که می بینید، ابتدا یک متغیر کلی برای آرایه خود تعریف کرده ایم، این کار را با نسبت دادن new Array به متغیر فرضی myArray انجام داده ایم.
- بعد از اینکه آرایه را تعریف کردیم، باید متغیرهای زیر مجموعه آن و مقادیرشان را هم مشخص کنیم؛ نام متغیرهای آرایه در مثال بالا با یک [] شماره گذاری شده اند، به عدد داخل این [] کلید آرایه می گویند که متغیرهای متفاوت آن را از هم تفکیک می کند، به یاد داشته باشیم که شمارش این کلید ها در برنامه نویسی، از صفر شروع می شود نه از یک.
- هر کلید در مثال بالا، در واقع یک متغیر زیرمجموعه از آرایه اصلی ما است که مقادیری به عنوان مقدار در خود دارد (اگر مثال دفتر، صفحات و اطلاعات صفحات را شبیه سازی کنید، درک نحوه کارکرد آرایه چندان سخت نیست).
- در پایان کد بالا نیز، با یک دستور document.write ساده، مقادیر متغیرهای آرایه را به خروجی ارسال کرده ایم، استفاده از مقادیر متغیرها بسته به هدف شما در برنامه نویسی، متفاوت خواهد بود، لذا الزامی نیست که حتما مقادیر به صورت خام به خروجی ارسال شوند و می توانند بعد از فرایندی، با مقادیر دیگر ترکیب یا تفریق شوند و خلاصه هر آنچه که در برنامه نویسی می توان با یک متغیر انجام داد، در اینجا نیز شدنی است.
 

sky boy

متخصص بخش برنامه نویسی
روش دوم (تعریف آرایه به روش مختصر نویسی):
در روش مختصر نویسی آرایه ها، از علامت [] و یا () به طور کلی برای مقادیر متغیرهای آرایه استفاده می کنیم، در این شیوه، متغیرها و کلیدها، به صورت خودکار تعریف شده و در دسترس هستند، یعنی کافی است مقادیر آنها را تعیین کنیم و بقیه کار را به مفسر جاوا اسکریپت بسپاریم.


کد:
<script type="text/javascript">
//تعریف متغیر اصلی آرایه و مقادیر به روش مختصر نویسی
var Books = new Array("تاریخ","جغرافیا","ریاضی");
//گرفتن خروجی از متغیرهای آرایه
document.write(Books[0] + ' ' + Books[1] + ' ' + Books[2]);
</script>



خروجی مثال بالا به شکل زیر خواهد بود.


کد:
تاریخ جغرافیا ریاضی


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

sky boy

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




کد:
<script type="text/javascript">
//تعریف متغیر اصلی آرایه و مقادیر به روش مختصر نویسی
var Domains = ["ir","com","net"];
//گرفتن خروجی از متغیرهای آرایه
document.write(Domains[0] + ' ' + Domains[1] + ' ' + Domains[2]);
</script>


خروجی مثال بالا به شکل زیر خواهد بود.


کد:
ir com net


توضیح:
- ملاحظه می کنید که در اینجا نیازی نیست از new Array استفاده کنیم، در واقع وقتی علامت [] را برای تعریف یک متغیر به کار می بریم، مفسر مرورگر آن را به عنوان یک آرایه می شناسد.
 

sky boy

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

با آرایه و نحوه تعریف و کاربرد آن آشنا شدید، نوبت آن رسیده که گام را کمی فراتر گذاشته و با متدهای تکمیلی آن نیز آشنا شوید.
متدها در بحث آرایه، به خاصیت هایی گفته می شوند که می توانند رفتار آرایه ها را برایمان مدیریت کنند، در لیست زیر این متدها و کاربردشان را معرفی می کنیم.



- متد concat: برای ترکیب دو یا چند آرایه و ایجاد یک آرایه جدید.



کد:
Array1.concat(Array2,Array3);

- متد join: الحاق تمام عناصر یک آرایه در یک رشته متنی.



کد:
Array.join();

نکته: برای این کار می توان از toString نیز استفاده کرد.



کد:
Array.toString();

- متد pop: حذف آخرین عنصر از یک آرایه و برگرداندن آن.



کد:
Array.pop();


- متد push: افزودن یک یا چند عنصر به آرایه و برگرداندن تعداد مقادیر آرایه.



کد:
Array.push("value1,value2")
 

sky boy

متخصص بخش برنامه نویسی
- متد reverse: تغییر چینش متغیرهای آرایه به صورت معکوس (برای حروف انگلیسی).



کد:
Array.reverse();

- متد shift: حذف اولین مقدار از آرایه و برگرداندن آن و تبدیل اولین مقدار به یک آرایه جدید.





کد:
Array.shift();

- متد splice: انتخاب یک یا چند مقدار از آرایه با تعیین ابتدا و انتهای برش یا افزودن یک یا چند مقدار با تعیین انتها و ابتدای برش و مقادیر.





کد:
Array.slice(num1,num2);
Array.slice(num2,num1,"value1","value2");

- متد sort: چینش منظم و خودکار نتایج یک آرایه بر اساس حروف الفبا و ... (برای حروف انگلیسی).
متد sort در حالت پیش فرض، مقادیر را به ترتیب حروف الفبا چینش می کند.




کد:
Array.sort();

همچنین متد sort می تواند مقادیر عددی را به صورت صعودی (از کوچکتر به بزرگتر یا ascending) چینش کند.





کد:
Array.sort(function(a,b){return a-b});
 

sky boy

متخصص بخش برنامه نویسی
و یا مقادیر عددی را برعکس، به صورت نزولی (از بزرگتر به کوچکتر یا descending) چینش کند.


کد:
Array.sort(function(a,b){return b-a});

- متد unshift: افزودن یک یا چند مقدار به ابتدای یک آرایه و برگرداندن مقادیر جدید آرایه (در مرورگر اینترنت اکسپلورر 8 و ماقبل به درستی پشتیبانی نمی شود).




کد:
Array.unshift("value1","value2");

مثال :
در زیر تقریبا برای تمام موارد گفته شده در خصوص آرایه ها، می توانید مثال را به صورت html ذخیره و استفاده کنید




کد:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>آرایه ها در جاوا اسکریپت</title>
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
</style>
</head>
<body>
<noscript>
جاوا اسکریپت در مرورگر شما غیر فعال است! <br />
</noscript>
تعریف آرایه به شیوه استاندارد:<br /><br />
<script type="text/javascript">
//<![CDATA[
//تعریف متغیر اصلی آرایه
var myArray = new Array();
//تعریف متغیرهای زیر مجموعه و مقادیر برای آرایه ها
myArray[0] = "آموزش";
myArray[1] = "جاوا";
myArray[2] = "اسکریپت";
//گرفتن خروجی از متغیرهای آرایه
document.write(myArray[0] + ' ' + myArray[1] + ' ' + myArray[2]);
//]]>
</script>
<hr />

تعریف آرایه به شیوه مختصر نویسی با علامت ():<br /><br />
<script type="text/javascript">
//<![CDATA[
//تعریف متغیر اصلی آرایه و مقادیر به روش مختصر نویسی
var Books = new Array("تاریخ","جغرافیا","ریاضی");
//گرفتن خروجی از متغیرهای آرایه
document.write(Books[0] + ' ' + Books[1] + ' ' + Books[2]);
//]]>
</script>
<hr />

تعریف آرایه به شیوه مختصر نویسی با علامت []:<br /><br />
<script type="text/javascript">
//<![CDATA[
//تعریف متغیر اصلی آرایه و مقادیر به روش مختصر نویسی
var Domains = ["ir","com","net"];
//گرفتن خروجی از متغیرهای آرایه
document.write(Domains[0] + ' ' + Domains[1] + ' ' + Domains[2]);
//]]>
</script>
<hr />

استفاده از متد concat:<br /><br />
<script type="text/javascript">
//<![CDATA[
//تعریف متغیر اصلی آرایه و مقادیر
var user = ["user1","user2","user3"];
var admin = ["admin1","admin2","admin3"];
//استفاده از متد concat
var allusers = user.concat(admin);
//گرفتن خروجی
document.write(allusers);
//]]>
</script>
<hr />

استفاده از متد join:<br /><br />
<script type="text/javascript">
//<![CDATA[
//تعریف متغیر اصلی آرایه و مقادیر
var user = ["user1","user2","user3"];
//استفاده از متد join
user.join();
//گرفتن خروجی
document.write(user);
//]]>
</script>
<hr />

استفاده از متد pop:<br /><br />
<script type="text/javascript">
//<![CDATA[
//تعریف متغیر اصلی آرایه و مقادیر
var user = ["user1","user2","user3"];
//استفاده از متد pop
user.pop();
//گرفتن خروجی
document.write(user);
//]]>
</script>
<hr />

استفاده از متد push:<br /><br />
<script type="text/javascript">
//<![CDATA[
//تعریف متغیر اصلی آرایه و مقادیر
var user = ["user1","user2","user3"];
//استفاده از متد push
user.push("user4,user5");
//گرفتن خروجی
document.write(user);
//]]>
</script>
<hr />

استفاده از متد reverse:<br /><br />
<script type="text/javascript">
//<![CDATA[
//تعریف متغیر اصلی آرایه و مقادیر
var user = ["user1","user2","user3"];
//استفاده از متد reverse
user.reverse();
//گرفتن خروجی
document.write(user);
//]]>
</script>
<hr />

استفاده از متد shift:<br /><br />
<script type="text/javascript">
//<![CDATA[
//تعریف متغیر اصلی آرایه و مقادیر
var user = ["user1","user2","user3"];
//استفاده از متد shift
user.shift();
//گرفتن خروجی
document.write(user);
//]]>
</script>
<hr />

استفاده از متد slice:<br /><br />
<script type="text/javascript">
//<![CDATA[
//تعریف متغیر اصلی آرایه و مقادیر
var user = ["user1","user2","user3"];
//استفاده از متد slice
var someusers = user.slice(0,2);
//گرفتن خروجی
document.write(someusers);
//]]>
</script>
<hr />

استفاده از متد sort:<br /><br />
<script type="text/javascript">
//<![CDATA[
//تعریف متغیر اصلی آرایه و مقادیر
var user = ["user3","user1","user2"];
var num = ["1","8","6"];
//استفاده از متد sort
user.sort();
num.sort(function(a,b){return a-b});
//گرفتن خروجی
document.write(user) + document.write(' - ') + document.write(num);
//]]>
</script>
<hr />

استفاده از متد unshift:<br /><br />
<script type="text/javascript">
//<![CDATA[
//تعریف متغیر اصلی آرایه و مقادیر
var user = ["user1","user2","user3"];
//استفاده از متد unshift
user.unshift("user4","user5");
//گرفتن خروجی
document.write(user);
//]]>
</script>
</body>
</html>
 
بالا