چطور در جاوا اسکریپت با آرایه‌ها کار کنم؟ 2025 عصر برنامه نویسی

توحید صراف زاده
2025-02-19
طراحی و توسعه وب

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

🔑 ویژگی‌های کلیدی آرایه‌ها در جاوااسکریپت:

📏 قابلیت تغییر اندازه: آرایه‌ها در جاوااسکریپت می‌توانند در هر لحظه به‌راحتی تغییر اندازه داده شوند.
🎯 دسترسی به عناصر با اندیس‌ها: هر عنصر در یک آرایه به‌راحتی از طریق اندیس (index) قابل دسترسی است.
🔄 تفاوت کپی‌های سطحی و کپی‌های عمیق: کپی‌های سطحی فقط آدرس داده‌ها را کپی می‌کنند، در حالی که کپی‌های عمیق داده‌های واقعی را کپی می‌کنند.

🚀 چرا باید با آرایه‌ها آشنا شوید؟

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

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

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

🚫 دسترس‌پذیری اندیس‌ها

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

arr[0]; // دسترسی صحیح به اولین عنصر آرایه

1 2	arr[0]; // دسترسی صحیح به اولین عنصر آرایه

🔍 دسترسی به اندیس‌ها و تفاوت با ویژگی‌های آرایه

در جاوااسکریپت، عناصر آرایه مشابه ویژگی‌های شیء عمل می‌کنند. به‌عنوان مثال، روش‌هایی مانند toString() بخشی از ویژگی‌های داخلی آرایه هستند. با این حال، در صورتی که بخواهید به صورت دستی یک اندیس اشتباه را به آرایه اختصاص دهید، جاوااسکریپت به‌جای تغییر داده‌های آرایه، یک ویژگی جدید به آن اضافه می‌کند:

arr["myIndex"] = "someValue"; // اضافه کردن ویژگی جدید به شیء آرایه

1 2	arr["myIndex"] = "someValue"; // اضافه کردن ویژگی جدید به شیء آرایه

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

⚖️ رابطه ویژگی `length` و اندیس‌ها

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

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

const fruits = [];
fruits.push("banana", "apple", "peach");
console.log(fruits.length); // 3

const fruits = [];

fruits.push("banana", "apple", "peach");

console.log(fruits.length); // 3

🆙 اسلات‌های خالی و تغییرات طول آرایه

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

fruits[5] = "mango";
console.log(fruits[5]); // 'mango'
console.log(fruits.length); // 6

fruits[5] = "mango";

console.log(fruits[5]); // 'mango'

console.log(fruits.length); // 6

در این مثال، آرایه به طول ۶ افزایش می‌یابد اما هیچ داده‌ای در اسلات‌های خالی قرار نمی‌گیرد.

🧩 رفتار متدهای مختلف با آرایه‌های پراکنده

آرایه‌های پراکنده (یعنی آرایه‌هایی که دارای اسلات‌های خالی هستند) هنگام استفاده از متدهای مختلف جاوااسکریپت رفتارهای متفاوتی دارند. به‌طور کلی، برخی متدها مانند forEach این اسلات‌های خالی را نادیده می‌گیرند:

const fruits = ["banana", , "peach"];
fruits.forEach(fruit =&gt; console.log(fruit)); // فقط 'banana' و 'peach' چاپ می‌شود

const fruits = ["banana", , "peach"];

fruits.forEach(fruit => console.log(fruit)); // فقط 'banana' و 'peach' چاپ می‌شود

در مقابل، متدهایی مانند concat() و copyWithin() این اسلات‌ها را حفظ می‌کنند:

const fruits = ["banana", , "peach"];
const newFruits = fruits.concat("apple");
console.log(newFruits); // ['banana', &lt;1 empty slot&gt;, 'peach', 'apple']

const fruits = ["banana", , "peach"];

const newFruits = fruits.concat("apple");

console.log(newFruits); // ['banana', <1 empty slot>, 'peach', 'apple']

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

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

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

🧮 ویژگی‌های اندیس‌های آرایه

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

arr.0; // خطای سینتکس

1 2	arr.0; // خطای سینتکس

در عوض، برای دسترسی به اندیس‌ها باید از نگارش براکت استفاده کرد:

arr[0]; // دسترسی صحیح به اولین عنصر

1 2	arr[0]; // دسترسی صحیح به اولین عنصر

همچنین، جاوااسکریپت به‌طور ضمنی می‌تواند اندیس‌ها را به رشته تبدیل کند. برای مثال، '2' و '02' به دو جایگاه مختلف در آرایه اشاره خواهند کرد، حتی اگر از نظر ظاهری مشابه به نظر برسند:

