آرایه ها (Arrays) در جاوا اسکریپت (Javascript)

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

داده های Boolean در جاوا اسکریپت

مقادیر منطقی هستند که تنها دو حالت را قبول می کنند: true یا false (به ترتیب به معنای صحیح و غلط). این مقادیر بیشتر در عبارات شرطی یا conditional testing استفاده می شوند اما در هر جایی که بخواهیم بگوییم یک حالت یا غلط است یا درست از آن ها استفاده می کنیم. مثال:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Booleans</h2>

<p>Booleans can have two values: true or false:</p>

<p id="demo"></p>

<script>
var x = 5;
var y = 5;
var z = 6;
document.getElementById("demo").innerHTML =
(x == y) + "<br>" + (x == z);
</script>

</body>
</html>

بر اساس دروس جلسات قبل و توضیحات ارائه شده در مورد اپراتور ها، خروجی کد ما به ترتیب true و false خواهد بود. مشاهده ی خروجی این کد در ادیتور آنلاین جاوا اسکریپت.

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

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

آرایه ها در واقع متغیر هایی هستند که می توانند بیشتر از یک مقدار را در خود ذخیره کنند.

مثال:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p id="demo"></p>

<script>
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

خروجی این کد عبارت "Saab, Volvo, BMW" خواهد بود.

آرایه ها به چه دردی می خورند؟

همانطور که گفتیم آرایه ها می توانند بیشتر از یک مقدار را در خود ذخیره کنند بنابراین زمانی که می خواهید چندین مقدار را در یک متغیر ذخیره کنید از آن ها استفاده می کنید. به طور مثال تصور کنید همین سه برند ماشین را بخواهیم جداگانه ذخیره کنیم:

var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW";

اضافه نویسی و هدر دادن وقت در این خط کد بیداد می کند! حالا فرض کنید یک فروشگاه دارید و میخواهید نام کسانی که فلان محصول شما را خریداری کرده اند نمایش دهید! ممکن است هزاران نفر چنین کاری کرده باشند و تعریف متغیر جداگانه برای هر کدام عملات غیر ممکن است!

تعریف آرایه

ساختار کلی تعریف آرایه ها به شکل زیر است:

var array_name = [item1, item2, ...];

این روش، ساده ترین روش ساخت آرایه هاست. مثال قبلی ما هم به همین شکل نوشته شده بود:

var cars = ["Saab", "Volvo", "BMW"];

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

var cars = [
  "Saab",
  "Volvo",
  "BMW"
];

نکته: بعد از مورد آخر (در این مثال، BMW) ویرگول نگذارید چرا که در برخی از مرورگر ها (IE 8 و قبل از آن) باعث خرابکاری و بروز خطا می شود.

می توانید آرایه ها را به صورت شیء نیز تعریف کنید:

var cars = new Array("Saab", "Volvo", "BMW");

اما هیچ دلیل منطقی برای چنین کاری وجود ندارد. بالعکس، سرعت اجرا، راحتی کار با متغیر و ... بدتر می شود! بنابراین این مورد فقط برای اطلاعات عمومی بود!

اگر نمی دانید اشیاء چه هستند نگران نباشید، هنوز به آن ها نرسیده ایم، این مورد مخصوص کسانی بود که با چنین مفهومی آشنا هستند.

دسترسی به اعضای یک آرایه

راه های مختلفی برای دسترسی به اعضای یک آرایه وجود دارد. یکی از آن ها استفاده از index number (عدد ایندکس، یا اندیسِ آرایه) است. اگر بخواهم خلاصه برایتان بگویم:

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

برای واضح شدن مطلب یک کتاب را تصور کنید؛ هر کتابی قسمتی به نام فهرست دارد و این فهرست برای هر مبحثی، عددی ارائه می کند که همان شماره ی صفحه است. حالا ایندکس ها در واقع همین شماره ی صفحه برای آرایه ها هستند. به مثال زیر توجه کنید:

var name = cars[0];

این کد می گوید: از آرایه ای به نام cars (که بالا تعریف کرده ایم)، عضو اول آن (عدد صفرِ ایندکس) را بردار و داخل متغیر name قرار بده.

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

دسترسی به کل یک آرایه

برای دسترسی به تمام اعضای یک آرایه باید نام آرایه را بدون ذکر ایندکس مشخص به جاوا اسکریپت بدهید. مثال:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p id="demo"></p>

