چهارشنبه ۰۸ بهمن ۱۴۰۴

Wednesday, January 28, 2026 GMT +3:30

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

javascript-array

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

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


به زبان ساده آرایه (Array) در برنامه نویسی شکل خاصی از ساختمان داده (Data Structure) به صورت متغیر یا آبجکت است که خود شامل عناصر زیرمجموعه می شود و می توانیم با شماره ایندکس (Index) یا عنوان کلید (Key) به مقادیر (Value) آنها دسترسی داشته باشیم، در اصطلاح برنامه نویسی به هر عضو از آرایه عنصر یا Element، به موقعیت شمارش ترتیبی عناصر Index، به کلیدواژه ای که غیرخودکار تعیین می شود کلید (Key) و به مقادیر آرایه Value گفته می شود.
در شبیه سازی آرایه با زندگی روزمره می توانیم دفترچه تلفنی را در نظر بگیریم که تعدادی صفحه با شماره مشخص داشته و در هر صفحه اطلاعاتی وجود دارد (دفترچه تلفن را آرایه، هر صفحه را یک عضو یا عنصر، شماره صفحات را ایندکس یا کلید و اطلاعات هر صفحه را مقادیر عناصر آرایه حساب می کنیم)، هرچند مقایسه آرایه ها با دنیای واقعی خالی از اشکال نیست اما برای داشتن آشنایی اولیه و با اغماض می توان گفت که ساختار کلی آرایه ها در برنامه نویسی بی شباهت به این مثال نیست، در جاوا اسکریپت هر آرایه یک آبجکت (Array Object) با ساختاری به شکل نمونه زیر است:
<script>
var lang = new Array();
lang[0] = 'HTML';
lang[1] = 'CSS';
lang[2] = 'JavaScript'
alert(lang[2]);
</script>
در این ساختار عبارت lang نام آرایه، اعداد 0 تا 2 کلیدهای آرایه و عبارات HTML، CSS و JavaScript مقادیر کلیدها هستند که به صورت جفتی (Key, Value) تعریف شده اند، ساز و کار آبجکت آرایه (Array Object) به صورت ذاتی در مفسر جاوا اسکریپت وجود دارد اما برای به کارگیری آرایه ها در کدنویسی باید اصول و قواعد خاصی را در رابطه با شیوه نگارش (Syntax) آنها رعایت کنیم که در ادامه خواهیم گفت.
نکته 1: شی یا آبجکت (Object) اصطلاحی در برنامه نویسی شی گرا (Object Oriented) است که به متغیرها، توابع و... اطلاق می شود.
نکته 2: Index و Key دو مفهوم متفاوت هستند که هر دو برای استخراج Value از عناصر آرایه کاربرد دارند، Index زمانی استفاده می شود که شماره گذاری عناصر آرایه به صورت ترتیب عددی (از 0) و خودکار توسط مفسر انجام می شود، اما اصطلاح Key زمانی استفاده می شود که شماره یا برچسب گذاری توسط برنامه خارج از حالت پیش فرض و به صورت غیرخودکار تعریف شده باشد.

شیوه های تعریف آرایه در جاوا اسکریپت


برای تعریف آرایه در جاوا اسکریپت دو شیوه متفاوت وجود دارد که البته هر دو روش در نهایت نتیجه یکسانی داشته و آرایه های ایجاد شده از نظر فنی تفاوتی ندارند:
- استفاده از عبارت Array (به این عبارت در اصطلاح برنامه نویسی Constructor یا سازنده گفته می شود).
- استفاده از کاراکترهای [] (قلاب یا Square Bracket).
در هر دو شیوه یک متغیر کلی برای آرایه در نظر گرفته و سپس مقادیر زیر مجموعه آنها را (به صورت ایندکسی و خودکار یا با در نظر گرفتن کلید) به آرایه نسبت می دهیم، در ادامه این دو شیوه را به همراه مثال و نمونه کد بررسی می کنیم.

روش اول، تعریف آرایه با عبارت Array