const years = ["1990", "2000", "2010"];
console.log(years["2"] !== years["02"]); // true

const years = ["1990", "2000", "2010"];

console.log(years["2"] !== years["02"]); // true

در اینجا، years['2'] به‌عنوان اندیس معتبر در نظر گرفته می‌شود، اما years['02'] یک ویژگی دلخواه از شیء آرایه است که در هنگام پیمایش نادیده گرفته می‌شود.

📏 رابطه ویژگی `length` و اندیس‌های عددی آرایه

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

const fruits = [];
fruits.push("banana", "apple", "peach");
console.log(fruits.length); // 3

const fruits = [];

fruits.push("banana", "apple", "peach");

console.log(fruits.length); // 3

اگر اندیسی بزرگتر از طول فعلی آرایه به آن نسبت داده شود، جاوااسکریپت ویژگی length را به‌طور متناسب به‌روزرسانی می‌کند و فضای خالی در آرایه ایجاد می‌کند:

fruits[5] = "mango";
console.log(fruits[5]); // 'mango'
console.log(fruits.length); // 6

fruits[5] = "mango";

console.log(fruits[5]); // 'mango'

console.log(fruits.length); // 6

در این حالت، حتی اگر عنصر جدیدی به آرایه اضافه شده باشد، اسلات‌های خالی در آرایه به‌عنوان undefined شناخته می‌شوند.

🚧 اسلات‌های خالی در آرایه‌ها

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

const fruits = ["banana", , "peach"];
fruits.forEach(fruit =&gt; console.log(fruit)); // فقط 'banana' و 'peach' چاپ می‌شود

const fruits = ["banana", , "peach"];

fruits.forEach(fruit => console.log(fruit)); // فقط 'banana' و 'peach' چاپ می‌شود

در مقابل، متدهایی مانند concat() اسلات‌های خالی را حفظ می‌کنند:

const fruits = ["banana", , "peach"];
const newFruits = fruits.concat("apple");
console.log(newFruits); // ['banana', &lt;1 empty slot&gt;, 'peach', 'apple']

const fruits = ["banana", , "peach"];

const newFruits = fruits.concat("apple");

console.log(newFruits); // ['banana', <1 empty slot>, 'peach', 'apple']

🔄 کپی کردن و تغییر آرایه‌ها

در جاوااسکریپت، متدهایی که به‌طور سطحی (shallow) عمل می‌کنند، آرایه‌ها را به‌طور جدید می‌سازند، اما ارجاع به اشیاء و مقادیر آرایه اصلی را حفظ می‌کنند. به‌عنوان مثال، متد slice() آرایه جدیدی ایجاد می‌کند:

const fruits = ["banana", "apple", "peach"];
const newFruits = fruits.slice();
console.log(newFruits); // ['banana', 'apple', 'peach']

const fruits = ["banana", "apple", "peach"];

const newFruits = fruits.slice();

console.log(newFruits); // ['banana', 'apple', 'peach']

⚙️ متدهای تغییر دهنده و غیر تغییر دهنده

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

متد تغییر دهنده	جایگزین غیر تغییر دهنده
`copyWithin()`	هیچ روش تک‌عضوی جایگزینی ندارد
`fill()`	هیچ روش تک‌عضوی جایگزینی ندارد
`pop()`	`slice(0, -1)`
`push(v1, v2)`	`concat([v1, v2])`
`reverse()`	`toReversed()`
`shift()`	`slice(1)`
`sort()`	`toSorted()`
`splice()`	`toSpliced()`
`unshift(v1, v2)`	`toSpliced(0, 0, v1, v2)`

🔁 متدهای بازگشتی و امضای آن‌ها

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

element: عنصر جاری آرایه
index: اندیس عنصر جاری
array: خود آرایه‌ای که متد بر روی آن فراخوانی شده است

این متدها معمولاً یک مقدار را از هر عنصر پردازش‌شده باز می‌گردانند که می‌تواند نتیجه نهایی متد باشد.

در اینجا نسخه‌ی زیبا شده با آیکون‌ها و طراحی جذاب برای متن مورد نظر شما آورده شده است:

🔄 روش‌های تکراری در آرایه‌ها

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

function method(callbackFn, thisArg) {
  const length = this.length;
  for (let i = 0; i &lt; length; i++) {
    if (i in this) {
      const result = callbackFn.call(thisArg, this[i], i, this);
      // انجام کاری با نتیجه؛ ممکن است زودتر بازگشت داده شود
    }
  }
}

