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

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

آرایه چست؟

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

فرض کنید می خواهید نام رنگ ها را در کد جاوا اسکریپت خود ذخیره کنید. ذخیره کردن نام رنگ ها یک به یک در یک متغیر می تواند چیزی شبیه به این باشد:

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

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

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

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

ساده ترین راه برای ایجاد یک آرایه در جاوا اسکریپت محصور کردن لیستی از مقادیر جدا شده با کاما درون براکت ([ ]) است.که سینتکس ان به شکل زیر می باشد.

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

چند مثال برای ارایه

نکته:آرایه مجموعه ای  از مقادیر است. هر مقدار در یک آرایه یک عنصر نامیده می شود و هر عنصر دارای یک موقعیت عددی در یک آرایه است که به عنوان شاخص آن شناخته می شود.

نحوه دسترسی به عناصر یک آرایه در جاوا اسکریپت

عناصر آرایه را می توان با شاخص آنها با استفاده از علامت کروشه مربع([ ]) در دسترس قرار داد. شاخص عددی است که موقعیت یک عنصر را در یک آرایه نشان می دهد.شاخص های آرایه بر پایه صفر هستند.این بدان معنی است که اولین مورد از یک آرایه در شاخص 0 ذخیره می شود نه 1، آیتم دوم در شاخص 1 ذخیره می شود و غیره. شاخص های آرایه از 0 شروع می شود و به تعداد عناصر منهای 1 می رسد.بنابراین، آرایه ای از پنج عنصر دارای شاخص هایی از 0 تا 4 خواهد بود.

توجه: در جاوا اسکریپت، آرایه ها در واقع نوع خاصی از اشیا هستند که دارای شاخص های عددی به عنوان کلید هستند. عملگر typeof نوع ابجکت را برای آرایه ها برمی گرداند.

نحوه بدست آوردن طول یک آرایه در جاوا اسکریپت

ویژگی  length طول یک آرایه را برمی گرداند که تعداد کل عناصر موجود در آرایه است. طول آرایه همیشه بزرگتر از شاخص هر یک از عناصر آن است.

نحوه حلقه زدن از طریق عناصر آرایه

برای دسترسی به هر عنصر آرایه به ترتیب متوالی می توانید از حلقه for استفاده کنید، به عنوان مثال:

ECMAScript 6 راه ساده تری را برای تکرار روی عنصر آرایه معرفی کرده است که حلقه for-of  می باشد. در این حلقه نیازی نیست که متغیر شمارنده حلقه (i) را مقداردهی اولیه کنید و دنبال کنید.

 مثال بالا که با استفاده از حلقه for-ofبازنویسی شده است:

همچنین می توانید با استفاده از حلقه for-in روی عناصر آرایه حلقه بزنید،به عنوان مثال:

توجه: حلقه for-in نباید برای تکرار روی آرایه ای که ترتیب شاخص مهم است استفاده شود. حلقه for-in برای تکرار روی خصوصیات شی بهینه میباشد، بهتر است از یک حلقه for با شاخص عددی یا حلقه for-of استفاده کنید.

نحوه اضافه کردن عناصر جدید به یک آرایه

برای اضافه کردن یک عنصر جدید در انتهای یک آرایه، به سادگی از متد  ()push  مانند زیر استفاده کنید:

همچنین، برای اضافه کردن یک عنصر جدید در ابتدای یک آرایه از متد  ()unshift  مانند زیر استفاده کنید:

همچنین می‌توانید با استفاده از متدهای ()push و ()unshift چندین عنصر را به طور همزمان اضافه کنید، به عنوان مثال:

نحوه حذف عناصر از یک آرایه در جاوا اسکریپت

برای حذف آخرین عنصر از یک آرایه می توانید از متد  ()pop  استفاده کنید. همچنی این متد مقدار عنصر حذف شده را  برمی گرداند.به عنوان مثال:

همچنین، می توانید اولین عنصر را از یک آرایه با استفاده از متد  ()shift حذف کنید. این متد همچنین مقدار حذف شده را برمی گرداند. به عنوان مثال:

نکته: متدهای ()push و ()pop سریعتر از  ()unshiftو ()shift اجرا می شوند. از آنجا که متدهای()push و ()pop به سادگی عناصر را در انتهای یک آرایه اضافه و حذف می کنند، بنابراین عناصر حرکت نمی کنند، در حالی که ()unshiftو ()shiftعناصری را در ابتدای آرایه اضافه و حذف می کنند که نیاز به شاخص گذاری مجدد دارند. 

نحوه حذف و اضافه کردن عنصر در ایندکس های مختلف

متد ()splice  یک روش همه کاره است که به شما امکان می دهد عناصر را از هر شاخصی با استفاده از سینتکس arr.splice(startIndex, deleteCount, elem1, ..., elemN) اضافه یا حذف کنید.

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

روش  ()splice آرایه ای از عناصر حذف شده را برمی گرداند، یا اگر هیچ عنصری حذف نشده باشد، آرایه خالی را برمی گرداند، همانطور که در مثال بالا مشاهده می کنید. اگر آرگومان دوم حذف شود، تمام عناصر از ابتدا تا انتهای آرایه حذف می شوند. برخلاف متدهای  ()slice و ()concat  متد ()splice آرایه ای را که بر روی آن فراخوانی می شود تغییر می دهد.

نحوه ایجاد رشته از آرایه در جاوا اسکریپت

ممکن است شرایطی وجود داشته باشد که شما به سادگی بخواهید با به هم متصل شدن عناصر یک آرایه یک رشته ایجاد کنید. برای این کار می توانید از متد  ()join استفاده کنید. این روش یک پارامتر اختیاری می گیرد که یک رشته جداکننده است که بین هر عنصر اضافه می شود. اگر جداکننده را حذف کنید، جاوا اسکریپت به طور پیش فرض از کاما (,) استفاده می کند. مثال زیر نحوه عملکرد آن را نشان می دهد:

همچنین می توانید با استفاده از  ()toString  یک آرایه را به رشته ای جدا شده با کاما تبدیل کنید. این متد پارامتر جداکننده مانند ()join را نمی پذیرد. به عنوان مثال:

نحوه استخراج بخشی از یک آرایه در جاوا اسکریپت

اگر می خواهید بخشی از یک آرایه را استخراج کنید اما آرایه اصلی را دست نخورده نگه دارید، می توانید از روش  ()slice استفاده کنید. این روش دو پارامتر دارد: ایندکس شروع (شاخصی که در آن استخراج شروع می‌شود)، و یک شاخص پایان اختیاری (شاخصی که قبل از آن استخراج پایان می‌یابد)، مانند (arr.slice(startIndex, endIndex به عنوان مثال:

اگر پارامتر endIndex  حذف شود، تمام عناصر تا انتهای آرایه استخراج می شوند. همچنین می‌توانید شاخص‌ها یا آفست‌های منفی را مشخص کنید – در این صورت، متد ()slice عناصر را از انتهای یک آرایه استخراج می‌کند. مثلا:

نحوه ادغام دو یا چند آرایه در جاوا اسکریپت

متد ()concat می تواند برای ادغام یا ترکیب دو یا چند آرایه استفاده شود. این متد آرایه های موجود را تغییر نمی دهد، در عوض یک آرایه جدید برمی گرداند. مثلا:

متد ()concat می تواند هر تعداد آرگومان آرایه را بگیرد، بنابراین می توانید یک آرایه از هر تعداد آرایه دیگر ایجاد کنید. به عنوان مثال:

نحوه جست و جو در ارایه ها

اگر می خواهید در یک ارایه یک مقدار خاص را  جستجو کنید، می توانید به سادگی از  ()indexOf و ()lastIndexOf استفاده کنید.حال اگر مقدار پیدا شد، هر دو روش یک ایندکس نشان دهنده عنصر آرایه را برمی‌گردانند. اگر مقدار پیدا نشد،  1برگردانده می شود. متد ()indexOf اولین مورد یافت شده را برمی گرداند، در حالی که ()lastIndexOf  آخرین مورد یافت شده را برمی گرداند. به عنوان مثال:

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

دیگر روش های جستو جو در ارایه

شما همچنین می توانید از متد  ()includes  استفاده کنید تا بفهمید که آیا یک آرایه شامل یک عنصر خاص است یا خیر. این متد همان پارامترهای متدهای ()indexOfو ()lastIndexOfرا می گیرد، اما به جای عدد شاخص،true یا false را برمی گرداند. مثلا:

اگر می خواهید یک آرایه را بر اساس شرایط خاصی جستجو کنید، می توانید از متد  ()find  که به تازگی در جاوا اسکریپت ES6 معرفی شده است استفاده کنید. این روش مقدار اولین عنصری که در آرایه شرط تابع ما را ارضا میکند را برمی گرداند. در غیر این صورت مقدار undefined برمی گردد.به عنوان مثال:

یک متد  دیگر مشابه  ()findIndex()  ، find  است که به جای مقدار آن، شاخص عنصر پیدا شده در آرایه را برمی گرداند. مثلا:

متد  () find فقط به دنبال اولین عنصری است که تابع تست ارائه شده را برآورده می کند. با این حال، اگر می‌خواهید تمام عناصر منطبق را پیدا کنید، می‌توانید از متد ()filter استفاده کنید.

متد ()filter یک آرایه جدید با تمام عناصری ایجاد می کند که آزمون داده شده را با موفقیت پشت سر بگذارد. مثال زیر به شما نشان می دهد که این واقعا چگونه کار می کند:

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

سایر مقالات

کار با رشته ها در جاوا اسکریپت

تبدیل نوع داده(Type Conversions)در جاوا اسکریپت

.

برای امتیاز به این نوشته کلیک کنید!
[کل: 0 میانگین: 0]
اشتراک‌گذاری

دیدگاهتان را بنویسید

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