در این روش ابتدا آرایه خالی را با دستور new Array به یک متغیر نسبت داده و سپس شماره کلیدها را در علامت های [] تعریف و مقادیر را با علامت = به آرایه اضافه می کنیم، به طور مثال:
<script>
//تعریف متغیر اصلی آرایه
var words = new Array();
//تعریف کلیدهای زیر مجموعه و مقادیر
words[0] = "آموزش";
words[1] = "جاوا";
words[2] = "اسکریپت";
//گرفتن خروجی از مقادیر کلیدهای آرایه
document.write(words[0] + ' ' + words[1] + ' ' + words[2]);
</script>
برای دیدن پیش نمایش آنلاین مثال ها لطفا به انتهای این مطلب رجوع کنید.
خروجی مثال بالا به شکل نمونه زیر خواهد بود:
آموزش جاوا اسکریپت
توضیح:
- ابتدا با دستور var (یا let و const) و عبارت دلخواه words متغیر کلی برای آرایه تعریف و مقادیر متغیر را با دستور new Array تکمیل کرده ایم، این دستور به مفسر تفهیم می کند که قصد ایجاد متغیری از نوع آرایه را داریم.
- بعد از اینکه متغیر آرایه را تعریف کردیم باید کلیدها و مقادیر زیر مجموعه را مشخص کنیم، در مثال بالا اعداد بین کاراکترهای [] کلید (Key) و رشته های متنی بعد از علامت = مقدار (Value) هستند.
- کلیدهای آرایه در جاوا اسکریپت الزاما باید عددی باشند و در نظر گرفتن مقادیر متنی برای عنوان کلیدها صحیح نیست (در واقع ایجاد آرایه با کلیدهای متنی یا Associative Array در جاوا اسکریپت ممکن نیست و در صورت نیاز باید با کاراکترهای {} یک آبجکت ثابت (Literal) ایجاد کنیم که مبحث جداگانه ای از آبجکت آرایه است، در ادامه در این خصوص توضیح خواهیم داد).
- اگر هیچ عددی برای کلیدهای آرایه در نظر نگیریم مفسر به صورت خودکار از 0 کلیدها را شماره گذاری می کند که در این حالت از اصطلاح ایندکس به جای کلید استفاده می کنیم، دقت کنیم در مورد آرایه ها شماره گذاری خودکار ایندکس همیشه از 0 شروع می شود نه 1 (در اصطلاح آرایه ها را Zero-based می گویند).
- هر مقدار در مثال بالا در واقع یک عنصر (Element) زیرمجموعه از آرایه اصلی ما است که شماره کلید (Key) یا ایندکس (Index) اختصاصی خود را دارد، برای دسترسی به مقدار (Value) هر کلید کافی است مشابه نمونه زیر آن را فراخوانی کنیم:
words[1]
با این دستور به مقدار کلید 1 آرایه دسترسی پیدا می کنیم (عبارت جاوا)، نحوه استفاده از کلیدها و مقادیر بسته به هدف ما در برنامه نویسی متفاوت خواهد بود و الزامی نیست که حتما مقادیر با دستورهایی مانند document.write به خروجی ارسال شوند، به فرض می توانند بعد از انجام فرایندی با مقادیر دیگری ترکیب یا تفریق شوند و خلاصه هر آنچه که در برنامه نویسی با یک متغیر معمول ممکن است در مورد عناصر آرایه نیز شدنی خواهد بود.
در روش تعریف آرایه با عبارت Array می توانیم از شیوه مختصرنویسی به شکل نمونه زیر نیز استفاده کنیم که نتیجه نهایی تفاوتی با حالت بالا نخواهد داشت:
<script>
//تعریف متغیر اصلی آرایه به همراه مقادیر
var words = new Array("آموزش", "جاوا", "اسکریپت");
//گرفتن خروجی از مقادیر ایندکس های آرایه
document.write(words[0] + ' ' + words[1] + ' ' + words[2]);
</script>
خروجی مثال بالا هم به شکل نمونه زیر خواهد بود:
آموزش جاوا اسکریپت
گفتیم که اگر برای کلیدها عددی در نظر نگیریم مفسر از 0 به صورت خودکار کلیدها را شماره گذاری می کند و در این حالت از عبارت ایندکس به جای کلید استفاده می کنیم.

روش دوم، تعریف آرایه با کاراکترهای قلاب []


استفاده از عبارت Array تنها راه ایجاد آرایه در جاوا اسکریپت نیست، علاوه بر این روش می توانیم با در نظر گرفتن مقادیر برای متغیر به صورت کاراکترهای قلاب [] به مفسر تفهیم کنیم که هدف ایجاد متغیری از نوع آرایه است، به طور مثال:
<script>
//تعریف متغیر اصلی آرایه
var domains = [];
//تعریف کلیدهای زیر مجموعه و مقادیر
domains[0] = "ir";
domains[1] = "com";
domains[2] = "net";
//گرفتن خروجی از مقادیر کلیدهای آرایه
document.write('Key 0: ' + domains[0] + '<br>Key 1: ' + domains[1] + '<br>Key 2: ' + domains[2]);
</script>
برای دیدن پیش نمایش آنلاین مثال ها لطفا به انتهای این مطلب رجوع کنید.
خروجی مثال بالا به شکل نمونه زیر خواهد بود:
Key 0: ir
Key 1: com
Key 2: net
توضیح:
- در اینجا نیازی نیست از عبارت new Array استفاده کنیم، در واقع زمانی که علامت های قلاب [] را برای تعریف متغیر به کار می بریم مفسر جاوا اسکریپت آن را به عنوان آبجکت آرایه شناسایی می کند.
- دسترسی به عناصر آرایه در هر دو روش مشابه است، به طور مثال اگر بخواهیم مقادیر کلید 0 را بررسی کنیم خواهیم نوشت:
if(domains[0] === "ir"){
    alert('Key 0, Value is: ' + domains[0]);
}
که نتیجه این بررسی به صورت زیر نمایش داده می شود:
Key 0, Value is: ir
مشابه روش new Array در حالت کاراکترهای قلاب [] نیز می توانیم کلیدها را به صورت مختصرنویسی تعریف کنیم، به طور مثال:
<script>
//تعریف متغیر اصلی آرایه و مقادیر
var domains = ["ir", "com", "net"];
//گرفتن خروجی از مقادیر ایندکس های آرایه
document.write('Index 0: ' + domains[0] + '<br>Index 1: ' + domains[1] + '<br>Index 2: ' + domains[2]);
</script>
خروجی مثال بالا به شکل نمونه زیر خواهد بود:
Index 0: ir
Index 1: com
Index 2: net
به جز تفاوت در شیوه شماره گذاری نتیجه نهایی در هر دو روش یکسان است.

تعریف آرایه های دو یا چندبعدی (Multidimensional)