<script>
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

خروجی این کد عبارت "Saab, Volvo, BMW" می باشد.

تغییر اعضای یک آرایه

حالا که آرایه ی cars را تعریف کرده ایم اگر کد زیر را بنویسیم چه اتفاقی رخ می دهد؟

cars[0] = "Opel";

این کد عضو اول آرایه را بر میدارد و آن را با Opel جایگزین می کند. چرا؟ چون آرایه تعریف شده و الان عضو اول با ایندکس صفر را دارد اما شما دوباره به آن گفته اید که عضو اول را Opel قرار بده، بنابراین آرایه می فهمد که باید عضو اول را جایگزین کند (نه اضافه).

به کد زیر دقت کنید:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>JavaScript array elements are accessed using numeric indexes (starting from 0).</p>

<p id="demo"></p>

<script>
var cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

خروجی این کد عبارت "Opel,Volvo,BMW" می شود! مشاهده ی خروجی این کد در ادیتور آنلاین جاوا اسکریپت.

نکته ی جالب: آرایه های جاوا اسکریپت در واقع یک نوع شیء هستند و اگر از دستور typeof استفاده کنید به شما "object" را بر میگرداند اما رفتارشان مانند اشیاء نیست.

به طور مثال ما برای دسترسی به اعضا از ایندکس استفاده می کنیم اما در اشیاء از نام (به جای عدد) استفاده می کنیم.

نکته: اعضای یک آرایه حتما نباید از یک نوع باشند، بلکه می توانید آرایه در آرایه یا شیء در آرایه یا تابع در آرایه و ... داشته باشید. اعضای آرایه می توانند هر نوعی باشند.

آرایه های Associative

آرایه های Associative که در فارسی به آن ها آرایه های متناظر می گویند (ممکن است بعضا آن ها را با نام آرایه های انجمنی هم ببینید که یک ترجمه ی تحت اللغوی است و اصلا جالب نیست)، آرایه هایی هستند که ایندکس آن ها را خود ما تعیین می کنیم! در بسیاری از زبان های برنامه نویسی این ایندکس ها می توانند از جنس حروف باشند اما در جاوا اسکریپت فقط ایندکس های عددی داریم

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

سوال: اگر ایندکس ها را به صورت حروفی تعیین کنیم چه می شود؟

پاسخ: جاوا اسکریپت آرایه ی شما را به یک شیء تبدیل می کند و بسیاری از متدهای کار با آرایه ها دیگر برایتان کار نخواهد کرد.

مثال از یک آرایه با ایندکس دلخواه عددی:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p id="demo"></p>

<script>
var person = [];
person[0] = "Amir";
person[1] = "Zouerami";
person[2] = 23; 
document.getElementById("demo").innerHTML =
person[0] + " " + person.length;
</script>

</body>
</html>

خروجی این کد عبارت "Amir 3" است. در قسمت بعدی به سراغ متدها و توابع مربوط به آرایه ها خواهیم رفت بنابراین اگر نمی دانید "person.length" در کد ما به چه معناست نگران نباشید (length یعنی طول، و person.length یعنی طولِ آرایه ی person؛ منظورش تعداد اعضای این آرایه است).

نکته: به نوعی می توان گفت آرایه ها، اشیاء خاصی هستند که ایندکس عددی دارند!

امیدوارم از این قسمت استفاده ی مفید کرده باشید. در قسمت بعدی به سراغ متدها و توابع مربوط به آرایه ها می رویم.

دیدگاه‌های شما (2 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

سید علی

20 آبان 1399

واقعا لذت بردم ممنونم

Ahmad Tavakoli

29 دی 1397

الان یک سوال دارم من چرا وقتی خروجی کدها رو مینویسین بازم لینک برای jsbin میدین؟!

امیر زوارمی

01 بهمن 1397

سلام دوست عزیز، - خروجی کد ها رو برای کسانی می نویسم که دوست ندارن مکررا وارد تب های دیگه بشن و صفحه های جدیدی باز کنن. - لینک های jsbin رو برای این میدم که خواننده ها بتونن به سراغ سورس کد برن و همونجا کد رو ادیت کنن و با کد بازی کنن تا حالت های مختلف رو ببینن، اما برای کد هایی که پیچیده نیستن و نیازی به ادیت ندارن این لینک ها رو قرار نمیدم.