function method(callbackFn, thisArg) {

const length = this.length;

for (let i = 0; i < length; i++) {

if (i in this) {

const result = callbackFn.call(thisArg, this[i], i, this);

// انجام کاری با نتیجه؛ ممکن است زودتر بازگشت داده شود

}

نکات مهم:

همه متدها از آزمایش i in this استفاده نمی‌کنند. به عنوان مثال، متدهای find(), findIndex(), findLast(), findLastIndex() از این آزمایش استفاده نمی‌کنند.
طول آرایه قبل از شروع حلقه ذخیره می‌شود که به این معناست که درج و حذف مقادیر در حین پیمایش ممکن است بر روی نتیجه‌ی نهایی تاثیرگذار باشد.
برخی متدها مانند reduceRight(), findLast(), و findLastIndex() به ترتیب نزولی ایندکس‌ها را پیمایش می‌کنند.
متدهای reduce() و reduceRight() امضای متفاوتی دارند و همیشه از اولین یا آخرین عنصر شروع نمی‌کنند.

📚 متدهای عمومی آرایه‌ها

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

نمونه کد:

const arrayLike = {
  0: "a",
  1: "b",
  length: 2,
};
console.log(Array.prototype.join.call(arrayLike, "+")); // 'a+b'

const arrayLike = {

0: "a",

1: "b",

length: 2,

};

console.log(Array.prototype.join.call(arrayLike, "+")); // 'a+b'

🔢 نرمال‌سازی ویژگی `length`

ویژگی length همیشه به یک عدد صحیح تبدیل می‌شود و محدود به بازه 0 تا 253-1 است. حتی اگر مقدار length به NaN تنظیم شود، به‌طور خودکار به 0 تبدیل می‌شود.

مثال:

Array.prototype.flat.call({}); // []

1 2	Array.prototype.flat.call({}); // []

🧩 اشیاء شبیه آرایه (Array-like objects)

اشیاء شبیه آرایه به اشیائی اطلاق می‌شود که ویژگی length دارند و شامل ایندکس‌هایی از 0 تا length - 1 هستند. بسیاری از اشیاء DOM مانند NodeList و HTMLCollection شبیه به آرایه‌ها هستند. همچنین، شیء arguments نیز شبیه به آرایه محسوب می‌شود و می‌توانید از متدهای آرایه بر روی این اشیاء استفاده کنید.

مثال:

function f() {
  console.log(Array.prototype.join.call(arguments, "+"));
}

f("a", "b"); // 'a+b'

function f() {

console.log(Array.prototype.join.call(arguments, "+"));

}

f("a", "b"); // 'a+b'

🔨 سازنده و ویژگی‌های استاتیک آرایه‌ها

Array(): یک شیء جدید آرایه ایجاد می‌کند.

ویژگی‌های استاتیک:

Array[Symbol.species]: سازنده آرایه را باز می‌گرداند.

متدهای استاتیک:

Array.from(): یک آرایه جدید از یک شیء قابل پیمایش یا شبیه آرایه ایجاد می‌کند.
Array.fromAsync(): یک آرایه جدید از یک شیء قابل پیمایش Async، قابل پیمایش یا شبیه آرایه ایجاد می‌کند.
Array.isArray(): بررسی می‌کند که آیا یک شیء آرایه است یا خیر و مقدار true یا false را باز می‌گرداند.
Array.of(): یک آرایه جدید با تعداد متغیر از آرگومان‌ها ایجاد می‌کند، بدون توجه به تعداد یا نوع آرگومان‌ها.

🌟 ویژگی‌های نمونه‌ای (Instance Properties) آرایه‌ها

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

🔑 ویژگی‌های اصلی شامل:

Array.prototype.constructor: تابعی که آرایه را می‌سازد. برای تمامی آرایه‌ها این ویژگی به‌طور پیش‌فرض به Array اشاره می‌کند.
Array.prototype[Symbol.unscopables]: شامل ویژگی‌هایی است که برای جلوگیری از تاثیر در with قبل از ES2015 در ECMAScript تعریف شده‌اند.
length: تعداد عناصر موجود در آرایه را مشخص می‌کند و یکی از مهم‌ترین ویژگی‌های آرایه‌ها است.

🚀 متدهای قدرتمند آرایه‌ها (Instance Methods)

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

Array.prototype.at(): 🔍 دسترسی به عناصر از ایندکس‌های منفی! این متد به شما امکان می‌دهد که از آخرین عنصر شروع کنید.
Array.prototype.concat(): ➕ ترکیب چندین آرایه به راحتی با این متد!
Array.prototype.copyWithin(): 🔁 کپی بخشی از آرایه در همان آرایه.
Array.prototype.entries(): 🔢 ایجاد یک شیء تکرارگر که جفت‌های کلید/مقدار را نمایش می‌دهد.
Array.prototype.every(): ✅ چک کردن این‌که آیا تمامی عناصر آرایه شرایط خاصی را رعایت می‌کنند.
Array.prototype.filter(): 🎯 فیلتر کردن آرایه برای نگه داشتن عناصری که با شرایط شما مطابقت دارند.
Array.prototype.find(): 🔍 پیدا کردن اولین عنصر که شرایط شما را برآورده می‌کند.
Array.prototype.findIndex(): 📍 گرفتن ایندکس اولین عنصری که مطابق با شرط است.
Array.prototype.map(): 🛠️ انجام تغییرات مشابه بر روی تمامی عناصر یک آرایه.
Array.prototype.reduce(): 🔄 کاهش تمامی عناصر آرایه به یک نتیجه واحد.

و این تنها آغاز ماجراست! آرایه‌ها و متدهای آن ابزارهایی قدرتمند برای بهینه‌سازی و تسهیل فرآیندهای برنامه‌نویسی هستند.

📖 بیشتر بخوانید:آموزش جاوااسکریپت (JavaScript)

🌟 عملیات رایج روی آرایه‌ها در جاوااسکریپت

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

توجه: اگر هنوز با مبانی آرایه‌ها آشنا نیستید، پیشنهاد می‌کنیم مقاله‌ی “JavaScript First Steps: Arrays” را مطالعه کنید.

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

در اینجا سه روش برای ایجاد یک آرایه جدید را می‌بینید:

// آرایه 'fruits' با استفاده از نوشتار نماد آرایه ایجاد شده است.
const fruits = ["Apple", "Banana"];
console.log(fruits.length);  // 2

// آرایه 'fruits2' با استفاده از سازنده‌ی Array() ایجاد شده است.
const fruits2 = new Array("Apple", "Banana");
console.log(fruits2.length);  // 2

// آرایه 'fruits3' با استفاده از String.prototype.split() ایجاد شده است.
const fruits3 = "Apple, Banana".split(", ");
console.log(fruits3.length);  // 2

// آرایه 'fruits' با استفاده از نوشتار نماد آرایه ایجاد شده است.

const fruits = ["Apple", "Banana"];

console.log(fruits.length); // 2

// آرایه 'fruits2' با استفاده از سازنده‌ی Array() ایجاد شده است.

const fruits2 = new Array("Apple", "Banana");

console.log(fruits2.length); // 2

// آرایه 'fruits3' با استفاده از String.prototype.split() ایجاد شده است.

const fruits3 = "Apple, Banana".split(", ");

console.log(fruits3.length); // 2

🔹 ایجاد یک رشته از یک آرایه

با استفاده از متد join() می‌توانیم آرایه fruits را به یک رشته تبدیل کنیم:

const fruits = ["Apple", "Banana"];
const fruitsString = fruits.join(", ");
console.log(fruitsString);  // "Apple, Banana"

const fruits = ["Apple", "Banana"];

const fruitsString = fruits.join(", ");

console.log(fruitsString); // "Apple, Banana"

🔹 دسترسی به یک آیتم از آرایه با استفاده از ایندکس

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

const fruits = ["Apple", "Banana"];

// ایندکس اولین عنصر همیشه 0 است.
console.log(fruits[0]);  // Apple

// ایندکس دومین عنصر همیشه 1 است.
console.log(fruits[1]);  // Banana

// ایندکس آخرین عنصر همیشه یک کمتر از طول آرایه است.
console.log(fruits[fruits.length - 1]);  // Banana

const fruits = ["Apple", "Banana"];

// ایندکس اولین عنصر همیشه 0 است.

console.log(fruits[0]); // Apple

// ایندکس دومین عنصر همیشه 1 است.

console.log(fruits[1]); // Banana

// ایندکس آخرین عنصر همیشه یک کمتر از طول آرایه است.

console.log(fruits[fruits.length - 1]); // Banana

🔹 پیدا کردن ایندکس یک آیتم در آرایه

با متد indexOf() می‌توانیم ایندکس یک آیتم را پیدا کنیم:

const fruits = ["Apple", "Banana"];
console.log(fruits.indexOf("Banana"));  // 1

1 2	const fruits = ["Apple", "Banana"]; console.log(fruits.indexOf("Banana")); // 1

🔹 بررسی وجود یک آیتم خاص در آرایه

برای بررسی اینکه آیا یک آیتم در آرایه وجود دارد یا نه، می‌توان از دو روش استفاده کرد:

const fruits = ["Apple", "Banana"];

console.log(fruits.includes("Banana"));  // true
console.log(fruits.includes("Cherry"));  // false

// با indexOf() می‌توان ایندکس را بررسی کرد
console.log(fruits.indexOf("Banana") !== -1);  // true

const fruits = ["Apple", "Banana"];

console.log(fruits.includes("Banana")); // true

console.log(fruits.includes("Cherry")); // false

// با indexOf() می‌توان ایندکس را بررسی کرد

console.log(fruits.indexOf("Banana") !== -1); // true

🔹 اضافه کردن یک آیتم به انتهای آرایه

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

const fruits = ["Apple", "Banana"];
const newLength = fruits.push("Orange");
console.log(fruits);  // ["Apple", "Banana", "Orange"]
console.log(newLength);  // 3

const fruits = ["Apple", "Banana"];

const newLength = fruits.push("Orange");

console.log(fruits); // ["Apple", "Banana", "Orange"]

console.log(newLength); // 3

🔹 حذف آخرین آیتم از آرایه

برای حذف آخرین آیتم از آرایه، از متد pop() استفاده می‌کنیم:

const fruits = ["Apple", "Banana", "Orange"];
const removedItem = fruits.pop();
console.log(fruits);  // ["Apple", "Banana"]
console.log(removedItem);  // Orange

const fruits = ["Apple", "Banana", "Orange"];

const removedItem = fruits.pop();

console.log(fruits); // ["Apple", "Banana"]

console.log(removedItem); // Orange

🔹 حذف چند آیتم از انتهای آرایه

در اینجا با استفاده از متد splice() می‌توانیم چند آیتم را از انتهای آرایه حذف کنیم:

const fruits = ["Apple", "Banana", "Strawberry", "Mango", "Cherry"];
const start = -3;
const removedItems = fruits.splice(start);
console.log(fruits);  // ["Apple", "Banana"]
console.log(removedItems);  // ["Strawberry", "Mango", "Cherry"]

const fruits = ["Apple", "Banana", "Strawberry", "Mango", "Cherry"];

const start = -3;

const removedItems = fruits.splice(start);

console.log(fruits); // ["Apple", "Banana"]

console.log(removedItems); // ["Strawberry", "Mango", "Cherry"]

🔹 کوتاه کردن آرایه به اولین N آیتم‌ها

با متد splice() می‌توان آرایه را به اولین ۲ آیتم کوتاه کرد:

const fruits = ["Apple", "Banana", "Strawberry", "Mango", "Cherry"];
const start = 2;
const removedItems = fruits.splice(start);
console.log(fruits);  // ["Apple", "Banana"]
console.log(removedItems);  // ["Strawberry", "Mango", "Cherry"]

const fruits = ["Apple", "Banana", "Strawberry", "Mango", "Cherry"];

const start = 2;

const removedItems = fruits.splice(start);

console.log(fruits); // ["Apple", "Banana"]

console.log(removedItems); // ["Strawberry", "Mango", "Cherry"]

🔹 حذف اولین آیتم از آرایه

برای حذف اولین آیتم از آرایه، از متد shift() استفاده می‌کنیم:

const fruits = ["Apple", "Banana"];
const removedItem = fruits.shift();
console.log(fruits);  // ["Banana"]
console.log(removedItem);  // Apple

const fruits = ["Apple", "Banana"];

const removedItem = fruits.shift();

console.log(fruits); // ["Banana"]

console.log(removedItem); // Apple

🔹 اضافه کردن یک آیتم جدید به اول آرایه

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

const fruits = ["Banana", "Mango"];
const newLength = fruits.unshift("Strawberry");
console.log(fruits);  // ["Strawberry", "Banana", "Mango"]
console.log(newLength);  // 3

const fruits = ["Banana", "Mango"];

const newLength = fruits.unshift("Strawberry");

console.log(fruits); // ["Strawberry", "Banana", "Mango"]

console.log(newLength); // 3

🔹 حذف چند آیتم با استفاده از ایندکس

با متد splice() می‌توانیم چند آیتم را با استفاده از ایندکس حذف کنیم:

const fruits = ["Apple", "Banana", "Strawberry", "Mango"];
const start = 1;
const deleteCount = 2;
const removedItems = fruits.splice(start, deleteCount);
console.log(fruits);  // ["Apple", "Mango"]
console.log(removedItems);  // ["Banana", "Strawberry"]

const fruits = ["Apple", "Banana", "Strawberry", "Mango"];

const start = 1;

const deleteCount = 2;

const removedItems = fruits.splice(start, deleteCount);

console.log(fruits); // ["Apple", "Mango"]

console.log(removedItems); // ["Banana", "Strawberry"]

🔹 جایگزینی چند آیتم در آرایه

برای جایگزینی آیتم‌های موجود در آرایه، می‌توانیم از splice() استفاده کنیم:

const fruits = ["Apple", "Banana", "Strawberry"];
const start = -2;
const deleteCount = 2;
const removedItems = fruits.splice(start, deleteCount, "Mango", "Cherry");
console.log(fruits);  // ["Apple", "Mango", "Cherry"]
console.log(removedItems);  // ["Banana", "Strawberry"]

const fruits = ["Apple", "Banana", "Strawberry"];

const start = -2;

const deleteCount = 2;

const removedItems = fruits.splice(start, deleteCount, "Mango", "Cherry");

console.log(fruits); // ["Apple", "Mango", "Cherry"]

console.log(removedItems); // ["Banana", "Strawberry"]

🔹 پیمایش بر روی آرایه

با استفاده از حلقه for...of می‌توانیم به راحتی بر روی آرایه پیمایش کنیم:

const fruits = ["Apple", "Mango", "Cherry"];
for (const fruit of fruits) {
  console.log(fruit);
}
// Apple
// Mango
// Cherry

const fruits = ["Apple", "Mango", "Cherry"];

for (const fruit of fruits) {

console.log(fruit);

}

// Apple

// Mango

// Cherry

🔹 فراخوانی یک تابع روی هر عنصر آرایه

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

const fruits = ["Apple", "Mango", "Cherry"];
fruits.forEach((item, index, array) =&gt; {
  console.log(item, index);
});
// Apple 0
// Mango 1
// Cherry 2

const fruits = ["Apple", "Mango", "Cherry"];

fruits.forEach((item, index, array) => {

console.log(item, index);

});

// Apple 0

// Mango 1

// Cherry 2

🔹 ادغام چند آرایه با یکدیگر

با استفاده از متد concat() می‌توانیم چند آرایه را به هم بچسبانیم:

const fruits = ["Apple", "Banana", "Strawberry"];
const moreFruits = ["Mango", "Cherry"];
const combinedFruits = fruits.concat(moreFruits);
console.log(combinedFruits);  // ["Apple", "Banana", "Strawberry", "Mango", "Cherry"]

const fruits = ["Apple", "Banana", "Strawberry"];

const moreFruits = ["Mango", "Cherry"];

const combinedFruits = fruits.concat(moreFruits);

console.log(combinedFruits); // ["Apple", "Banana", "Strawberry", "Mango", "Cherry"]

🔹 کپی کردن یک آرایه

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

const fruits = ["Strawberry", "Mango"];

// کپی با استفاده از سینتکس پخش
const fruitsCopy = [...fruits];

// کپی با استفاده از متد from()
const fruitsCopy2 = Array.from(fruits);

// کپی با استفاده از متد slice()
const fruitsCopy3 = fruits.slice();

const fruits = ["Strawberry", "Mango"];

// کپی با استفاده از سینتکس پخش

const fruitsCopy = [...fruits];

// کپی با استفاده از متد from()

const fruitsCopy2 = Array.from(fruits);

// کپی با استفاده از متد slice()

const fruitsCopy3 = fruits.slice();

🌐 آرایه‌ها در جاوا اسکریپت: دستکاری‌ها و نکات پیشرفته 🚀

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

1. 🔄 کپی عمیق آرایه‌ها با `structuredClone()`

یکی از چالش‌هایی که ممکن است هنگام کار با آرایه‌ها با آن مواجه شوید، کپی عمیق است. برای ایجاد یک کپی کامل از آرایه‌ها، متد جدید structuredClone() یک انتخاب عالی است. برخلاف روش‌های سنتی مثل JSON.parse() و JSON.stringify()، این متد از داده‌های پیچیده و اشیاء قابل انتقال به‌خوبی پشتیبانی می‌کند.

مثال:

const arr = [{a: 1}, {b: 2}];
const clone = structuredClone(arr);
console.log(arr === clone); // false (کپی عمیق است)

const arr = [{a: 1}, {b: 2}];

const clone = structuredClone(arr);

console.log(arr === clone); // false (کپی عمیق است)

2. ⚠️ مراجع آرایه‌ها: مراقب تغییرات باشید

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

مثال:

const fruits = ["Strawberry", "Mango"];
const fruitsAlias = fruits;
fruits.push("Apple");
console.log(fruits);       // ['Strawberry', 'Mango', 'Apple']
console.log(fruitsAlias);  // ['Strawberry', 'Mango', 'Apple']

const fruits = ["Strawberry", "Mango"];

const fruitsAlias = fruits;

fruits.push("Apple");

console.log(fruits); // ['Strawberry', 'Mango', 'Apple']

console.log(fruitsAlias); // ['Strawberry', 'Mango', 'Apple']

3. ♟️ آرایه‌های دو بعدی: مثال از تخته شطرنج

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

مثال:

const board = [
  ["R", "N", "B", "Q", "K", "B", "N", "R"],
  ["P", "P", "P", "P", "P", "P", "P", "P"],
  [" ", " ", " ", " ", " ", " ", " ", " "],
  [" ", " ", " ", " ", " ", " ", " ", " "],
  [" ", " ", " ", " ", " ", " ", " ", " "],
  [" ", " ", " ", " ", " ", " ", " ", " "],
  ["p", "p", "p", "p", "p", "p", "p", "p"],
  ["r", "n", "b", "q", "k", "b", "n", "r"],
];
board[4][4] = board[6][4];  // حرکت مهره
board[6][4] = " ";         // جایگزینی مکان قبلی با فضای خالی

const board = [

["R", "N", "B", "Q", "K", "B", "N", "R"],

["P", "P", "P", "P", "P", "P", "P", "P"],

[" ", " ", " ", " ", " ", " ", " ", " "],

["p", "p", "p", "p", "p", "p", "p", "p"],

["r", "n", "b", "q", "k", "b", "n", "r"],

];

board[4][4] = board[6][4]; // حرکت مهره

board[6][4] = " "; // جایگزینی مکان قبلی با فضای خالی

4. 📊 نمایش داده‌ها به‌صورت جدول با `console.table()`

برای نمایش داده‌ها به‌طور مرتب و شفاف، console.table() ابزاری قدرتمند است. این متد به‌ویژه زمانی که با آرایه‌های دو بعدی یا داده‌های ساختارمند کار می‌کنید، مفید واقع می‌شود.

مثال:

const values = [];
for (let x = 0; x &lt; 10; x++) {
  values.push([2 ** x, 2 * x ** 2]);
}
console.table(values);

const values = [];

for (let x = 0; x < 10; x++) {

values.push([2 ** x, 2 * x ** 2]);

}

console.table(values);

5. 🔍 تطابق دقیق با `RegExp`

برای انجام جستجوهای پیچیده در رشته‌ها، استفاده از RegExp یکی از بهترین روش‌هاست. متد RegExp.prototype.exec() به شما این امکان را می‌دهد تا نتایج دقیقی از تطابق‌ها و گروه‌های مختلف آن‌ها استخراج کنید.

مثال:

const myRe = /d(b+)(d)/i;
const execResult = myRe.exec("cdbBdbsbz");
console.log(execResult);  // خروجی: ["dbBd", "bB", "d"]

const myRe = /d(b+)(d)/i;

const execResult = myRe.exec("cdbBdbsbz");

console.log(execResult); // خروجی: ["dbBd", "bB", "d"]

6. 🔄 دستکاری آرایه‌ها در حین تکرار: احتیاط در تغییرات

هنگام استفاده از متدهایی مثل forEach() برای تکرار درون آرایه‌ها، باید از تغییرات همزمان بر روی آرایه‌ها اجتناب کنید. تغییرات در طول تکرار می‌تواند منجر به رفتارهای غیرمنتظره شود.

🔑 نکات کاربردی:

⚠️ مراقب تغییرات آرایه‌ها باشید: هنگام استفاده از متدهای تکرار مانند forEach()، تغییرات درون آرایه ممکن است نتایج غیرمنتظره‌ای داشته باشد.
🔄 برای کپی عمیق از structuredClone() استفاده کنید: این متد به‌ویژه برای کار با داده‌های پیچیده و آرایه‌های تو در تو انتخاب مناسبی است.
⚠️ به رفتار مرجعی آرایه‌ها دقت کنید: اگر نمی‌خواهید آرایه اصلی تغییر کند، از متدهایی مثل .slice() یا عملگر گسترش (...) برای ایجاد کپی استفاده کنید.

در نهایت، دستکاری آرایه‌ها در جاوا اسکریپت ابزار بسیار قدرتمندی است که با تسلط بر آن، می‌توانید کدهای بهینه‌تر و قدرتمندتری بنویسید. با یادگیری و به‌کارگیری این تکنیک‌ها، به راحتی می‌توانید پروژه‌های پیچیده‌تری را مدیریت و پیاده‌سازی کنید. 🌟

امیدوارم این مقاله به شما در بهبود تسلط بر آرایه‌ها و تکنیک‌های پیشرفته آن‌ها کمک کند. برای دریافت آموزش‌های بیشتر و اطلاعات تکمیلی، با بازگرد همراه باشید! 💡

سوالات متداول درباره آرایه‌ها در جاوا اسکریپت

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

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

let arr = [1, 2, 3];

1	let arr = [1, 2, 3];

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

console.log(arr[0]);  // 1

1	console.log(arr[0]); // 1

علامت `===` در آرایه‌ها در جاوا اسکریپت به چه معناست؟

علامت === در جاوا اسکریپت یک مقایسه دقیق (strict comparison) است. زمانی که دو آرایه را با استفاده از === مقایسه می‌کنید، جاوا اسکریپت بررسی می‌کند که آیا هر دو متغیر اشاره به همان مرجع حافظه دارند یا نه، نه اینکه محتویات آن‌ها یکسان باشد.

let arr1 = [1, 2, 3];

1	let arr1 = [1, 2, 3];

let arr2 = [1, 2, 3];

1	let arr2 = [1, 2, 3];

console.log(arr1 === arr2);  // false

1	console.log(arr1 === arr2); // false

چطور آرایه‌ها به صورت داخلی در جاوا اسکریپت کار می‌کنند؟

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

چطور می‌توان متدهای آرایه‌ها در جاوا اسکریپت را تمرین کرد؟

برای تمرین متدهای آرایه‌ها در جاوا اسکریپت، بهترین روش نوشتن نمونه کدها و آزمایش آنها است. می‌توانید از ابزارهای آنلاین مثل [JSFiddle](https://jsfiddle.net/), [CodePen](https://codepen.io/) یا حتی کنسول مرورگر برای آزمایش متدهای مختلف استفاده کنید.

بهترین روش‌های استفاده از آرایه‌ها در جاوا اسکریپت چیست؟

بهترین روش‌های استفاده از آرایه‌ها عبارتند از:

استفاده از متدهای داخلی به جای حلقه‌ها (مثل map(), filter(), reduce())
دقت به ایندکس‌ها برای دسترسی به عناصر آرایه
انتخاب روش‌های مناسب برای تغییر اندازه آرایه‌ها (مثل push(), pop(), shift(), unshift())

توحید صراف زاده

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

چگونه سیستم‌های آبیاری هوشمند به رشد بهتر گیاهان کمک می‌کنند؟

چگونه هوش مصنوعی و IoT با هم زندگی ما را هوشمندتر می‌کنند؟

چگونه با Flexbox چیدمان واکنش‌گرا بسازیم؟

با ما در تماس باشید.

start end

04/06 2025

طراحی و توسعه وب

چگونه با Flexbox چیدمان واکنش‌گرا بسازیم؟

publish on 2025-04-06

🎨 چیدمان وب در دنیای مدرن؛ از Float تا Flexbox و Grid 🧱✨ تا چند سال پیش، وقتی می‌خواستیم عناصر یک صفحه وب رو کنار هم بچینیم، تنها ابزارمون یه

by توحید صراف زاده

0 Comments

start end

04/06 2025

طراحی و توسعه وب

چگونه می‌توانیم از Web Storage (مثل LocalStorage و SessionStorage) استفاده کنیم؟

publish on 2025-04-06

🗂️ Web Storage در جاوااسکریپت؛ ذخیره‌سازی ساده، سریع و محلی! اگه تا حالا خواستید داده‌هایی مثل وضعیت ورود کاربر، آیتم‌های سبد خرید یا یه لیست کارها رو بدون اتصال به

by توحید صراف زاده

0 Comments

start end

04/05 2025

طراحی و توسعه وب

چگونه تجربه کاربری را به نقطه قوت برندمان تبدیل کنیم؟

publish on 2025-04-05

🎯 وب‌سایت شما برای مشتریان‌تان است، نه فقط برای برندتان! 🖥️✨ فرقی نمی‌کنه صاحب یه استارتاپ نوپا باشید یا مدیریت یه برند بزرگ رو به عهده داشته باشید—وقتی نوبت به

by توحید صراف زاده

0 Comments

start end

02/19 2025

طراحی و توسعه وب

چگونه یک پایگاه داده در MySQL ایجاد کنم؟

publish on 2025-02-19

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

by توحید صراف زاده

0 Comments

start end

02/19 2025

طراحی و توسعه وب