تعریف و استفاده از آرایه ها در برنامه نویسی به موارد ساده ای که در بالا بررسی کریم ختم نمی شود و ممکن است به آرایه هایی با عناصر تو در تو و پیچیده تری نیاز باشد، خوشبختانه مانند بسیاری از زبان های برنامه نویسی این امکان در جاوا اسکریپت نیز وجود دارد که بتوانیم آرایه دو یا چندبُعدی (Multidimensional) در کدهایمان داشته باشیم، برای تعریف این شکل آرایه کافی است برای هر عضو مد نظر به روش new Array یا قلاب [] یک زیرمجموعه جدید تعریف کنیم، در واقع آرایه دو یا چندبعدی خود زیرمجموعه آرایه سطح بالاتر یا آرایه آرایه (Array of Array) است، به طور مثال:
<script>
//تعریف متغیر اصلی آرایه
var continent = new Array();
//تعریف کلیدهای زیر مجموعه و مقادیر
continent[0] = ["Iran", "Afghanistan", "Japan"];
continent[1] = ["France", "Germany", "Norway"];
continent[2] = ["Brazil", "USA", "Argentina"];
//گرفتن خروجی از مقادیر کلیدهای آرایه
document.write('Key 0, Index 0: ' + continent[0][0] + '<br> Key 1, Index 1: ' + continent[1][1] + '<br> Key 2, Index 2: ' + continent[2][2]);
</script>
برای دیدن پیش نمایش آنلاین مثال ها لطفا به انتهای این مطلب رجوع کنید.
خروجی مثال های بالا به شکل نمونه زیر خواهد بود:
Key 0, Index 0: Iran
Key 1, Index 1: Germany
Key 2, Index 2: Argentina
شماره گذاری خودکار عناصر زیرمجموعه آرایه نیز از ایندکس 0 شروع می شود.
استفاده از new Array برای آرایه های دو یا چندبعدی الزامی نیست، می توانیم به روش قلاب [] نیز متغیر را تعریف کنیم:
var continent = [];
با استفاده از قلاب های تو در تو و زیرمجموعه ی بیشتر می توانیم آرایه را به بیش از دو بعد گسترش دهیم، به طور مثال:
<script>
//تعریف متغیر اصلی آرایه
var continent = [];
//تعریف کلیدهای زیر مجموعه و مقادیر
continent[0] = [];
continent[0][0] = ["Iran", "Afghanistan", "Japan"];
continent[1] = [];
continent[1][0] = ["France", "Germany", "Norway"];
continent[2] = [];
continent[2][0] = ["Brazil", "USA", "Argentina"];
//گرفتن خروجی از مقادیر کلیدهای آرایه
document.write('Key 0,0, Index 0: ' + continent[0][0][0] + '<br> Key 1,0, Index 1: ' + continent[1][0][1] + '<br> Key 2,0, Index 2: ' + continent[2][0][2]);
</script>
خروجی مثال بالا به شکل نمونه زیر خواهد بود:
Key 0,0, Index 0: Iran
Key 1,0, Index 1: Germany
Key 2,0, Index 2: Argentina
دقت کنیم که در صورت نیاز به تعریف آرایه هایی با بیشتر از دو بعد، ابتدا آرایه سطح بالاتر باید به صورت متغیر تعریف شود تا خطای Undefined دریافت نکنیم.
مشابه آنچه در مورد آرایه های تک بعدی دیدیم در اینجا هم می توانیم از شیوه مختصرنویسی به همراه کاراکتر جداکننده کاما (,) برای تعریف آرایه های دو یا چندبعدی استفاده کنیم، مثال:
<script>
//تعریف متغیر اصلی آرایه
var continent = new Array();
//تعریف کلیدهای زیر مجموعه و مقادیر
continent[0] = new Array(["Iran", "Afghanistan", "Japan"], ["France", "Germany", "Norway"], ["Brazil", "USA", "Argentina"]);
//گرفتن خروجی از مقادیر کلیدهای آرایه
document.write('Key 0,0,0: ' + continent[0][0][0] + '<br> Key 0,1,1: ' + continent[0][1][1] + '<br> Key 0,2,2: ' + continent[0][2][2]);
</script>
یا
<script>
//تعریف متغیر اصلی آرایه
var continent = [];
//تعریف کلیدهای زیر مجموعه و مقادیر
continent[0] = [["Iran", "Afghanistan", "Japan"], ["France", "Germany", "Norway"], ["Brazil", "USA", "Argentina"]];
//گرفتن خروجی از مقادیر کلیدهای آرایه
document.write('Key 0,0,0: ' + continent[0][0][0] + '<br> Key 0,1,1: ' + continent[0][1][1] + '<br> Key 0,2,2: ' + continent[0][2][2]);
</script>
خروجی مثال های بالا به شکل نمونه زیر خواهد بود:
Key 0,0,0: Iran
Key 0,1,1: Germany
Key 0,2,2: Argentina
هر آرایه زیرمجموعه با کاراکتر کاما (,) از آرایه های دیگر جداسازی شده است.
نکته: جاوا اسکریپت به صورت ذاتی از آرایه هایی که کلیدهای آن رشته متنی باشد (Associative Array) پشتیبانی نمی کند، برای ایجاد این شکل آرایه باید از کاراکتر {} (آکولاد یا Curly Bracket) استفاده کنیم که در این حالت ماهیت متغیر از حالت آبجکت آرایه (Array Object) به آبجکت ثابت (Literal Object) تغییر می کند و اغلب متدهای متداول مربوط به کار با آرایه ها مستقیما در مورد آبجکت ثابت قابل استفاده نیست، در ادامه جهت آشنایی بیشتر این نوع آبجکت ها را نیز بررسی خواهیم کرد.

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


