آرایه های جاوا اسکریپت – راهنمای کاربردی

۳۹۰ بازدید
آخرین به‌روزرسانی: ۸ شهریور ۱۴۰۲
زمان مطالعه: ۸ دقیقه
دانلود PDF مقاله
آرایه های جاوا اسکریپت – راهنمای کاربردی

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

997696

پیش‌نیازها

  • سواد مقدماتی رایانه
  • درک اولیه‌ای از HTML و CSS
  • آشنایی ابتدایی با ماهیت جاوا اسکریپت

هدف از این مقاله درک آرایه‌ها و چگونگی دستکاری آن‌ها در جاوا اسکریپت است.

آرایه چیست؟

آرایه‌ها عموماً به صورت «شیءهای شِبه لیست» توصیف می‌شوند. در واقع آرایه اساساً شیءهای منفردی هستند که به صورت چند مقدار در یک لیست ذخیره شده‌اند. اشیای آرایه می‌توانند در متغیرها ذخیره شوند و به روشی کاملاً مشابه با هر متغیر دیگر می‌توانیم با آن‌ها کار کنیم، تنها تفاوت در این است که هر مقدار درون این لیست را می‌توان مستقلاً مورد دسترسی قرار دارد و از این رو به شیءهای بسیار مفید و کارآمدی به خصوص در مواردی مانند تعریف حلقه و انجام کارهای تکراری روی هر مقدار تبدیل می‌شوند. برای مثال ممکن است یک سری از آیتم‌های محصول داشته باشید و قیمت آن‌ها در آرایه‌ای ذخیره شده باشد و بخواهیم روی همه آن‌ها حلقه‌ای تعریف کرده و بهای محصول را نمایش دهیم و یا همه قیمت‌ها را با هم جمع زده و مبلغ کلی را در انتها نمایش دهیم.

اگر آرایه وجود نمی‌داشت، در مورد مثال فوق مجبور بودیم هر آیتم را در یک متغیر جداگانه ذخیره کنیم، سپس کدی را که وظیفه نمایش و افزودن جداگانه هر آیتم را بر عهده دارد فراخوانی کنیم. نوشتن این کد می‌تواند بسیار طولانی‌تر، ناکارآمدتر و مستعد خطا باشد. اگر حتی 10 آیتم باشد که بخواهیم در یک صورتحساب جمع بزنیم، این کد به قدر کافی بد محسوب می‌شود؛ اما تصور کنید بخواهیم برای 100 یا 1000 آیتم یک چنین کدی بنویسیم. در ادامه این مقاله مجدداً از این مثال استفاده خواهیم کرد.

در یکی از مقالات قبلی این سری از آموزش‌های عملی جاوا اسکریپت، در مورد مبانی واقعی آرایه‌ها با وارد کردن برخی مثال‌ها در کنسول جاوا اسکریپت مواردی را آموختیم. در ادامه نیز یک مثال دیگر ارائه کرده‌ایم که می‌توانید در کنسول مرورگر خود وارد کنید. برای مراجعه به بخش کنسول مرورگر می‌توانید از دکمه‌های میانبر Ctrl+Shift+I و سپس انتخاب بخش console استفاده کنید.

ایجاد یک آرایه

آرایه‌ها به وسیله براکت ([]) ساخته می‌شوند و درون این براکت ها فهرستی از آیتم‌ها قرار می‌گیرد که با یک کاما (,) از هم جدا می‌شوند. فرض کنید می‌خواهیم یک فهرست خرید محصولات را در آرایه‌ای ذخیره کنیم. بدین منظور باید کاری مانند زیر انجام دهیم. کد زیر را در کنسول مرورگر وارد کنید:

var shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles'];
shopping;

در این حالت هر آیتم در آرایه یک رشته است؛ اما به خاطر داشته باشید که می‌توانید هر نوع آیتمی مانند رشته، عدد، شیء، متغیر دیگر و حتی آرایه دیگر را در آرایه ذخیره کنید. همچنین می‌توانید نوع آیتم‌ها را با هم مخلوط کرده یا تطبیق دهید و لزومی نیست که همه داده‌ها از نوع رشته یا عدد و غیره باشند. برای نمونه کد زیر را امتحان کنید:

var sequence = [1, 1, 2, 3, 5, 8, 13];
var random = ['tree', 795, [0, 1, 2]];

در این مرحله تلاش کنید برخی از آرایه‌هایی که به ذهنتان می‌رسد را نیز در کنسول وارد کنید.

دستیابی و اصلاح آیتم‌های آرایه

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

shopping[0];
// returns "bread"

همچنین ‌می‌توانید از طریق ارائه یک مقدار جدید برای یک آیتم در آرایه، آن را تغییر دهید:

shopping[0] = 'tahini';
shopping;
// shopping will now return ["tahini", "milk", "cheese", "hummus", "noodles"]

باید توجه داشته باشید که رایانه‌ها شمارش را از 0 آغاز می‌کنند. همچنین دقت کنید که یک آرایه درون آرایه دیگر به نام آرایه چندبُعدی نامیده می‌شود. شما می‌توانید از طریق زنجیره‌سازی دو مجموعه براکت با هم، به یک آیتم از آرایه‌ای که خود درون آرایه دیگر قرار دارد، دسترسی داشته باشید. برای مثال، برای دسترسی به یکی از آیتم‌های درون آرایه که آیتم سوم درون آرایه random است، می‌توانیم از کدی مانند زیر استفاده کنیم:

random[2][2];

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

یافتن طول یک آرایه

طول یک آرایه و تعداد آیتم‌های داخل آن را می‌توان دقیقاً به همان روش یافتن طول و تعداد کاراکترهای یک رشته پیدا کرد. به این منظور می‌توان از خصوصیت length استفاده کرد. کد زیرا را وارد کنید:

sequence.length;
// should return 7

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

var sequence = [1, 1, 2, 3, 5, 8, 13];
for (var i = 0; i < sequence.length; i++) {
   console.log(sequence[i]);
}

در مقالات آتی این سری آموزش‌ها به توضیح کامل حلقه‌ها خواهیم پرداخت؛ اما به طور خلاصه باید اشاره کرد که در کد فوق موارد زیر اتفاق می‌افتند:

  1. حلقه از آیتم 0 شروع به چرخش روی آرایه می‌کند.
  2. زمانی که تعداد آیتم‌ها با طول آرایه برابر شود حلقه متوقف می‌شود. این وضعیت برای حلقه‌ای با هر طول پاسخ می‌دهد؛ اما در این مورد در آیتم شماره 7 متوقف شده است، چون طول حلقه همین مقدار است.
  3. در مورد هر آیتم، مقدار مربوطه در کنسول مرورگر با استفاده از ()console.log نمایش یافته است.

برخی متدهای مفید آرایه‌ها

در این بخش، برخی متدهای مفید مرتبط با آرایه معرفی شده‌اند که امکان افراز رشته‌ها به آیتم‌های آرایه‌ای و برعکس و همچنین افزودن آیتم‌های جدید به آرایه‌ها را میسر می‌سازند.

تبدیل بین رشته‌ها و آرایه‌ها

در اغلب موارد با موقعیت‌هایی روبرو می‌شویم که برخی داده‌های خام در یک رشته حجیم در اختیار ما قرار گرفته است و باید آیتم‌های مورد نظر را به شکلی مفیدتر جدا کنیم و کارهایی مانند نمایش در یک جدول داده‌ای را روی آن‌ها انجام دهیم. به این منظور می‌توانیم از متد ()split استفاده کنیم. این متد در ساده‌ترین شکل خود یک پارامتر منفرد می‌گیرد و آن شماره کاراکتری است که می‌خواهید رشته را از آنجا تقسیم کنید و زیررشته‌های بین آن عدد جدا کننده را به صورت آیتم‌های یک آرایه باز می‌گرداند.

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

