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

جاوا اسکریپت یکی از مهمترین زبانهای برنامهنویسی است که عمدتاً برای بهبود تعامل کاربر با یک صفحه وب استفاده میشود. با استفاده از این زبان برنامهنویسی میتوانید وبسایت خود را پویاتر، قویتر و تعاملیتر کنید. امروزه جاوا اسکریپت بهطور گسترده در توسعه بازی و توسعه اپلیکیشن موبایل و غیره استفاده میشود. یکی از مهمترین عناصر جاوا اسکریپت آرایه ها هستند. در این مقاله آموزشی از مکتب خونه قصد داریم در رابطه با آموزش آرایه ها در جاوا اسکریپت باهم به گفتگو بپردازیم. پس تا آخر این مقاله ما را همراهی بفرمایید.
تعریف آرایه ها در جاوا اسکریپت
آرایه در جاوا اسکریپت نوعی داده است که برای ذخیره فهرستی از مقادیر استفاده میشود. اشیاء آرایه جاوا اسکریپت را میتوان در متغیرها ذخیره کرد و به همان روشی که با هر نوع داده دیگری برخورد میکنید با آنها برخورد کرد. تفاوت این است که ما میتوانیم به هر مقدار داخل لیست بهصورت جداگانه دسترسی داشته باشیم و فعالیتهای مختلفی مانند حلقه زدن یا پیمایش روی آن را انجام دهیم.
در ادامه این نوشته با Array در جاوا اسکریپت آشنا شده و متدهای مهم آن را خواهیم شناخت.
عملیات روی آرایه در جاوا اسکریپت
عملیات مختلفی را روی آرایه در جاوا اسکریپت انجام میدهند که در این بخش به آنها اشاره خواهیم کرد.
ایجاد آرایه در جاوا اسکریپت
عناصر موجود در یک آرایه در داخل براکت قرار میگیرند. برای مثال، ما در آرایه زیر به نام let cars فهرستی از ماشینها را در آرایه قرار دادهایم.
آرایه بالا فقط مقادیر صحیح را نگه میدارد، اما آرایهها میتوانند مقادیر متعددی از انواع دادههای مختلف را نگهدارند.
دسترسی به عناصر آرایه ها در جاوا اسکریپت
نماد دسترسی به عناصر داخل آرایه ها در جاوا اسکریپت نیز براکت است. هر عنصر در آرایه با یک اندیس تخصیص داده میشود. بهطور پیشفرض، اولین اندیس یک آرایه صفر است. برای بازیابی یک عنصر مشخصشده از یک آرایه، از یک جفت براکت مربع که مقدار اندیس را در برمیگیرد، یعنی cars[0] استفاده میشود. برای جلوگیری از هرگونه سردرگمی، اندیس را بهعنوان تعداد آیتمهایی که باید از آن رد شوید، از ابتدای آرایه شمارش کنید.
کد بالا مقادیر bmw و honda را به ترتیب روی کنسول نمایش میدهد.
به دست آوردن طول آرایه در JavaScript
همانطور که از نام آن پیداست، ویژگی length طول آرایه را بازیابی میکند.
<span class="token keyword">let</span> cars <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"bmw"</span><span class="token punctuation">,</span> <span class="token string">"volvo"</span><span class="token punctuation">,</span> <span class="token string">"honda"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> len <span class="token operator">=</span> cars<span class="token punctuation">.</span>length<span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>len<span class="token punctuation">)</span><span class="token punctuation">;</span>
طول آرایه ماشینها در len متغیر ذخیره میشود. میتوانید خروجی را روی کنسول مشاهده کنید.
دسترسی به آخرین عنصر آرایه ها در JavaScript
ازآنجاییکه cars.length طول آرایه را بازیابی میکند و ازآنجاییکه آرایه ها از اندیس گذاری مبتنی بر صفر استفاده میکنند، شاخص آخرین طول آرایه منهای یک است.
<span class="token keyword">let</span> cars <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"bmw"</span><span class="token punctuation">,</span> <span class="token string">"volvo"</span><span class="token punctuation">,</span> <span class="token string">"honda"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> last <span class="token operator">=</span> cars<span class="token punctuation">[</span>cars<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>last<span class="token punctuation">)</span><span class="token punctuation">;</span>
خروجی به صورت زیر خواهد بود:
حلقه زدن روی آیتمهای آرایه
همچنین میتوانید در صورت نیاز به دسترسی همزمان به چندین عنصر از آرایه، روی یک آرایه در جاوا اسکریپت حلقه بزنید یا به اصطلاح آنها را پیشمایش کنید. برای این کار از متد forEach استفاده میکنیم که یک تابع برای هر عنصر در یک آرایه یک بار فراخوانی میکند.
<span class="token keyword">let</span> cars <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"bmw"</span><span class="token punctuation">,</span> <span class="token string">"volvo"</span><span class="token punctuation">,</span> <span class="token string">"honda"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
cars<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span>item<span class="token punctuation">,</span> index<span class="token punctuation">,</span> array<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&</span>gt<span class="token punctuation">;</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>item<span class="token punctuation">,</span> index<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
کد بالا نام خودروها و شاخصهای مربوط به آنها را روی کنسول نمایش میدهد.
متدهای آرایه در جاوا اسکریپت
اکنونکه درباره ایجاد و دسترسی به آرایه ها صحبت کردیم، در این بخش متدهای مختلف آرایه ها در جاوا اسکریپت را پوشش خواهیم داد. چندین متد داخلی برای استفاده در آرایه ها وجود دارد و ما به چند مورد از رایجترین آنها خواهیم پرداخت.
متد toString در آرایه های javascript
متد toString یک رشته مربوط به عدد را برمیگرداند. تنها پارامتری که میگیرد شاخص پایه است.
کد بالا هر آیتم در آرایه را به رشته باینری متناظر خود تبدیل کرد. خروجی در زیر نشان داده شده است:
متد Push در آرایه ها
متد پوش برای اضافه کردن عناصر به یک آرایه موجود استفاده میشود. متد push آرایه را جهش میدهد.
<span class="token keyword">let</span> cars <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"bmw"</span><span class="token punctuation">,</span> <span class="token string">"volvo"</span><span class="token punctuation">,</span> <span class="token string">"honda"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
cars<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">"Audi"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>cars<span class="token punctuation">)</span><span class="token punctuation">;</span>
عنصر آرایه جدید Audi در انتهای آرایه اضافه میشود. خروجی مانند زیر خواهد بود:
متد Unshift در آرایه های جاوا اسکریپت
این متد برای افزودن عناصر به جلوی آرایه استفاده میشود و شاخص هر عنصر را یک عدد افزایش میدهد.
<span class="token keyword">let</span> cars <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"bmw"</span><span class="token punctuation">,</span> <span class="token string">"volvo"</span><span class="token punctuation">,</span> <span class="token string">"honda"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
cars<span class="token punctuation">.</span><span class="token function">unshift</span><span class="token punctuation">(</span><span class="token string">"Toyota"</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>cars<span class="token punctuation">)</span><span class="token punctuation">;</span>
آرایه به روز شده بهصورت زیر خواهد بود:
متد Pop در آرایه های جاوا اسکریپت
از این متد برای بیرون آوردن آخرین عنصر یا حذف کردن از آرایه استفاده میشود.
<span class="token keyword">let</span> cars <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"bmw"</span><span class="token punctuation">,</span> <span class="token string">"volvo"</span><span class="token punctuation">,</span> <span class="token string">"honda"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
cars<span class="token punctuation">.</span><span class="token function">pop</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>cars<span class="token punctuation">)</span><span class="token punctuation">;</span>
طبق منطق بالا، آخرین عنصر <span class="token string">honda</span>
از آرایه حذف میشود. خروجی به صورت زیر خواهد بود.
متد Shift
این متد برعکس unshift است و اولین عنصر آرایه در جاوا اسکریپت را حذف میکند. این روش همه عناصر را جابجا میکند و شاخصهای هر عنصر را یکبار کاهش میدهد.
<span class="token keyword">let</span> cars <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"bmw"</span><span class="token punctuation">,</span> <span class="token string">"volvo"</span><span class="token punctuation">,</span> <span class="token string">"honda"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
cars<span class="token punctuation">.</span><span class="token function">shift</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>cars<span class="token punctuation">)</span><span class="token punctuation">;</span>
کد بالا باید آرایه اصلی ما را با سه عنصر برگرداند.
متد Slice در جاوا اسکریپت
متد slice آرایه را برش میدهد و یک کپی کم از بخشی از یک آرایه را به یک شی آرایه جدید برمیگرداند. این در دو پارامتر اعمال میشود: شروع و پایان. آرایه از شاخص مشخصشده بهعنوان شروع تا نمایه پایان بریده میشود (شاخص یا اندیس پایان حذف نمیشود) و آرایه اصلی تغییر نخواهد کرد.
اگر پارامتر پایان نامشخص باشد، کل آرایه از اندیس شروع بریده میشود.
<span class="token keyword">let</span> cars <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"Toyota"</span><span class="token punctuation">,</span> <span class="token string">"bmw"</span><span class="token punctuation">,</span> <span class="token string">"volvo"</span><span class="token punctuation">,</span> <span class="token string">"honda"</span><span class="token punctuation">,</span><span class="token string">"Audi"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> cars2 <span class="token operator">=</span> cars<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>cars2<span class="token punctuation">)</span><span class="token punctuation">;</span>
خروجی این قطعه کد به صورت زیر خواهد بود.
این بخش از کد را در نظر بگیرید:
<span class="token keyword">let</span> cars <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"Toyota"</span><span class="token punctuation">,</span> <span class="token string">"bmw"</span><span class="token punctuation">,</span> <span class="token string">"volvo"</span><span class="token punctuation">,</span> <span class="token string">"honda"</span><span class="token punctuation">,</span><span class="token string">"Audi"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> cars2 <span class="token operator">=</span> cars<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>cars2<span class="token punctuation">)</span><span class="token punctuation">;</span>
ازآنجاییکه پارامتر پایان حذف میشود، عنصر آرایه در شاخص چهار حذف میشود. خروجی در زیر نشان داده شده است:
متد Concat در جاوا اسکریپت
متد concat برای ادغام دو یا چند آرایه در یک آرایه واحد استفاده میشود.
<span class="token keyword">let</span> cars <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"bmw"</span><span class="token punctuation">,</span> <span class="token string">"volvo"</span><span class="token punctuation">,</span> <span class="token string">"honda"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> bikes <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"yamaha"</span><span class="token punctuation">,</span> <span class="token string">"suzuki"</span><span class="token punctuation">,</span> <span class="token string">"royal enfield"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> vehicles <span class="token operator">=</span> cars<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>bikes<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>vehicles<span class="token punctuation">)</span><span class="token punctuation">;</span>
در بالا آرایه دوچرخههای با ماشینهای ادغام میشوند و به خروجی زیر میرسند:
متد Sort () در جاوا اسکریپت
همانطور که از نام آن پیداست، از این متد برای مرتبسازی آرایه در جاوا اسکریپت استفاده میشود. بهطور پیشفرض، آرایه را به ترتیب صعودی مرتب میکند.
<span class="token keyword">let</span> list_Number <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">6</span><span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">8</span><span class="token punctuation">,</span><span class="token number">7</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
list_Number<span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>list_Number<span class="token punctuation">)</span>
خروجی به شکل زیر خواهد بود:
متد Reverse
برای معکوس کردن ترتیب عناصر در یک آرایه، از متد ()reverse استفاده میکنیم. هنگامیکه معکوس بعد از متد sort() استفاده میشود، مقادیر را به ترتیب نزولی دریافت میکنید.
<span class="token keyword">let</span> list_Number <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">6</span><span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">8</span><span class="token punctuation">,</span><span class="token number">7</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
list_Number<span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
list_Number<span class="token punctuation">.</span><span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>list_Number<span class="token punctuation">)</span>
خروجی به شکل زیر خواهد بود:
Map, Reduce and Filter
برخی از قدرتمندترین متدهای آرایه ها در جاوا اسکریپت مپ، ردیوس و فیلتر هستند که در زیر به آنها اشاره میکنیم.
متد map در جاوا اسکریپت
متد map در جاوا اسکریپت برای ایجاد یک آرایه جدید از آرایه موجود با اعمال یک تابع برای هر یک از عناصر آرایه اول استفاده میشود. آرایه اصلی را تغییر نمیدهد.
<span class="token keyword">let</span> num1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> num2 <span class="token operator">=</span> num1<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>double<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">double</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> value <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num2<span class="token punctuation">)</span>
در اینجا، متد مپ تضمین میکند که تابع double برای هر عنصر در آرایه اعمال میشود، بنابراین عناصر را در دو ضرب میکند و آنها را در آرایه جدید num2 ذخیره میکند.
متد filter در جاوا اسکریپت
متد filter هر عنصر را از یک آرایه میگیرد و یک دستور شرطی را در مقابل آن اعمال میکند. اگر این شرط درست باشد، عنصر به آرایه خروجی پوش داده میشود. اگر شرط نادرست باشد، عنصر به آرایه خروجی پوش داده نمیشود.
<span class="token keyword">let</span> num1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> num3 <span class="token operator">=</span> num1<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>comp<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">comp</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> value <span class="token operator">&</span>gt<span class="token punctuation">;</span> <span class="token number">4</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num3<span class="token punctuation">)</span>
همه عناصر آرایه بزرگتر از چهار به آرایه خروجی num3 پوش داده میشوند.
متد reduce در JavaScript
متد reduce آرایهای از مقادیر را فقط به یک مقدار کاهش میدهد. تابع کاهش بر روی هر عنصر آرایه اجرا میشود تا مقدار خروجی واحد را به دست آورد. این روش آرایه اصلی را کاهش نمیدهد.
<span class="token keyword">let</span> num1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> num4 <span class="token operator">=</span> num1<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span>sum<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token parameter">total<span class="token punctuation">,</span> value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> total <span class="token operator">+</span> value<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num4<span class="token punctuation">)</span>
مجموع آرایه محاسبهشده و به یک مقدار کاهش مییابد و این مقدار در آرایه خروجی num4 ذخیره میشود.
کلام پایانی
اگرچه این مقاله مقدمهای اساسی برای آرایه جاوا اسکریپت ارائه کرده است، اما برای آشنایی ابتدایی با آرایه در جاوا اسکریپت یک منبع کافی و مناسب است. آرایه ها یکی از مهمترین عناصر هر زبان برنامهنویسی هستند و آشنایی با آنها و نحوه کار کردن با آنها از مفاهیم پایه است که باید یاد بگیرید. اگر سؤال یا بازخوردی دارید، در قسمت نظرات با ما در میان بگذارید.
مکتب خونه مرجع کامل و جامع برای آموزش برنامه نویسی، مخوصا آموزش جاوا اسکریپت است. در این پلتفرم انواع دورههای آموزش جاوا اکسریپت و فریمورکهای آن موجود است که میتوانید از آنها بهره ببرید.