گفتیم که امکان ایجاد آرایه با کلیدهای متنی (Associative Array) به صورت ذاتی در جاوا اسکریپت وجود ندارد، به طور مثال کد زیر:
<script>
var array_1 = new Array('first' => 'Farvardin', 'second' => 'Ordibehesht', 'third' => 'Khordad');
alert(array_1['second']);
</script>
خطای
Uncaught SyntaxError: invalid arrow-function arguments
را در خروجی کنسول مرورگر چاپ می کند، اما اگر بخواهیم این سبک آبجکت در برنامه خود داشته باشیم چه راه حلی در دسترس است؟
راه حلی که در جاوا اسکریپت برای اینگونه موارد وجود دارد استفاده از آبجکت ثابت (Literal Object) است، آبجکت ثابت با استفاده از کاراکترهای {} (آکولاد یا Curly Bracket) تعریف و شامل داده های جفتی نام/مقدار است، به طور مثال:
<script>
var literal_1 = {first:'Farvardin', second:'Ordibehesht', third:'Khordad'};
alert(literal_1['second']);
</script>
خروجی نمونه کد بالا به صورت زیر خواهد بود:
Ordibehesht
هر آبجکت ثابت با کاراکتر { شروع و با کاراکتر } بسته می شود، عناصر زیرمجموعه آبجکت با کاراکتر کاما (,) از هم جدا می شوند، هر نام می تواند در یا خارج از کاراکترهای '' (Single Quotation) یا "" (Double Quotation) تعریف شود، مقادیر هم می توانند هر نوع آبجکتی (رشته متنی، آرایه، عدد، تابع، آبجکت ثابت و...) باشند، نام و مقدار با کاراکتر دونقطه (: یا Colon) جفت می شوند، یک مثال کمی پیچیده تر از نحوه تعریف و استفاده از آبجکت ثابت در جاوا اسکریپت:
<script>
var literal_1 = {first:'Farvardin', second:'Ordibehesht', third:'Khordad'};
var literal_2 = {
'name_1':literal_1,
'name_2':new Array(1, 2, 3),
'name_3':'Jalali Months'
};
alert(literal_2['name_1']['first'] + ' is ' + literal_2['name_2'][0] + ' in ' + literal_2['name_3']);
</script>
که خروجی نمونه کد بالا به شکل زیر خواهد بود:
Farvardin is 1 in Jalali Months
نکته جالب انعطاف پذیری جاوا اسکریپت در نحوه تعریف آبجکت های ثابت و دسترسی به عناصر آنها است.
در خصوص آبجکت های ثابت، نحوه تعریف، دسترسی و تغییر مقادیر آنها در آموزش های پیش رو به صورت جداگانه صحبت خواهیم کرد.

افزودن یا حذف عنصر آرایه در JavaScript


در مثال های بالا با نحوه دسترسی به عناصر آرایه به روش ایندکس (Index) و کلید (Key) آشنا شدیم، اما اگر بخواهیم یک عنصر را در مرحله دیگری از برنامه به آرایه اضافه یا برعکس اگر بخواهیم عنصری را از آرایه حذف کنیم چاره چیست؟
در اغلب زبان های برنامه نویسی برای اینگونه موارد توابع اختصاصی جداگانه ای تعریف می شود و ما هم در ادامه این سری از آموزش ها متدهای کار با آرایه در JavaScript را بررسی خواهیم کرد منتها حذف و اضافه ساده نیازی به استفاده از متد اختصاصی ندارد و به صورت زیر انجام می شود.
برای افزودن یک عنصر به آرایه بعد از مرحله تعریف کافی است از روش نمونه زیر پیروی کنیم:
<script>
var numbers = new Array(100, 200, 300, 400);
numbers[4] = 500;
alert(numbers);
</script>
خروجی مثال بالا به صورت زیر خواهد بود:
100,200,300,400,500
در برخی زبان های برنامه نویسی مانند PHP اگر کلید عضو جدید را تعریف نکنیم خود مفسر به صورت پیش فرض آخرین کلید را جایگزین می کند اما در جاوا اسکریپت در نظر گرفتن کلید برای افزودن عنصر به آرایه در روش قلاب الزامی است که در نمونه کد بالا عدد 4 به عنوان کلید در نظر گرفته شده است.
برای حذف عناصر آرایه نیز متدهایی مانند pop، shift، splice و filter کاربرد دارند که در این رابطه در آموزش بعدی مفصل صحبت خواهیم کرد، اما ساده ترین روش حذف عنصر از آرایه استفاده از دستور عمومی delete است، به طور مثال:
<script>
var numbers = new Array(100, 200, 300, 400);
delete(numbers[2]);
alert(numbers);
</script>
خروجی نمونه کد بالا به صورت زیر خواهد بود:
100,200,,400
با دقت در خروجی کد مشخص است که دستور delete طول آرایه را تغییر نمی دهد و صرفا مقادیر ایندکس/کلید مورد نظر را حذف می کند.

استفاده از حلقه forEach در آرایه