در ادامه مثال‌هایی از این متد ارائه شده تا با کارکرد آن بیشتر آشنا شوید. ابتدا یک رشته در کنسول ایجاد می‌کنیم:

var myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';

سپس آن را بر اساس تعداد کاماها افراز می‌کنیم:

var myArray = myData.split(',');
myArray;

در نهایت طول آرایه جدید را یافته و برخی آیتم‌ها را از آن بازیابی می‌کنیم:

myArray.length;
myArray[0]; // the first item in the array
myArray[1]; // the second item in the array
myArray[myArray.length-1]; // the last item in the array

همچنین می‌توان مسیر معکوس را رفت و از متد ()join استفاده کرد. کد زیرا را امتحان کنید:

var myNewString = myArray.join(',');
myNewString;

روش دیگر برای تبدیل یک آرایه به رشته، استفاده از متد ()toString است. ()toString به طور معقولی ساده‌تر از ()join است و هیچ پارامتری نمی‌گیرد؛ اما محدودتر است. با استفاده از ()join می‌توان جداکننده‌های متفاوتی را تعیین کرد.

var dogNames = ['Rocket','Flash','Bella','Slugger'];
dogNames.toString(); //Rocket,Flash,Bella,Slugger

افزودن و حذف آیتم‌های آرایه

ما هنوز به بحث اضافه یا حذف کردن آیتم‌ها نپرداخته‌ایم. ما از آرایه‌ای به نام myArray که در بخش قبلی معرفی کردیم استفاده می‌کنیم. اگر آن بخش را طی نکرده‌اید ابتدا این آرایه را در کنسول مرورگر خود ایجاد کنید:

var myArray = ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds', 'Carlisle'];

قبل از هر چیز باید بگوییم که برای افزودن یا حذف آیتم‌ها به انتهای یک آرایه می‌توانیم به ترتیب از ()push و ()pop استفاده کنیم. ابتدا استفاده از ()push را بررسی می‌کنیم. دقت کنید که باید یک یا چند آیتم را که می‌خواهید به انتهای آرایه اضافه کنید بگنجانید. کد زیر را وارد کنید:

myArray.push('Cardiff');
myArray;
myArray.push('Bradford', 'Brighton');
myArray;

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

>var newLength = myArray.push('Bristol');
myArray;
newLength;

حذف آیتم آخر از آرایه نیز به سادگی اجرای متد ()pop روی آن است:

myArray.pop();

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

var removedItem = myArray.pop();
myArray;
removedItem;

متدهای ()unshift و ()shift نیز به ترتیب دقیقاً به همان روش متدهای ()push و ()pop عمل می‌کنند؛ به جز این که در ابتدای آرایه و نه انتهای آن عمل می‌کنند.

ابتدا برای بررسی متد ()unshift کد زیر را امتحان کنید:

myArray.unshift('Edinburgh');
myArray;

اینک می‌توانید کد ()shift را با دستورهای زیر بررسی کنید:

var removedItem = myArray.shift();
myArray;
removedItem;

یادگیری عملی: نمایش محصولات

اکنون به مثالی که قبلاً معرفی کردیم باز می‌گردیم. در آن مثال نام و مبالغ محصول‌ها را در یک صورتحساب چاپ می‌کردیم و مجموع مبالغ را محاسبه و در انتهای آن نمایش می‌دادیم. در مثال قابل ویرایش زیر توضیح‌هایی وجود دارند که شامل اعداد هستند. هر یک از این توضیح‌ها مکانی هستند که می‌توانید بخشی به کد موجود اضافه کنید. این موارد به صورت زیر هستند:

زیر توضیح اول (number 1//) چند رشته هستند که هر یک شامل نام محصول و قیمت آن هستند که با یک دونقطه (:) از هم جدا شده‌اند. ما می‌خواهیم این مقادیر را به یک آرایه تبدیل کرده و آن را در آرایه‌ای به نام products ذخیره کنیم.

در آن خط که با توضیح دوم (number 2//) مشخص شده ابتدای یک حلقه تعریف شده است. در این خط ما هم اینک مقدار i<=0 را داریم که یک تست شرطی است و باعث می‌شود حلقه تنها یک بار اجرا شود، چون این شرط تعیین می‌کند که «وقتی i دیگر کمتر یا مساوی 0 نیست، متوقف شو» و i از آغاز می‌شود. ما می‌خواهیم این کد را با تست شرطی دیگری جایگزین کنیم که در آن حلقه وقتی متوقف می‌شود که i دیگر کمتر از طول آرایه products نباشد.

درست زیر توضیح سوم (number 3//) باید یک خط کد بنویسیم که آیتم آرایه کنونی (name:price) را به دو آیتم مجزا افراز می‌کند و یکی شامل صرفاً نام و دیگری شامل مبلغ است.

همچنین ممکن است به عنوان بخشی از کد فوق بخواهید مبلغ را از یک رشته به عدد تبدیل کنید.

یک متغیر به نام total نیز وجود دارد که ایجاد شده و در ابتدای کد مقدار 0 گرفته است. درون حقه (زیر توضیح شماره 4) می‌خواهیم خطی اضافه کنیم که مبلغ آیتم کنونی را در هر تکرار حلقه به مقدار total اضافه می‌کند و بدین ترتیب در انتهای اجرای کد، مجموع کلی در صورتحساب نمایش می‌یابد. به این منظور ممکن است به یک عملگر انتساب نیاز داشته باشید.

ما همچنین می‌خواهیم خطی که زیر توضیح شماره 5 (number 5//) قرار دارد را طوری تغییر دهیم که متغیر itemText برابر با «current item name — $current item price» باشد. یعنی برای مثال در مورد کفش به صورت «Shoes — $23.99» باشد بنابراین اطلاعات هر آیتم در صورت حساب اصلاح می‌شود. این یک الحاق رشته‌ای ساده است که قبلاً در سری‌های قبلی این راهنماها با آن آشنا شده‌ایم.

یادگیری عملی: 5 جستجوی برتر

یکی از استفاده‌های مناسب از هر متد آرایه مانند ()push و ()pop زمانی است که می‌خواهیم سابقه‌ای از آیتم‌های فعال کنونی را در یک وب اپلیکیشن نگهداری کنیم. برای نمونه در یک صحنه متحرک ممکن است یک آرایه از عناصر پس زمینه داشته باشید که هم اینک نمایش یافته‌اند و به دلایل عملکردی یا جلوگیری از شلوغ شدن صفحه، بخواهید تنها 50 عنصر از این‌ها همزمان نمایش یابند. به مرور که شیءهای جدید ایجاد شده و به آرایه اضافه می‌شوند، اشیای قدیمی‌تر می‌توانند از آرایه حذف شوند تا تعداد مطلوب مداوماً حفظ شود.

در این مثال، قصد داریم استفاده بسیار ساده‌تری را به شما نشان دهیم. در این مثال ما یک سایت جستجوی ساختگی با یک کادر جستجو ایجادی کنیم. ایده کار این است که وقتی کلمه‌ای در کادر جستجو وارد می‌شود، 5 کلمه جستجو شده قبلی در فهرستی نمایش یابند. زمانی که کلمه‌ها از 5 بیشتر می‌شود، آخرین کلمه قبلی از ابتدا حذف می‌شود و کلمه جدید به سمت بالا اضافه می‌شود، بنابراین همواره 5 کلمه قبلی نمایش می‌یابند. برای کامل کردن این وب اپلیکیشن به موارد زیر نیاز داریم:

یک خط زیر توضیح number 1// اضافه کنید که مقدار کنونی وارد شده در کادر جستجو را به ابتدای آرایه اضافه کند. این مقدار را می‌توان با استفاده از searchInput.value بازیابی کرد.

یک خط زیر توضیح number 2// اضافه کنید که مقدار جاری را از انتهای آرایه حذف کند.

سخن پایانی

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

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

==

بر اساس رای ۱ نفر
آیا این مطلب برای شما مفید بود؟
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
mozilla.org
دانلود PDF مقاله
نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *