یکشنبه ۰۳ مرداد ۱۴۰۰

Sunday, July 25, 2021 GMT +4: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 مطالب بیشتر:
» کار با پنجره Pop-up در جاوا اسکریپت (JavaScript)
» تعریف و استفاده از متغیر (Variable) در جاوا اسکریپت (JavaScript)
» کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)
» کار با تاریخ و زمان در جاوا اسکریپت (JavaScript)
» توابع (Functions) در جاوا اسکریپت (JavaScript)
commentنظرات (۳۷ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: سيد رسول
۱۵:۵۲ ۱۳۹۱/۰۳/۲۳
سلام
من يه مشكلي دارم كه اميدوارم با كمك شما حل بشه. ميخوام بالاي وبلاگم عنوان ده پست آخرم بصورت چرخان نشون داده بشه. البته فعلا اينو گذاشتم (مي تونيد اينجا ببينيدش rashooda.blogfa.com) ولي ميخوام بين هر عنوان يه مكث كوتاه (مثلا دو ثانيه) وجود داشته باشه. البته كداشو از يه سايت خارجي گير آوردم. فقط مشكلي كه دارم اينه نمي تونم به اون آرايه اي كه مسئول نشون دادن عنوان هاست بفهمونم كه بايد ده عنوان آخرو نشون بده. با اين كدي كه گذاشتم (البته براي شما فقط كد قسمت آرايه شو گذاشتم) اولين عنوان آخرين پستمه ولي عنوان هاي بعدي همش يكيه، براي مشاهده لطفا اينجا رو ببينيد:
fortestcode.blogfa.com
خواهش ميكنم كمكم كنيد و هرچه زودتر بهم جواب بديد. ممنون از لطفتون
پاسخ: 
سلام
مشکل شما بررسی شد، اسکریپت مشکلی نداشت، مواردی اضافه و غیر ضروری بود، در این لینک کد شما اصلاح شده است:
نمایش آخرین مطالب در وبلاگ
انجام این کار در سیستم بلاگفا به چند گام نیاز دارد، اول اینکه باید آخرین مطالب را در یک بلاک با آی دی مشخص خروجی بگیرید، سپس مقادیر داخل آن بلاک را با document.getElementById و innerHTML دریافت کنید و به کمک split آنها را تجزیه و تبدیل به آرایه کنید و از آرایه ها در کد خود استفاده نمایید. در لینک بالا این کار انجام شده است.
نویسنده: سيد رسول
۱۲:۴۹ ۱۳۹۱/۰۳/۲۴
مرسي داداش حل شد.
واقعا ممنونتم ، خدا خيرت بده.
پاسخ: 
خواهش می کنیم. خوشحالیم که مشکل حل شد.
نویسنده: محمدرضا
۲۱:۰۲ ۱۳۹۱/۰۸/۲۳
سلام یک آرایه از نوع رشته تعریف کردم وقتی مقادیر رو از کاربر می خواهم بگیرم با فاصله ی بین کلمات مثل اینتر برخورد می کنه و به سطر بعدی اختصاص میده برای حل مشکل چه کار کنم؟ ممنون.
پاسخ: 
سلام
با این شیوه سوال پرسیدن کمکی نمی توان کرد، لطفا نمونه کدی قرار دهید و مشکلتان را با جزئیات مطرح کنید.
نویسنده: asdf
۱۹:۱۴ ۱۳۹۱/۰۸/۲۸
گنده این مثالتون
پاسخ: 
آرایه و تمام متدهای آن در جاوا اسکریپت با مثال و پیش نمایش آنلاین و با توضیح ارائه شده، لطفا کمی هم شما وقت بگذارید و مطالعه بفرمائید!
نویسنده: جواد
۲۳:۰۸ ۱۳۹۱/۱۰/۲۶
من می خوام یه آرایه 9*9 در جاوا اسکریپت تعریف کنم و به همه عناصر آرایه مقدار صفر رو بدم، اگه ممکنه راهنمایی کنید.
پاسخ: 
لطفا منظورتان را دقیق تر توضیح دهید و سعی کنید بخشی از کد را خودتان بنویسید تا بتوانیم برای رفع اشکال آن راهنمایی کنیم، ضمن اینکه آرایه 9*9 معنی خاصی ندارد!
نویسنده: سارا
۲۱:۱۶ ۱۳۹۱/۱۲/۲۶
سلام. خسته نباشید. من می خواهم یک ماتریس در جاوا اسکریپت بسازم و بعد مقادیر داخل ماتریس رو با هم جمع کنم. میشه کمک کنید؟
پاسخ: 
سلام
می توانید از نمونه کد زیر استفاده کنید.
<script type="text/javascript">
var m = [[5, 2, 3], [4, 7, 1], [8, 5, 9]];
alert(m[0][1] + m[1][1])//2 + 7;
</script>
نویسنده: سميه
۲۲:۲۴ ۱۳۹۱/۱۲/۲۶
با سلام
اين صورت سوالي كه مي خوام انجامش بدم .
تعدادي از اشعار حافظ در يك ارايه اي از رشته ذخيره بكنم و در فرم صفحه اچ تي ام ال يك دكمه قرار بدم با زدن دكمه يك عدد تصادفي توليد شود و بر حسب ان عدد تصادفي عنصر ان ارايه را نمايش دهد حالا مشكل اول (نمي تونم اشعار فارسي بنويسم) دوم (چگونه با اون عدد تصادفي ايجاد شده به عنصر ارايه دسترسي پيدا كنم)
<head>
<title>fall hafz</title>
</head>
<body>
<script type="text/javascript">
var myArray = new Array();
myArray[0] = "aaaaaaaaa";
myArray[1] = "jjjjjjjjjjj";
myArray[2] = "eeeeeeeeeeeee";
document.write(myArray[randome (1,3)] );
//اينجوري نوشتم اما جواب نگرفتم
</script>
</body>
</html>
پاسخ: 
سلام
از این کد استفاده کنید.
<script type="text/javascript">
var myArray = new Array();
myArray[0] = "aaaaaaaaa";
myArray[1] = "jjjjjjjjjjj";
myArray[2] = "eeeeeeeeeeeee";
var rand = Math.floor(Math.random() * 3) + 0;
document.write(myArray[rand]); alert(rand);
</script>
نویسنده: فرزانه
۱۴:۲۵ ۱۳۹۲/۰۱/۲۸
آرایه را به نحو دلخواه مقداردهی اولیه نماید، سپس این دو آرایه را در یک آرایه ی جدید به هم بچسباند و مقادیر آرایه ی سوم را روی صفحه چاپ کند البته با متد concat
خواهش میکنم کمک کنییییدددد
پاسخ: 
نمونه کد این سوال در آموزش وجود دارد، جهت یادآوری:
<script type="text/javascript">
var array_1 = new Array("PHP", "JavaScript", "Ajax");
var array_2 = new Array("MySQL", "Java", "HTML");
var result = array_1.concat(array_2);
document.write(result);
</script>
نویسنده: خلیل
۰۴:۱۶ ۱۳۹۲/۰۷/۲۷
ممنون
نویسنده: مرضیه
۲۱:۳۴ ۱۳۹۲/۱۰/۰۶
سلام. من ارایه ای از کتاب ها تعریف کردم. که با یک انتخاب یک عنوان از combox کتاب های مربوط به ان توسط ارایه ها چاپ بشه اما با انتخاب دوباره عنوان، کتاب های قبلی پاک نمیشه و زیر قبلی ها می اید. ایا باید از متد استفاده کرد؟ چه متدی؟ باتشکر
پاسخ: 
سلام
هر چند نمونه کدی درج نکرده اید و مشخص نیست از چه روشی برای "چاپ" موارد استفاده کرده اید، اما متدی مانند innerHTML می تواند حلال مشکل شما باشد.
نویسنده: سعید
۰۳:۱۶ ۱۳۹۲/۱۱/۰۳
سلام
امکانش هست که در جاوا اسکریپت اندیس ارایه رو هم به صورت دلخواه مقدار دهی کنیم
مثل پی اچ پی ؟
اگر امکان دارد لطفا توضیح دهید
در ضمن کارتون عالیه لطفا مطالب بیشتری بگذارید درسته کار سختیه که شش زبان برنامه نویسی رو همزمان اموزش دادن ولی این رو فراموش نکنین که سایت شما یه مرجع خوب برای اموزش برای مبتدی ها شده (یعنی کسایی که از صفر شروع میکنن)
بهترین کار برای رونق بیشتر جذب نویسنده است
موفق باشید
پاسخ: 
سلام
در مورد سوال:
بله، به راحتی می توانید این کار انجام دهید، مثال:
<script type="text/javascript">
var myArray = new Array();
myArray["key"] = "آموزش";
alert(myArray["key"]);
</script>
در مورد جذب نویسنده، در آینده نزدیک و با ارائه نسخه جدید سایت، این امکان نیز تعریف خواهد شد.
نویسنده: محمد
۰۹:۰۰ ۱۳۹۲/۱۱/۰۶
سلام. با استفاده از آرایه ها می خواهم یک لیست از 20 نفر از دانشجویان تهیه کنم که با کلیک روی هر کدام مشخصاتی نظیر کد تحصیلی نمایش داده شود. ممنون می شوم در این زمینه کمکی کنید.
پاسخ: 
سلام
لطفا از طرح سوالات کلی خودداری کنید!
قاعدتا باید بخشی از کدنویسی کار را خودتان بنویسید و در هر قسمت که دچار مشکل باشید کمک بخواهید، نه اینکه کل کد را برایتان بنویسیم!
نکته: به نظر نیاز به برنامه نویسی سمت سرور (مانند PHP دارید).
نویسنده: خودمم
۲۳:۴۱ ۱۳۹۳/۰۲/۳۱
سلام خسته نباشید
میخوام اعداد 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>");
نویسنده: خودمم
۱۴:۴۹ ۱۳۹۳/۰۳/۰۱
از راهنماییتون ممنونم
نکته ریزی بود ولی مهم
نویسنده: سارا
۱۶:۱۳ ۱۳۹۳/۰۷/۱۷
سلام
من آرایه ای لازم دارم که index آن از 1 شروع شود.
لطف کنید و نحوه تعریف حدود آرایه را بگویید.
متشکرم.
پاسخ: 
سلام
اگر منظورتان این است که key از 1 شروع شود و 0 نداشته باشیم، چنین کاری شدنی نیست! البته این کار ضرورتی هم نخواهد داشت، چون هر هدفی که داشته باشید می توانید مقدار 0 را خالی بگذارید، یا عدد 1 را به آن در محاسبات اضافه کنید و ... لذا مشکلی پیش نمی آید.
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- موارد غیرمرتبط با مباحث آموزش ها را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ مختصر داده خواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- از درج عناوین تبلیغاتی در فیلدها خودداری کنید، در صورتی که یادداشت تبلیغاتی تشخیص داده شود حذف خواهد شد.
- تمام یادداشت ها بررسی و زمانی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد خودداری کنید.





5 × 2
 refresh

آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form آی تی
در:
ممنون آینده کاری پی اچ پی خوبه یا جاواسکریپت؟
۱۴۰۰/۰۴/۳۰

form رضا
در:
با عرض سلام و خسته نباشید ایا امکان این قضیه در outlook وجود دارد که ما ادرس فرستنده را از طریق آن بتوانیم پیدا...
۱۴۰۰/۰۴/۳۰

form محمود
در:
سلام مهندس چگونه می شود میزان حرکت اسکرول را تعیین کرد. یعنی با یه حرکت غلطک موس صفحه بعدی در کادر قرار بگیرد....
۱۴۰۰/۰۴/۳۰

form محمد
در:
سلام خیلی خیلی ممنون تشکر
۱۴۰۰/۰۴/۲۷

form محمود
در:
سلام چگونه حاشیه های ناتمام ایجاد کنیم. یعنی تمام دور کادر کامل نباشد و بردر دور کادر ناقص باشد. مثلن بردر سمت راست تا...
۱۴۰۰/۰۴/۲۷

form محمد
در:
سلام ببخشید من با curl میخواستم فایلی رو با api بفرستم ولی جواب نداد اگر امکانش هست تصحیحش کنید:
۱۴۰۰/۰۴/۲۷

form برنامه نویس
در:
سلام و عرض ادب خدمت استاد. یه سوال خدمت شما داشتم. چطور می تونیم از ادیتور مثل ckeditor یا tinymsc به جای textarea...
۱۴۰۰/۰۴/۲۷

form جواد
در:
با سلام من دانشی از برنامه نویسی ندارم ، میشه برنامه ای نوشت که آدرس یک صفحه بعد از لاگین شدن بهش داد و هر...
۱۴۰۰/۰۴/۲۱

form علی
در:
سلام خوبین؟ من میخوام برای وبلاگم سبد خرید بزنم ولی php و ........ بلد نیستم اگه برام درست کنین ممنونتون میشم
۱۴۰۰/۰۴/۱۹

form سینا الف
در:
باسلام! من از این آموزش‌ سایت‌تون هم خیلی استفاده کردم. ضمن تشکر صمیمانه از مدیریت وبگو بابت مطالب مفید و کاربری اش، سوالی درباره...
۱۴۰۰/۰۴/۱۸

form محمود
در:
سلام و تشکر از کمک های قبلی تان. در بخش بالا قسمت «تغییر رنگ پس زمینه با کلیک کاربرم» را خوندم . ولی کد...
۱۴۰۰/۰۴/۱۸

form محمود
در:
با سلام دوباره نمونه کدی که برای افکت پس زمینه چراغ پلیس و صدا قرار دادین خیلی خوب کار میکند و بسیار سپاس ....
۱۴۰۰/۰۴/۱۴

form احمد
در:
سلام خسته نباشید من یه کد نوشتم که قیمت کالا ها و نام کالا ها رو از یه صفحه برام استخراج کنه و بصورت جدول...
۱۴۰۰/۰۴/۱۴

form محمود
در:
سلام و عرض ادب چگونه می شود با کلیک روی یک متن ، کل پس زمینه در یک آن چشمک بزند یعنی رنگ...
۱۴۰۰/۰۴/۱۱

form مجید
در:
سلام. من برنامه ای دارم که بر اساس php و mysql کار میکنه. بهش 100 جمله میدم و جملات رو تصادفی نمایش میده. حالا میخام...
۱۴۰۰/۰۴/۱۰

form Amir
در:
خیلی عالی بود
۱۴۰۰/۰۴/۱۰

form Amir
در:
سلام ببخشید یک کانال تلگرامی است که سیگنال میده و شرطی اینکه در آلپاری و لایت فارسی حساب داشته باشی و تحت ای پی آنها...
۱۴۰۰/۰۴/۱۰

form مجید
در:
خیر ببینی جوون - این اسکرول افقی کلی اعصاب رو بهم ریخته بود .
۱۴۰۰/۰۴/۰۷

form جین مین
در:
با سلام و وقت بخیر من تمام مراحل رو به نظر خودم درست انجام دادم و فایل هم دانلود میشه اما مشکل اصلی اونجاست...
۱۴۰۰/۰۴/۰۶
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.