در آموزش های قبلی با حلقه های for و while در جاوا اسکریپت آشنا شدیم و گفتیم که شکل سوم حلقه ها یعنی forEach در خصوص آرایه ها کاربرد دارد، حلقه forEach مورد به مورد عناصر آرایه را از فیلتر تابع بازگشتی (Callback) عبور می دهد، این تابع بازگشتی به سه صورت زیر قابل تعریف است:
forEach((element, index, array) => {});
forEach(myFunction, this);
forEach(function myFunction(element, index, array) {}, this);
در این ساختارها element آرگیومنتی است که مقادیر (Value) هر عضو آرایه را در خود دارد، index شامل شماره موقعیت عناصر (شمارش خودکار و از 0) یا کلید (Key) و array آرایه فعلی است که در حلقه forEach قرار گرفته است، از بین این آرگیومنت ها وجود element اجباری و سایر موارد اختیاری (Optional) هستند، مثالی از کاربرد حلقه forEach در JavaScript:
<script>
var array_1 = ['JS', 'PHP', 'MySQL'];
array_1.forEach((element, index, array) => {alert('Index ' + index + ' value is: '  + element)});
</script>
خروجی:
Index 0 value is: JS
Index 1 value is: PHP
Index 2 value is: MySQL
به این شکل توابع مبتنی بر کاراکتر دستوری <= در اصطلاح تابع پیکان یا Arrow Function گفته می شود، مثالی از کاربرد تابع بازگشتی خارجی در حلقه forEach:
<script>
var array_1 = ['JS', 'PHP', 'MySQL', [20, 14, 33]];
var str = '';
var all = 0;
var loop = 1;
function myFunction(element, index, array){
    if(!Array.isArray(element)){
        str += element;
        
        if((loop + 1) < array.length){
            str += '&';
        }
    } else {
        element.forEach((value) => {all += value;});
    }
    
    if(loop === array.length){
        alert(str + ' = ' + all);
    }
    
    loop++;
}
array_1.forEach(myFunction);
</script>
نمونه کد بالا خروجی زیر را در مرورگر نمایش می دهد:
JS&PHP&MySQL = 67
با دقت در ساختار کدها مشخص است که از حلقه forEach تو در تو برای بررسی مقادیر ایندکس چهارم آرایه array_1 استفاده کرده ایم، این عنصر به صورت آرایه زیرمجموعه درون آرایه اصلی تعریف شده است.
همان طور که از خروجی حلقه ها مشخص است با forEach به راحتی می توانیم کلیدها و مقادیر آرایه مورد نظر را مورد به مورد بررسی یا ویرایش کنیم.
در خصوص متدهای Array.isArray و length در ادامه مباحث آموزش مقدماتی جاوا اسکریپت مفصل توضیح خواهیم داد، در اینجا همین قدر بدانیم که Array.isArray آرایه بودن یا نبودن پارامتر تنظیم شده را بررسی و true یا false برمی گرداند، length هم تعداد عناصر زیرمجموعه سطح یک را به عنوان طول آرایه شمارش می کند.

مثال و پیش نمایش آنلاین


در نمونه کدهای زیر تقریبا برای تمام موارد گفته شده در خصوص آرایه ها می توانیم مثال به همراه پیش نمایش آنلاین آن را بررسی کنیم:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | آرایه ها در جاوا اسکریپت</title>
<!-- Webgoo.ir -->
<style>
body{
    font-family: Tahoma, Geneva, sans-serif;
    direction: rtl;
    font-size: 12px;
}
</style>
</head>
<body>
<noscript>
جاوا اسکریپت در مرورگر شما غیر فعال است!<br>
</noscript>

تعریف آرایه با عبارت new Array:<br><br>
<script>
//تعریف متغیر اصلی آرایه
var words = new Array();
//تعریف کلیدهای زیر مجموعه و مقادیر
words[0] = "آموزش";
words[1] = "جاوا";
words[2] = "اسکریپت";
//گرفتن خروجی از مقادیر کلیدهای آرایه
document.write(words[0] + ' ' + words[1] + ' ' + words[2]);
</script>
<hr>
تعریف آرایه بالا به روش مختصرنویسی:<br><br>
<script>
//تعریف متغیر اصلی آرایه به همراه مقادیر
var words = new Array("آموزش", "جاوا", "اسکریپت");
//گرفتن خروجی از مقادیر ایندکس های آرایه
document.write(words[0] + ' ' + words[1] + ' ' + words[2]);
</script>
<hr>
تعریف آرایه با کاراکتر قلاب []:<br><br>
<script>
//تعریف متغیر اصلی آرایه
var domains = [];
//تعریف کلیدهای زیر مجموعه و مقادیر
domains[0] = "ir";
domains[1] = "com";
domains[2] = "net";
//گرفتن خروجی از مقادیر کلیدهای آرایه
document.write('Key 0: ' + domains[0] + '<br>Key 1: ' + domains[1] + '<br>Key 2: ' + domains[2]);
</script>
<hr>
تعریف آرایه بالا به روش مختصرنویسی:<br><br>
<script>
//تعریف متغیر اصلی آرایه و مقادیر
var domains = ["ir", "com", "net"];
//گرفتن خروجی از مقادیر ایندکس های آرایه
document.write('Index 0: ' + domains[0] + '<br>Index 1: ' + domains[1] + '<br>Index 2: ' + domains[2]);
</script>
<hr>
تعریف آرایه دو بعدی:<br><br>
<script>
//تعریف متغیر اصلی آرایه
var continent = new Array();
//تعریف کلیدهای زیر مجموعه و مقادیر
continent[0] = ["Iran", "Afghanistan", "Japan"];
continent[1] = ["France", "Germany", "Norway"];
continent[2] = ["Brazil", "USA", "Argentina"];
//گرفتن خروجی از مقادیر کلیدهای آرایه
document.write('Key 0,0: ' + continent[0][0] + '<br> Key 1,1: ' + continent[1][1] + '<br> Key 2,2: ' + continent[2][2]);
</script>
<hr>
تعریف آرایه چندبعدی:<br><br>
<script>
//تعریف متغیر اصلی آرایه
var continent = [];
//تعریف کلیدهای زیر مجموعه و مقادیر
continent[0] = [];
continent[0][0] = ["Iran", "Afghanistan", "Japan"];
continent[1] = [];
continent[1][0] = ["France", "Germany", "Norway"];
continent[2] = [];
continent[2][0] = ["Brazil", "USA", "Argentina"];
//گرفتن خروجی از مقادیر کلیدهای آرایه
document.write('Key 0,0,0: ' + continent[0][0][0] + '<br> Key 1,0,1: ' + continent[1][0][1] + '<br> Key 2,0,2: ' + continent[2][0][2]);
</script>
<hr>
تعریف آرایه با کلیدهای متنی:<br><br>
<script>
var literal_1 = {first:'Farvardin', second:'Ordibehesht', third:'Khordad'};
var literal_2 = {
'name_1':literal_1,
'name_2':new Array(1, 2, 3),
'name_3':'Jalali Months'
};
document.write(literal_2['name_1']['first'] + ' is ' + literal_2['name_2'][0] + ' in ' + literal_2['name_3']);
</script>
<hr>
استفاده از حلقه forEach در جاوا اسکریپت:<br><br>
<script>
var array_1 = ['JS', 'PHP', 'MySQL', [20, 14, 33]];
var str = '';
var all = 0;
var loop = 1;
function myFunction(element, index, array){
    if(!Array.isArray(element)){
        str += element;
        
        if((loop + 1) < array.length){
            str += '&';
        }
    } else {
        element.forEach((value) => {all += value;});
    }
    
    if(loop === array.length){
        document.write(str + ' = ' + all);
    }
    
    loop++;
}
array_1.forEach(myFunction);
</script>
</body>
</html>
پیش نمایش آنلاین
در آموزش پیش رو در خصوص متدهای پرکاربرد کار با آرایه در جاوا اسکریپت صحبت خواهیم کرد.
دسته بندی: آموزش مقدماتی » JavaScript
related مطالب بیشتر:
کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)
شروعی بر برنامه نویسی جاوا اسکریپت (JavaScript)
عملگرها (Operators) در جاوا اسکریپت (JavaScript)
متدهای کار با آرایه در جاوا اسکریپت (JavaScript)
رویدادها (Events) در جاوا اسکریپت (JavaScript)
دیدگاه
more ۴۰ دیدگاه برای این مطلب ارسال شده است.
more چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.
مسعود
۱۱:۲۷ ۱۳۹۶/۰۶/۱۴
عرض سلام و خسته نباشید این کد داخل مرورگر امتحان کردم عالی بود اما متاسفانه برنامه ای که از آن استفاده میکنم امکان ذخیره در کوکی ندارد و بصورت آفلاین عمل میکند آیا امکان ذخیره اعداد در آرایه دوم بجای کوکی وجود دارد؟ و اینکه میتوان دستور خروجی از document write استفاده کرد. سپاس از توجه شما
کارکرد کوکی به این است که در فراخوانی مجدد صفحه می توان اطلاعات ذخیره شده قبلی را دریافت کرد، اگر برنامه شما امکان ذخیره سازی فایل یا محتوا در دیتابیس را داشته باشد می توانید کار کوکی را به شکل دیگری شبیه سازی کنید، در مورد متد document.write نیز بستگی به پشتیبانی برنامه شما دارد، در حالت معمول و در مرورگرها مشکلی برای استفاده از این متد نیست.
مسعود
۰۸:۱۲ ۱۳۹۶/۰۵/۲۵
سلام تشکر یابت آموزش عالی شما این کدی که ارایه کردین خیلی خوب بود ولی منظور من نشان دادن فقط یک عدد تصادفی باشه نمیخوام همه با هم نشون داده بشن. یعنی هر بار صفحه نشون داده شد یک عدد دیده بشه که در مرحله قبل دیده نشده است. سپاسگزارم از توجه شما
نوشتن این کد پیچیدگی های خاص خود را دارد، از جمله اینکه در وب باید برای نگهداری موقت اطلاعات در مرورگر از کوکی در جاوا اسکریپت استفاده کنیم، مانند نمونه زیر:
<script>
function randomNumbers() {
var array = [1,2,3,4,5,6,7,8,9];
var i = array.length, j = 0, temp;

while(i--) {
j = Math.floor(Math.random() * i);
temp = array[i];
array[i] = array[j];
array[j] = temp;
}

return array;
}

function createCookie(name, value, days) {
var expires = '';

if(days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 *1000));
expires = '; expires=' + date.toUTCString();
}

document.cookie = name + '=' + value + expires + '; path=/';
}

function readCookie(name) {
var nameEQ = name + '=';
var ca = document.cookie.split(';');

for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while(c.charAt(0) == ' ') {
c = c.substring(1, c.length);
if(c.indexOf(nameEQ) == 0) {
var result = c.substring(nameEQ.length, c.length);

if(result == ''){
return null;
}

return result;
}
}
}

return null;
}

function eraseCookie(name) {
createCookie(name, '', -1);
}

window.onload = function(){
var rand_nums, result;

if(readCookie('my_rand_num') == null) {
rand_nums = randomNumbers();
} else {
rand_nums = readCookie('my_rand_num').split(',');
}

result = rand_nums[Math.floor(Math.random() * rand_nums.length)];

for(var key in rand_nums) {
if(rand_nums[key] == result) {
rand_nums.splice(key, 1);
}
}

createCookie('my_rand_num', rand_nums, 1);

document.getElementById('result').innerHTML = result;
}
</script>
<div id="result"></div>
ساختار این کد تقریبا ساده است، ابتدا کل اعداد تصادفی در یک آرایه ذخیره و در اولین فراخوانی یک مقدار به خروجی ارسال می شود، سایر اعداد در کوکی نگهداری می شوند، در فراخوانی های بعدی یک مقدار دیگر این بار از کوکی گرفته می شود و آن مقدار پس از نمایش از محتوای فعلی کوکی حذف می شود، همین روند تا جایی ادامه پیدا می کند که کوکی دیگر محتوایی برای نمایش نداشته باشد، در این وضعیت مجددا کوکی جدید با اعداد تصادفی جدید ایجاد می شود...
masoud
۰۹:۵۰ ۱۳۹۶/۰۵/۲۳
سلام لطفا منو راهنمایی کنید. کد تولید اعداد تصادفی بدون تکرار با جاوا اسکریپت نیاز دارم در محدوده دو عدد مشخص مثلا یک تا نه
برای ایجاد اعداد تصادفی بدون تکرار با جاوا اسکریپت می توانید از نمونه کد زیر استفاده کنید:
<script>
function randomNumbers() {
var array = [1,2,3,4,5,6,7,8,9];
var i = array.length, j = 0, temp;

while(i--) {
j = Math.floor(Math.random() * i);
temp = array[i];
array[i] = array[j];
array[j] = temp;
}

return array;
}

window.onload = function(){
var rand_nums = randomNumbers();
var result = '';

for(var i = 0; i < rand_nums.length; i++){
result += rand_nums[i] + '<br>';
}

document.getElementById('result').innerHTML = result;
}
</script>
<div id="result"></div>
محسن
۱۵:۴۸ ۱۳۹۵/۱۲/۱۲
سلام
یک آرایه چند بعدی داشتم مثل این
var blue=[[24,33,42,250],[29,42],[42,39,54,43]];
میخواستم مقدار مثلا 29 و 42 رو جمع بزنم جای این دو مقدار مقدار جمعشون رو بنویسم
خودم یه تابع نوشتم نمیدونم چجوری این حرکتو تو تابع خودم پیاده سازیش کنم تابع خودم برای جمع هر عدد با خودش شده
<script type="text/javascript">
var blue=[[24,33,42,250],[29,42],[42,39,54,43]];
function arraySum(arr) {
var i, j, sum=0;
for (i = 0; i < arr.length; i++) {
document.write("<div class='row'>");
for (j = 0; j < arr[i].length; j++) {
sum += parseInt(arr[i][j]);
}
document.write("<span class='eli'>" + sum + "</span>");
sum = 0;
document.write("</div>");
}
}
arraySum(blue);
</script>
ممنون میشم راهنمایی کنین
کد مطابق با توضیحات شما ویرایش و اصلاح شد!
شیوا
۲۰:۴۷ ۱۳۹۴/۱۰/۲۳
سلام
ببخشید من میخوام یه آرایه دوبعدی ایجاد کنم توی جاوا اسکریپت و توی یه بعد آرایه سوالا و بعد دیگه جوابای سوالا رو بریزم. میشه کمکم کنید؟ لطفا
در جاوا اسکریپت نمی توانید برای کلیدها مقادیر غیر عددی در نظر بگیرید، البته نمی دانیم دقیقا هدفتان چیست، اما می توانید به جای این روش، از حالت آبجکت شبیه نمونه زیر استفاده کنید:
<script>
var object = {};
object['question'] = ["Name", "Age"];
object['answer'] = ["Ali", "20"];
alert(object.question[0]);
alert(object.answer[0]);
</script>
rezi
۱۲:۴۴ ۱۳۹۴/۰۸/۲۸
با سلام
من اطلاعات داده را از پایگاه داده می خوانم و به فرمت JSON به جاوا اسکریپت تحویل میدهم. اگر با استفاده از دستور document.getElementById بخونم مشکلی نیست ولی اگر بخواهم اطلاعات وارده را که به صورت آرایه است را به تابعی ارسال کنم قبول نمی کند و کار نمی کند.
اگر بخواهم این آرایه را به تابعی در جاوا اسکریپت انتقال دهم باید چه کار کنم
با تشکر
انتقال آرایه به تابع به صورت آرگیومنت به خودی خود امری متداول است، منتها به نظر، شما آرایه را به عنوان رشته می خواهید استفاده کنید که در این صورت باید شماره کلید مورد نظر را تنظیم کنید تا مقدار آن دریافت شود، به فرض:
myArray[0]
علی
۱۴:۰۹ ۱۳۹۴/۰۸/۱۶
ممنون در این صفحه که شما گذاشتید فقط گفته برای مرتب سازی نامبر از تابع مقایسه ای استفاده می کنه منظور من این نبود منظورم این بود که از کدوم الگوریتم مرتب سازی استفاده می کنه و اینکه به مرورگرها هم بستگی داره یا نه ؟
اطلاع دقیقی در این خصوص نداریم، الگوریتم نویسی در این سطح اغلب در تولید نرم افزارها (مرورگرها) به کار می رود و شامل مباحث پیچیده و زمانبر است که برای کاربردهای عادی چندان ضرورتی ندارد، صرفا در حد اطلاعات اولیه برخی از متدها بین مرورگرهای مختلف (خانواده موزیلا، گوگل کروم و...) از الگوریتم های متفاوتی استفاده می کنند، اما هرچه که به جلو می رویم، نتیجه این الگوریتم ها به حالت استاندارد و مشابهت، نزدیک تر می شود.
علی
۱۹:۱۳ ۱۳۹۴/۰۸/۱۴
سلام : خسته نباشید
جاوااسکریپت چطوری تابع sort رو پیاده سازی کرده .
برای این منظور متد sort به همراه تابع برگشتی استفاده می شود:
http://www.w3schools.com/jsref/jsref_sort.asp

http://www.javascriptkit.com/javatutors/arraysort2.shtml
علی
۲۰:۰۹ ۱۳۹۴/۰۷/۲۷
سلام :
ایا امکان تعریف آرایه های دوبعدی یا بیشتر هم در جاوااسکریپت وجود داره .
بله، البته آرایه بیشتر از دوبعدی معمولا کاربرد چندانی ندارد، مثال:
<script>
//2d array
var my_2d_array = new Array();
my_2d_array[0] = new Array("Hello! (2d)", "Hi! (2d)");
alert(my_2d_array[0][0]);
//3d array
var my_3d_array = new Array();
my_3d_array[0] = new Array();
my_3d_array[0][0] = new Array("Hello! (3d)", "Hi! (3d)");
alert(my_3d_array[0][0][1]);
</script>
۰۱:۴۵ ۱۳۹۳/۱۱/۱۰
سلام و خسته نباشید.
می خواستم بدونم نمیشه با همین آرایه ها یک حرف از یک کلمه یا رشته رو حذف کرد؟ یعنی کاری که دکمۀ 'Back Space' روی کیبورد انجام میده رو با تعریف یک Button و به کمک جاوا اسکریپت روی صفحه آورد. (مثل کیبورد مجازی بانک ها که دکمۀ BackSpace رو دارند) اگر به این روش نه ولی با جاوا اسکریپت امکان پذیر است، خواهش میکنم راهنمایی کنید.
ممون از سایت خوبتون
برای شبیه سازی دکمه BackSpace با جاوا اسکریپت می توانید از تابع زیر استفاده کنید:
<script>
function backspaceAtCursor(id){
var field = document.getElementById(id);
if(field.selectionStart){
var startPos = field.selectionStart;
var endPos = field.selectionEnd;
if(field.selectionStart == field.selectionEnd){
field.value = field.value.substring(0, startPos - 1) + field.value.substring(endPos, field.value.length);
field.focus();
field.setSelectionRange(startPos - 1, startPos - 1);
}
else{
field.value = field.value.substring(0, startPos) + field.value.substring(endPos, field.value.length);
field.focus();
field.setSelectionRange(startPos, startPos);
}
}
}
</script>
<input type="text" id="test"><br>
<input type="button" value="BackSpace!" onclick="backspaceAtCursor('test');">
سارا
۱۶:۱۳ ۱۳۹۳/۰۷/۱۷
سلام
من آرایه ای لازم دارم که index آن از 1 شروع شود.
لطف کنید و نحوه تعریف حدود آرایه را بگویید.
متشکرم.
اگر منظورتان این است که key از 1 شروع شود و 0 نداشته باشیم، چنین کاری شدنی نیست! البته این کار ضرورتی هم نخواهد داشت، چون هر هدفی که داشته باشید می توانید مقدار 0 را خالی بگذارید، یا عدد 1 را به آن در محاسبات اضافه کنید و ... لذا مشکلی پیش نمی آید.
خودمم
۱۴:۴۹ ۱۳۹۳/۰۳/۰۱
از راهنماییتون ممنونم
نکته ریزی بود ولی مهم
خودمم
۲۳:۴۱ ۱۳۹۳/۰۲/۳۱
سلام خسته نباشید
میخوام اعداد 2 رقمی را با 5 رنگ مشخص به صورت ترتیبی نمایش بده
اینو نوشتم ولی جواب نمیده نمیدونم کجاش اشتباهه
لطفا راهنماییم کنید
<script language="javascript">
var y=0,i=0;

a=new Array(5);

a[i]="blue";
i++;
a[i]="yellow";
i++;
a[i]="red";
i++;
a[i]="brown";
i++;
a[i]="purple";

for(b=10;b<=20;b++)
{
document.write("<font size="10" color='"+a[i]+"'>"+b+"</font>");
i--;
if(i<y)i=4;
}
</script>
خط زیر را اصلاح کنید:
 document.write("<font size=\"10\" color='" + a[i] + "'>" + b + "</font>");
محمد
۰۹:۰۰ ۱۳۹۲/۱۱/۰۶
سلام. با استفاده از آرایه ها می خواهم یک لیست از 20 نفر از دانشجویان تهیه کنم که با کلیک روی هر کدام مشخصاتی نظیر کد تحصیلی نمایش داده شود. ممنون می شوم در این زمینه کمکی کنید.
لطفا از طرح سوالات کلی خودداری کنید!
قاعدتا باید بخشی از کدنویسی کار را خودتان بنویسید و در هر قسمت که دچار مشکل باشید کمک بخواهید، نه اینکه کل کد را برایتان بنویسیم!
نکته: به نظر نیاز به برنامه نویسی سمت سرور (مانند PHP دارید).
سعید
۰۳:۱۶ ۱۳۹۲/۱۱/۰۳
سلام
امکانش هست که در جاوا اسکریپت اندیس ارایه رو هم به صورت دلخواه مقدار دهی کنیم
مثل پی اچ پی ؟
اگر امکان دارد لطفا توضیح دهید
در ضمن کارتون عالیه لطفا مطالب بیشتری بگذارید درسته کار سختیه که شش زبان برنامه نویسی رو همزمان اموزش دادن ولی این رو فراموش نکنین که سایت شما یه مرجع خوب برای اموزش برای مبتدی ها شده (یعنی کسایی که از صفر شروع میکنن)
بهترین کار برای رونق بیشتر جذب نویسنده است
موفق باشید
در مورد سوال:
بله، به راحتی می توانید این کار انجام دهید، مثال:
<script>
var myArray = new Array();
myArray["key"] = "آموزش";
alert(myArray["key"]);
</script>
در مورد جذب نویسنده، در آینده نزدیک و با ارائه نسخه جدید سایت، این امکان نیز تعریف خواهد شد.
more لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.



 refresh
10 × 10
1 × 5
20 × 20
=