آموزش طراحی سایت-آرایه ها در جاوا اسکریپت

امروز با پست جدیدی از سری پست های آموزش طراحی سایت همراه شما هستیم. در این پست آرایه ها در جاوا اسکریپت را مورد بررسی قرار می دهیم.

آرایه ها (در جاوا اسکریپت) چندین متغیر را در قالب تنها یک متغیر ذخیره می کنند یا به عبارتی دیگر آرایه یک متغیر خاص است که می توانید به طور همزمان چندین مقدار (بیش از یک مقدار) را در آن ذخیره نمایید.
در این بخش با استفاده از یک اسکریپت، آرایه ها را داخل تگ <p> با شناسه "demo"نمایش می دهیم.
همان طور که در مثال زیر مشاهده می کنید، اولین خط ، آرایه ای به نام cars ایجاد می کند.
دومین خط المانی که شناسه ی آن "demo"می باشد را یافته سپس آرایه را در "innerHTML" آن المان نمایش می دهد.

مثال:

نمونه یک

<p id=&quotdemo&quot>Saab,Volvo,BMW</p>

var cars = [&quotSaab&quot, &quotVolvo&quot, &quotBMW&quot];
document.getElementById(&quotdemo&quot) = cars;

خودتان امتحان کنید.
یک آرایه ایجاد کرده و مقادیری به آن تخصیص دهید.

نمونه دو

var cars = [&quotSaab&quot, &quotVolvo&quot, &quotBMW&quot];

فاصله و انتهای خط (line break) از هیچ اهمیتی برخوردار نیستند. یک تعریف (declaration) می تواند در چندین خط ادامه داشته باشد.

مثال:

نمونه سه

var cars = [
    &quotSaab&quot,
    &quotVolvo&quot,
    &quotBMW&quot
];

توجه:

توجه داشته باشید که هیچ گاه پس از آخرین المان (در مثال بالا "BMW") ویرگول قرار ندهید، زیرا ممکن است در مرورگرهای مختلف نتایج متفاوتی ارائه دهد.

آرایه چیست ؟

در آموزش طراحی سایت شی آرایه یک نوع خاص از متغیر هاست که می تواند چندین داده را در قالب یک نام در خود ذخیره کند. آرايه مجموعه ای از متغيرهایی از يک نوع داده ای با نام يکسان است، که هر کدام از اعضای آن توسط يک شمارنده یا شاخص (index)، از يکديگر تمیز داده می شوند.
به عنوان مثال فرض کنید فهرستی از اقلام یا آیتم ها (برای مثال لیستی از اسم ماشین ها) را دارید که هر یک در متغیر ی مجزا ذخیره می گردد.

var car1 = &quotSaab"‎
var car2 = &quotVolvo"‎
var car3 = &quotBMW"‎

چنانچه بخواهیم درون آیتم های فوق حلقه زده (آن ها را تکرار کرده) و ماشین مورد نظر را پیدا کنیم چه اتفاقی رخ می دهد؟ اگر تعداد ماشین ها 3 تا نه بلکه 300 تا بود چه اتفاقی رخ می داد؟
این مسئله با بهره گیری از آرایه حل می شود.
یک آرایه همان طور که پیش تر ذکر کردیم قادر است چندین مقدار را تحت نام یکسان در خود ذخیره کرده و از طریق اندیس به آن مقادیر دسترسی پیدا کند.

ایجاد آرایه

استفاده از یک آرایه ی متنی (array literal) بهترین و نیز آسان ترین روش برای ایجاد یک آرایه ی جاوا اسکریپت می باشد.

دستور نگارش (syntax)

var array-name = [item1, item2, ...];‎

مثال:

var cars = [&quotSaab&quot, &quotVolvo&quot, &quotBMW&quot];‎

استفاده از کلید واژه ی new

مثال زیر نیز یک آرایه ایجاد کرده و به آن مقادیری را تخصیص می دهد.

مثال:

نمونه چهار

var cars = new Array(&quotSaab&quot, &quotVolvo&quot, &quotBMW&quot);

نکته:

دو مثال بالا هر دو یک کار یکسان را انجام می دهند. نیازی به استفاده از new Array() وجود ندارد. برای آسانی، قابلیت خوانایی بیشتر و نیز افزایش سرعت اجرا توصیه می کنیم از نمونه ی اول استفاده کنید.

دسترسی به المان های آرایه

برای دسترسی به المان مورد نظر در آرایه از شماره ی اندیس کمک می گیریم.
دستور زیر نحوه ی دسترسی به مقدار اولین المان را نمایش می هد.

var name = cars[0];‎

دستور زیر اولین المان را اصلاح می کند.

cars[0] = &quotOpel"‎

توجه:

دقت داشته باشید که [0] اولین المان محسوب می گردد و [1] دومین شمارنده ی آرایه ها در جاوا اسکریپت از صفر آغاز می شود.

امکان داشتن چندین شی مختلف در یک آرایه

در آموزش طراحی سایت متغیر در جاوا اسکریپت می تواند یک شی باشد. در حقیقت آرایه یک نوع خاص شی محسوب می گردد، به این خاطر هم می توانید متغیرهایی از نوع های مختلف در یک آرایه داشته باشیم.
می توان اشیا (object)، توابع (function) یا آرایه (array) در دل آرایه ی دیگر قرار داد.

myArray[0] = Date.now;‎
myArray[1] = myFunction;‎
myArray[2] = myCars;

آرایه یک شی است

آرایه یک نوع خاص شی است. عملگر (operator) typeof در جاوا اسکریپت (برای آرایه) "object" بازمی گرداند.
آریه برای دسترسی به المان های خود از شماره کمک می گیرد. به عنوان مثال person[0] المان John را باز می گرداند.

Arrayمثال:

نمونه پنج

var person = [&quotJohn&quot, &quotDoe&quot, 46];

اشیا با استفاده از اسم (name) به اعضای ("member") خود دستیابی پیدا می کنند. برای مثال person.firstName المانJohn را بازیابی می کند.

objectمثال:

نمونه شش

var person = {firstName:&quotJohn&quot, lastName:&quotDoe&quot, age:46};

خواص property ها (خواص) و method های (توابع) مربوط به آرایه

اگر به مثال زیر دقت کنید متوجه می شوید که length property تعداد المان های موجود در cars را برمی گرداند و تابع sort()، cars را به ترتیب حروف الفبا مرتب سازی (sort) می کند.

مثال:

var x = cars.length;         // The length property returns ‎the number of elements in cars 
        var y = cars.sort();         // The sort() method sort cars in ‎alphabetical order

تشریح خاصیت length

دستور length property یک آرایه، طول یا تعداد المان های موجود در یک آرایه را باز گردانی می کند.

مثال:

نمونه هفت

var fruits = [&quotBanana&quot, &quotOrange&quot, &quotApple&quot, &quotMango&quot];
fruits.length;                       // the length of fruits is 4

افزودن المان جدید به یک آرایه

آسان ترین روش برای افزورن یک element جدید به آرایه، استفاده از تابع (method) push می باشد.

مثال:

نمونه هشت

var fruits = [&quotBanana&quot, &quotOrange&quot, &quotApple&quot, &quotMango&quot];
fruits.push(&quotLemon&quot);                // adds a new element (Lemon) to fruits

همچنین می توان این کار را با بهره گیری از length property انجام داد.

مثال:

نمونه نه

var fruits = [&quotBanana&quot, &quotOrange&quot, &quotApple&quot, &quotMango&quot];
fruits[fruits.length] = &quotLemon"     // adds a new element (Lemon) to fruits

ایجاد یک حلقه در آرایه (تکرار المان های یک آرایه به تعداد دفعات معین)

در loop for مجموعه دستورالعمل ها به تعداد معلوم و مورد نياز، تکرار می شوند. یکی از بهترین روش های تکرار المان های یک آرایه استفاده از حلقه ی بیان شده است.

مثال:

نمونه ده

var index;
var fruits = [&quotBanana&quot, &quotOrange&quot, &quotApple&quot, &quotMango&quot];
for (index = 0; index < fruits.length; index++) {
    text += fruits[index];
}

آرایه ی شرکت پذیر چیست (associative arrays)؟

بسیاری از زبان های برنامه نویسی کنونی از آرایه های با اندیس های نام گذاری شده پشتیبانی می کنند.
آرایه هایی که اندیس های آن ها نام گذاری شده، آرایه های شرکت پذیر یا (hashes) associative arrays نامیده می شوند.
جاوا اسکریپت از آرایه هایی که دارای named index (اندیس نام گذاری شده) هستند پشتیبانی نمی کند. در عوض این زبان از قابلیت numbered indexes (اندیس های شماره گذاری شده) پشتیبانی می کند.

مثال:

نمونه یازده

var person = [];
person[0] = &quotJohn"
person[1] = &quotDoe"
person[2] = 46;
var x = person.length;         // person.length will return 3
var y = person[0];             // person[0] will return &quotJohn&quot

توجه:

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

مثال:

نمونه دوازده

var person = [];
person[&quotfirstName&quot] = &quotJohn"
person[&quotlastName&quot] = &quotDoe"
person[&quotage&quot] = 46;
var x = person.length;         // person.length will return 0
var y = person[0];             // person[0] will return undefined

تشریح تفاوت بین آرایه (array) و شی (object)

همان طور که پیش تر شرح داده شد، در جاوا اسکریپت آرایه ها از اندیس های شماره دار استفاده می کنند.
اشیا (object) نیز از اندیس های نام دار (named indexes) استفاده می کنند.

چه زمانی باید از array استفاده کرد و چه زمانی از object؟

جاوا سکرپیت JavaScript از آرایه های شرکت پذیر (associative array) پشتیبانی نمی کند.
اگر می خواهید اسم المان ها از نوع رشته (نوشته یا متن) باشد، در آن صورت به طور حتم باید از object استفاده کنید.
چنانچه مایلید اسم المان از نوع عددی یا شماره باشد، باید از array استفاده کنید.
تا حد ممکن سعی کنید از بکار گیری constructor (سازنده) پیش فرض و توکار ()JavaScript،new Array خودداری کنید.
بجای استفاده از روش منسوخ بالا می توانید از روش نوین [] بهره بگیرید.
هر دو دستور کاملا متفاوت نام برده، آرایه ای تهی به نام points ایجاد می کنند.

var points = new Array();         // Bad 
        var points = [];                  // Good ‎

بار دیگر هر دو دستور آرایه ای ایجاد می کنند که دربردارنده ی 6 عدد است.

نمونه سیزده

var points = new Array(40, 100, 1, 5, 25, 10)  // Bad
var points = [40, 100, 1, 5, 25, 10];          // Good

استفاده از کلیدواژه ی new برای ایجاد آراِیه ی جدید به دلیل طولانی و پیچیده تر کردن کد منسوخ تلقی تلقی می گردد.

var points = new Array(40, 100);  // Creates an array with two elements (40 and 100)

ببینید در صورت حذف کردن یکی از المان ها چه اتفاقی رخ می دهد!

نمونه چهارده

var points = new Array(40);       // Creates an array with 40 undefined elements !!!!!

چگونه یک آرایه را تشخیص دهیم؟

یکی از سوال هایی که به طور متدوال مطرح می شود این است که چگونه می توان تشخیص داد آیا یک متغیر آرایه هست یا خیر؟
یکی از مشکل هایی که با آن مواجه می شویم، این است که عملگر typeof "object" باز می گرداند.

نمونه پانزده

var fruits = [&quotBanana&quot, &quotOrange&quot, &quotApple&quot, &quotMango&quot];
typeof fruits;             // typeof returns object

عملگر مزبور به این خاطر "object" برمی گرداند که یک JavaScript array یا آرایه ی جاوا اسکریپت خود یک شی است.
جهت رفع این مشکل توصیه می کنیم isArray() function خود را ایجاد کنید.

نمونه شانزده

function isArray(myArray) {
    return myArray.constructor.toString().indexOf(&quotArray&quot) > -1;}

تابع function (تابع) بالا همیشه در صورتی که آرگومان مورد نظر یک آرایه باشد، مقدار true باز می گرداند و یا اگر بخواهیم دقیق تر توضیح بدیم اگر نوع ورودی تابع از نوع "[object array]" باشد مقدار صحیح (true) برمی گرداند.

آموزش طراحی سایت ادامه دارد