آرایه چند بعدی در جاوا اسکریپت – توضیح به زبان ساده + مثال و کد

آرایه چند بعدی در جاوا اسکریپت نوعی ساختار داده‌ محسوب می‌شود که امکان سازمان‌دهی داده‌ها را به شکل ماتریس مانند فراهم می‌کند. برخلاف آرایه‌های تک‌بعدی که از یک «شاخص» (اندیس | Index) برای دسترسی به عناصر خود استفاده می‌کنند، آرایه‌های چند بعدی از چندین اندیس برای دسترسی به عناصر خود بهره می‌برند. این نوع آرایه‌ها در جاوا اسکریپت نمایش الگوهای داده پیچیده را ممکن ساخته و آن‌ها را برای کارهایی مانند ذخیره‌سازی داده‌های جدولی، ماتریس‌ها و سایر اطلاعات ساختاریافته ارزشمند می‌سازند.

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

آرایه چند بعدی در جاوا اسکریپت چیست؟

آرایه چند بعدی در جاوا اسکریپت به آرایه‌ای اطلاق می‌شود که شامل یک یا چند آرایه تودرتو است. برخلاف آرایه معمولی که تک‌بعدی بوده و با استفاده از اندیسی واحد مانند arr[i]عناصر آن قابل‌ دسترسی هستند، آرایه چند بعدی از چندین اندیس برای دسترسی به عناصر استفاده می‌کند. به عنوان مثال، آرایه‌ای دوبعدی با استفاده از دو اندیس قابل‌دسترسی است: arr[i][j]. این الگو به ابعاد بالاتر نیز گسترش می‌یابد، مانند آرایه سه‌بعدی که با arr[i][j][k]نشان داده می‌شود.

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

در تصویر فوق «Row» به معنی سطر، «Column» به معنی ستون و «Array» به معنی آرایه است.

کاربرد آرایه چند بعدی در Javascript چیست؟

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

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

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

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

فیلم آموزش JavaScript ES6 جاوا اسکریپت در فرادرس

کلیک کنید

١. ساخت آرایه چند بعدی با Array Literal

ساده‌ترین رویکرد برای ایجاد آرایه چند بعدی در Javascript استفاده از «نمادگذاری تحت‌اللفظی آرایه» (Array Literal) است. این رویکرد مستلزم تعریف آرایه‌ای خواهد بود در آن عناصر این آرایه خودشان نوعی آرایه هستند. مثال زیر به درک این مفهوم بسیار کمک می‌کند.

٢. استفاده از سازنده آرایه

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

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

نحوه بازیابی عناصر آرایه چند بعدی چگونه است؟

برای بازیابی عناصر از آرایه چند بعدی، از نماد دو براکت مربعی «[]» طی فرایندی ساده استفاده می‌شود. براکت‌های مربعی اولیه ردیف یا سطر خاصی در آرایه بیرونی هدف قرار می‌دهند و جفت براکت‌های بعدی به عنصر موردنظر در آرایه داخلی واقع در آن اندیس خاص، برای بازیابی عنصر اشاره دارند. توجه به مثال زیر به درک این مفهوم بسیار کمک می‌کند:

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

• در مثال فوق data[0]اولین آرایه داخلی را در آرایه داده بازیابی می‌کند. در نتیجه، خروجی [20، 'Pranshu'، 'Lucknow']خواهد بود که عناصر موجود در اولین آرایه داخلی هستند.
• data[0][1]به عنصر دوم در اولین آرایه داخلی دسترسی دارد. اولین اندیس 0اولین آرایه داخلی را نشان می‌دهد و اندیس دوم 1مورد دوم را در آن آرایه انتخاب می‌کند که خروجی آن مقدار Pranshuخواهد بود.
• در مثال فوق همچنین data[2][1]عنصر دوم را از آرایه داخلی سوم بازیابی می‌کند. اندیس 2به آرایه داخلی سوم اشاره کرده و اندیس 1مورد یا عنصر دوم را در آن آرایه انتخاب می‌کند که خروجی Kartikeyaخواهد بود.

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

ویژگی های آرایه چند بعدی در جاوا اسکریپت

درک ویژگی‌های آرایه چند بعدی در جاوا اسکریپت بینش ارزشمندی را در مورد نحوه کار این آرایه‌ها به کاربر می‌دهد و بر همین اساس در زیر سه تا از مهم‌ترین ویژگی‌های این نوع آرایه در جاوا اسکریپت مورد بررسی قرار گرفته‌اند.

١. ویژگی طول یا اندازه آرایه: lengthبرای بازیابی طول آرایه مدنظر به کار می‌رود که مثال زیر نحوه استفاده از این ویژگی را بیان می‌کند:

٢. ویژگی typeof: عملگر typeofنوع داده آرایه داده شده را بازمی‌گرداند که مثال مربوط به آن به صورت زیر است:

٣. ویژگیisArray(): تابع isArray()نوع بازگشتی بولی را ارائه می‌دهد و تعیین می‌کند که آیا متغیر ارائه شده نوعی آرایه است یا خیر. مثال زیر برای درک این مفهوم است:

در اصل، این ویژگی‌ها بررسی و دست‌کاری آرایه‌های چند بعدی در جاوا اسکریپت را تسهیل کرده و امکان مدیریت مؤثر داده‌ها و تعیین نوع را فراهم می‌کنند.

افزودن عنصر به آرایه داخلی چند بعدی

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

خروجی مثال بالا به صورت زیر است:

[
    [20, 'Pranshu', 'Lucknow'],
    [22, 'Kartikeya', 'Lakhimpur'],
    [18, 'Pranav', 'Mathura']
]

همچنین برای افزودن عناصر به آرایه داخلی با دو روش نام برده باید مطابق دو مثال زیر عمل کرد.

مثال ١. مثال زیر استفاده از نماد اندیس برای افزودن عنصر به آرایه چند بعدی در جاوا اسکریپت را نشان می‌دهد:

خروجی مثال فوق به صورت زیر است:

[
    [20, 'Pranshu', 'Lucknow'],
    [18, 'Pranav', 'Mathura' , 'Day-Scholar']
]

مثال ٢. مثال زیر نحوه استفاده از متدpush()برای افزودن عنصر به آرایه چند بعدی در Javascript را نشان می‌دهد:

خروجی مثال فوق به صورت زیر است:

[
    [20, 'Pranshu', 'Lucknow'],
    [18, 'Pranav', 'Mathura' , 'Day-Scholar']
]

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

فیلم آموزش پروژه محور جاوا اسکریپت – پیاده سازی سبد خرید فروشگاهی با JavaScript + گواهینامه در فرادرس

کلیک کنید

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

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

خروجی مثال بالا به صورت زیر است:

[[20, 'Pranshu', 'Lucknow']]

برای حذف عنصر از آرایه داخلی با استفاده از متد popباید به صورت زیر عمل کرد:

خروجی مثال فوق به صورت زیر است:

[[20, 'Pranshu', 'Lucknow'], [18, 'Pranav']];

با استفاده از متدpop، می‌توان عناصر را از آرایه بیرونی یا آرایه‌های داخلی به طور مؤثر حذف کرد و این کار اصلاح محتوای آرایه چند بعدی در جاوا اسکریپت را تسهیل می‌کند.

استفاده از متد splice برای حذف عنصر در اندیسی مشخص

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

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

[[20, 'Pranshu', 'Lucknow'], [18, 'Pranav', 'Mathura']]

متد splicکنترل دقیقی بر حذف عنصر را امکان‌پذیر کرده و به مدیریت کارآمد محتوای آرایه چند بعدی کمک می‌کند.

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

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

فیلم مجموعه آموزش جاوا اسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

• push()‎: این متد عنصری را به انتهای آرایه اضافه می‌کند و متعاقباً طول آن را ١ واحد افزایش می‌دهد.
• pop()‎: متد pop()‎آخرین عنصر را از آرایه حذف می‌کند که منجر به کاهش طول آرایه به اندازه ١ واحد می‌شود.
• sort(): بسته به نوع محتوای آرایه، این متد عناصر را به صورت حروف الفبا یا عددی مرتب می‌کند. ترتیب آرایه برای همیشه با این عملیات مرتب‌سازی تغییر می‌کند.
• reverse(): با استفاده از متد reverse()، عناصر آرایه معکوس می‌شوند و این متد جای آخرین عنصر را با جای عنصر اول عوض می‌کند و به همین ترتیب نوعی چرخش آرایه صورت خواهد گرفت.
• indexOf(): این متد به تعیین محل وقوع اولیه عنصری خاص در آرایه کمک می‌کند. اگر عنصر موجود نباشد، -1را بازمی‌گرداند.
• shift(): با استفاده از متد shift()، اولین عنصر آرایه حذف می‌شود و عناصر باقی‌مانده به سمت ابتدای آرایه منتقل می‌شوند.
• unshift(): متد unshift()تمام عناصر آرایه را به سمت راست منتقل کرده و هم‌زمان عنصری جدید را در اندیس صفر وارد می‌کند.
• splic(): این متد همه‌کاره، اضافه یا حذف هر تعداد عنصر در آرایه را امکان‌پذیر می‌کند.

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

پیمایش آرایه چند بعدی بیرونی

برای پیمایش آرایه بیرونی در آرایه چند بعدی می‌توان از متد forEach در جاوا اسکریپت انجام داد. مثال زیر نحوه استفاده از این متد برای پیمایش آرایه چند بعدی را نشان می‌دهد:

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

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

20
Pranshu
18
Sameer

پیمایش آرایه چند بعدی داخلی

متد forEach()به عنوان یکی از متدهای آرایه در جاوا اسکریپت همچنین می‌تواند برای پیمایش آرایه داخلی در آرایه‌ای چند بعدی استفاده شود که مثال زیر نحوه استفاده از آن را بیان می‌کند:

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

20
Pranshu
18
Sameer

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

پیمایش آرایه چند بعدی در جاوا اسکریپت با حلقه FOR

یکی دیگر از راه‌های پیمایش آرایه چند بعدی در جاوا اسکریپت استفاده از حلقه Forاست که مثال زیر شیوه استفاده از آن را نشان می‌دهد:

در رویکرد بالا، حلقهForبرای پیمایش آرایه بیرونی استفاده می‌شود. در داخل این حلقه، طول هر آرایه داخلی (innerArrayLength) با استفاده از ویژگی lengthآن تعیین می‌شود و به دنبال آن از یک حلقه Forدیگر برای پیمایش عناصر هر آرایه داخلی استفاده خواهد شد که خروجی آن به صورت زیر است:

20
Pranshu
18
Sameer

با استفاده از رویکرد بالا، می‌توان به صورت مؤثر عناصر داخل آرایه را پیمایش کرد.

سخن پایانی

آرایه چند بعدی در جاوا اسکریپت به آرایه‌ای گفته می‌شود که شامل یک یا چند آرایه تودرتو است. در حالی که می‌توان به اعضای آرایه یک‌بعدی با استفاده از اندیسی واحد، مانند arr[i]دسترسی داشت، دسترسی به عناصر آرایه چند بعدی نیاز به چندین اندیس دارد که برای مثال برای آرایه دوبعدی باید از عبارتی مانند arr[i][j]استفاده کرد. این ساختار به آرایه‌های بزرگتر گسترش می‌یابد. در مطلب فوق از مجله فرادرس اطلاعات نسبتاً کاملی در مورد آرایه‌های چند بعدی در جاوا اسکریپت ذکر شد که عمده مطالب بالا را می‌توان در زیر خلاصه کرد:

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

فیلم مجموعه آموزش طراحی و برنامه ‌نویسی سایت – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

علاوه بر این در مطلب فوق، ما ویژگی‌ها و متدهای مختلفی را که برای آرایه‌های چند بعدی در جاوا اسکریپت قابل استفاده هستند، مورد بررسی قرار دادیم. همچنین ویژگی و متدهایی مانند دسترسی به عناصر، افزودن و حذف عناصر و استفاده از متدهایی مانند «push()» و «pop()‎» ،«splice()‎»برای دست‌کاری آرایه‌های چند بعدی در مطلب فوق مورد بحث واقع شدند. درک آرایه‌های چند بعدی در Jvascript توسعه‌دهندگان را قادر می‌سازد تا ساختارهای داده پیچیده را به طور کارآمد سازمان‌دهی و مدیریت کنند و این کار توانایی آن‌ها را برای کار با روابط پیچیده داده افزایش می‌دهد.