مقداردهی به آرایه

شما می‌توانید با اختصاص دادن مقادیر به عناصر یک آرایه، آن را پر کنید. برای مثال:

const emp = [];
emp[0] = "Casey Jones";
emp[1] = "Phil Lesh";
emp[2] = "August West";

نکته‌ی مهم: اگر در کد بالا، یک مقدار غیرِ صحیح (اعشاری یا رشته) را به عنوان ایندکس به عملگر آرایه پاس بدهید، به جای ساخت یک عنصر برای آرایه، یک ویژگی (Property) معمولی روی آن شیء ایجاد می‌شود:

const arr = [];
arr[3.4] = "Oranges";

console.log(arr.length); // 0
console.log(Object.hasOwn(arr, 3.4)); // true

همچنین می‌توانید آرایه را در همان زمانِ ساخت، مقداردهی اولیه کنید:

const myArray = new Array("Hello", myVar, 3.14159);
// یا به این صورت:
const myArray = ["Mango", "Apple", "Orange"];

درک ویژگی طول آرایه (Understanding length)

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

ویژگی length یک ویژگی خاص است. مقدار آن همیشه یک عدد صحیح مثبت و بزرگ‌تر از ایندکسِ آخرین عنصرِ موجود در آرایه است. (به عنوان مثال، اگر عنصری در ایندکس ۳۰ قرار داشته باشد، طول آرایه ۱ + ۳۰ یعنی ۳۱ خواهد بود).

به یاد داشته باشید که ایندکس‌های آرایه در جاوااسکریپت مبتنی بر صفر هستند (از ۰ شروع می‌شوند نه از ۱). این یعنی ویژگی length همیشه یک واحد از بزرگ‌ترین ایندکس ذخیره‌شده در آرایه بیشتر است:

const cats = [];
cats[30] = ["Dusty"];
console.log(cats.length); // خروجی: 31

شما همچنین می‌توانید مقداری را به طور مستقیم به ویژگی length اختصاص دهید:

• تنظیم مقدار length روی عددی کوچک‌تر از تعداد آیتم‌های ذخیره شده، باعث قطع شدن و حذف عناصر اضافه می‌شود.

• تنظیم مقدار length روی عدد 0 آرایه را کاملاً خالی می‌کند.

const cats = ["Dusty", "Misty", "Twiggy"];
console.log(cats.length); // 3

cats.length = 2;
console.log(cats); // [ 'Dusty', 'Misty' ] -> عنصر Twiggy حذف شد

cats.length = 0;
console.log(cats); // [] -> آرایه کاملاً خالی شد

cats.length = 3;
console.log(cats); // [ <3 empty items> ] -> آرایه حاوی ۳ جایگاه خالی است

پیمایش روی آرایه‌ها (Iterating over arrays)

یکی از عملیات‌های رایج، پیمایش روی مقادیر یک آرایه و پردازش تک‌تک عناصر آن است:

const colors = ["red", "green", "blue"];
for (let i = 0; i < colors.length; i++) {
  console.log(colors[i]);
}

اگر مطمئن هستید که هیچ‌کدام از عناصر آرایه‌ی شما در بافتار بولی مقدار false تولید نمی‌کنند (مثلاً زمانی که آرایه فقط شامل گره‌های DOM است)، می‌توانید از یک اصطلاح کارآمدتر و بهینه‌تر استفاده کنید:

const divs = document.getElementsByTagName("div");
for (let i = 0, div; (div = divs[i]); i++) {
  /* پردازش شیء div به روش دلخواه */
}

این روش از هزینه‌ی بررسی مداوم طول آرایه (colors.length) جلوگیری می‌کند و برای راحتی بیشتر، تضمین می‌کند که متغیر div در هر بار اجرای حلقه، به آیتم فعلی ارجاع دارد.

متد forEach() راهکار دیگری را برای پیمایش روی آرایه ارائه می‌دهد:

const colors = ["red", "green", "blue"];
colors.forEach((color) => console.log(color));
// red
// green
// blue

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

توجه داشته باشید عناصری که هنگام تعریف آرایه جا انداخته شده‌اند (Omitted)، در پیمایش forEach لیست نمی‌شوند، اما اگر مقدار undefined به صورت دستی به یک عنصر اختصاص داده شده باشد، آن عنصر لیست خواهد شد:

const sparseArray = ["first", "second", , "fourth"];

sparseArray.forEach((element) => {
  console.log(element);
});
// خروجی:
// first
// second
// fourth

if (sparseArray[2] === undefined) {
  console.log("sparseArray[2] is undefined"); // true
}

const nonsparseArray = ["first", "second", undefined, "fourth"];

nonsparseArray.forEach((element) => {
  console.log(element);
});
// خروجی:
// first
// second
// undefined
// fourth

نکته‌ی مهم: از آنجا که عناصر آرایه در جاوااسکریپت به عنوان ویژگی‌های استاندارد شیء ذخیره می‌شوند، توصیه نمی‌شود که برای پیمایش آرایه‌ها از حلقه for...in استفاده کنید؛ زیرا در این صورت علاوه بر عناصر معمولی، تمام ویژگی‌های شمارش‌پذیر (Enumerable properties) آرایه نیز لیست خواهند شد.

متدهای آرایه (Array methods)

متدهای پایه و کاربردی

• متد concat(): دو یا چند آرایه را به هم متصل کرده و یک آرایه‌ی جدید برمی‌گرداند.

let myArray = ["1", "2", "3"];
myArray = myArray.concat("a", "b", "c"); // ["1", "2", "3", "a", "b", "c"]

• متد join(): تمام عناصر یک آرایه را متصل کرده و به یک رشته متنی تبدیل می‌کند.

const myArray = ["Wind", "Rain", "Fire"];
const list = myArray.join(" - "); // "Wind - Rain - Fire"

• متد push(): یک یا چند عنصر را به انتهای آرایه اضافه می‌کند و طول جدید آرایه را برمی‌گرداند.

const myArray = ["1", "2"];
myArray.push("3"); // ["1", "2", "3"]

• متد pop(): آخرین عنصر را از انتهای آرایه حذف می‌کند و همان عنصر را برمی‌گرداند.

const myArray = ["1", "2", "3"];
const last = myArray.pop(); // myArray = ["1", "2"], last = "3"

• متد shift(): اولین عنصر را از ابتدای آرایه حذف می‌کند و همان عنصر را برمی‌گرداند.

const myArray = ["1", "2", "3"];
const first = myArray.shift(); // myArray = ["2", "3"], first = "1"

• متد unshift(): یک یا چند عنصر را به ابتدای آرایه اضافه می‌کند و طول جدید آرایه را برمی‌گرداند.

const myArray = ["1", "2", "3"];
myArray.unshift("4", "5"); // ["4", "5", "1", "2", "3"]

• متد slice(): بخش مشخصی از یک آرایه را استخراج کرده و در قالب یک آرایه‌ی جدید برمی‌گرداند (بدون تغییر آرایه اصلی).

let myArray = ["a", "b", "c", "d", "e"];
myArray = myArray.slice(1, 4); // ["b", "c", "d"] -> استخراج از ایندکس ۱ تا قبل از ۴

• متد at(): عنصر موجود در یک ایندکس مشخص را برمی‌گرداند و در صورت معتبر نبودن ایندکس، undefined می‌دهد. این متد به ویژه برای پاس دادن ایندکس‌های منفی (دسترسی به عناصر از انتهای آرایه) کاربرد دارد.

const myArray = ["a", "b", "c", "d", "e"];
myArray.at(-2); // "d" -> دومین عنصر از آخر آرایه

• متد splice(): عناصری را از آرایه حذف کرده و (به صورت اختیاری) عناصر جدیدی را جایگزین آن‌ها می‌کند. این متد آیتم‌های حذف‌شده را برمی‌گرداند.

const myArray = ["1", "2", "3", "4", "5"];
myArray.splice(1, 3, "a", "b", "c", "d"); 
// myArray = ["1", "a", "b", "c", "d", "5"]
// از ایندکس ۱ شروع کرد، ۳ عنصر را برداشت و عناصر جدید را جایگزین کرد.

• متد reverse(): عناصر یک آرایه را به صورت درجا (In place) معکوس می‌کند (عنصر اول به آخر می‌رود و برعکس) و مرجعی از آرایه را برمی‌گرداند.

const myArray = ["1", "2", "3"];
myArray.reverse(); // ["3", "2", "1"]

• متد flat(): یک آرایه‌ی جدید برمی‌گرداند که در آن تمام عناصر زیرآرایه‌ها به صورت بازگشتی تا عمق مشخص شده، مسطح (Flattened) و یکپارچه شده‌اند.

let myArray = [1, 2, [3, 4]];
myArray = myArray.flat(); // [1, 2, 3, 4]

متد مرتب‌سازی sort()

متد sort() عناصر یک آرایه را به صورت درجا مرتب کرده و مرجع آرایه را برمی‌گرداند.

const myArray = ["Wind", "Rain", "Fire"];
myArray.sort(); // ["Fire", "Rain", "Wind"]

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

• اگر بر اساس سیستم مرتب‌سازی شما a < b باشد، باید یک عدد منفی (مثل ۱-) برگردانده شود تا a قبل از b قرار گیرد.

• اگر a > b باشد، باید یک عدد مثبت (مثل ۱) برگردانده شود تا a بعد از b قرار گیرد.

• اگر a و b هم‌ارز باشند، باید عدد ۰ برگردانده شود تا ترتیب اصلی حفظ شود.

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

const sortFn = (a, b) => {
  if (a[a.length - 1] < b[b.length - 1]) {
    return -1;
  } else if (a[a.length - 1] > b[b.length - 1]) {
    return 1;
  }
  return 0;
};

myArray.sort(sortFn); // ["Wind", "Fire", "Rain"]

متدهای جستجو در آرایه

• متد indexOf(): آرایه را به دنبال searchElement جستجو می‌کند و ایندکس اولین مورد پیدا شده را برمی‌گرداند و در صورت عدم وجود، مقدار 1- می‌دهد.

const a = ["a", "b", "a", "b", "a"];
console.log(a.indexOf("b")); // 1
console.log(a.indexOf("b", 2)); // 3 -> جستجو را از ایندکس ۲ به بعد شروع می‌کند
console.log(a.indexOf("z")); // -1

• متد lastIndexOf(): مانند indexOf عمل می‌کند، اما جستجو را از انتهای آرایه به سمت ابتدا (رو به عقب) انجام می‌دهد.

const a = ["a", "b", "c", "d", "a", "b"];
console.log(a.lastIndexOf("b")); // 5
console.log(a.lastIndexOf("b", 4)); // 1 -> جستجو را رو به عقب از ایندکس ۴ شروع می‌کند
console.log(a.lastIndexOf("z")); // -1

متدهای تکرارپذیر و دريافت کالبک (Iterative methods)

متدهایی که یک تابع کالبک می‌گیرند و به نوعی روی کل آرایه پیمایش می‌کنند، متدهای تکرارپذیر نامیده می‌شوند. هرکدام از این متدها یک آرگومان اختیاری دوم به نام thisArg دریافت می‌کنند. در صورت ارائه، thisArg تبدیل به مقدار کلمه کلیدی this در بدنه تابع کالبک می‌شود. اگر ارائه نشود، در حالت غیرِ strict مقدار this به شیء سراسری (globalThis یا window) ارجاع دارد و در حالت strict مقدار آن undefined خواهد بود.

نکته: متد sort() که پیش‌تر معرفی شد، جزو متدهای تکرارپذیر (Iterative) نیست؛ زیرا تابع کالبک آن صرفاً برای مقایسه است و بر اساس ترتیب عناصر، با نظم خاصی صدا زده نمی‌شود. همچنین sort() پارامتر thisArg را نمی‌پذیرد.

• متد forEach(): تابع کالبک را روی تک‌تک آیتم‌های آرایه اجرا می‌کند و مقدار undefined برمی‌گرداند.

const a = ["a", "b", "c"];
a.forEach((element) => console.log(element));

• متد map(): یک آرایه‌ی جدید حاوی نتایج حاصل از اجرای تابع کالبک روی تک‌تک آیتم‌های آرایه اصلی را برمی‌گرداند.

const a1 = ["a", "b", "c"];
const a2 = a1.map((item) => item.toUpperCase());
console.log(a2); // ['A', 'B', 'C']

• متد flatMap(): ابتدا متد map() را اجرا کرده و سپس نتیجه را با یک متد flat() با عمق ۱ مسطح می‌کند.

const a1 = ["a", "b", "c"];
const a2 = a1.flatMap((item) => [item.toUpperCase(), item.toLowerCase()]);
console.log(a2); // ['A', 'a', 'B', 'b', 'C', 'c']

• متد filter(): آرایه‌ی جدیدی برمی‌گرداند که فقط شامل آن دسته از آیتم‌هایی است که تابع کالبک برای آن‌ها مقدار true بازگردانده است.

const a1 = ["a", 10, "b", 20, "c", 30];
const a2 = a1.filter((item) => typeof item === "number");
console.log(a2); // [10, 20, 30]

• متد find(): اولین آیتمی را که تابع کالبک برای آن مقدار true برگرداند، بازمی‌گرداند.

const a1 = ["a", 10, "b", 20, "c", 30];
const i = a1.find((item) => typeof item === "number");
console.log(i); // 10

• متد findLast(): آخرین آیتمی را که تابع کالبک برای آن مقدار true برگرداند، بازمی‌گرداند.

const a1 = ["a", 10, "b", 20, "c", 30];
const i = a1.findLast((item) => typeof item === "number");
console.log(i); // 30

• متد findIndex(): ایندکسِ اولین آیتمی را که تابع کالبک برای آن مقدار true برگرداند، بازمی‌گرداند.

const a1 = ["a", 10, "b", 20, "c", 30];
const i = a1.findIndex((item) => typeof item === "number");
console.log(i); // 1

• متد findLastIndex(): ایندکسِ آخرین آیتمی را که تابع کالبک برای آن مقدار true برگرداند، بازمی‌گرداند.

const a1 = ["a", 10, "b", 20, "c", 30];
const i = a1.findLastIndex((item) => typeof item === "number");
console.log(i); // 5

• متد every(): اگر تابع کالبک برای تک‌تک آیتم‌های آرایه مقدار true برگرداند، مقدار true و در غیر این صورت false برمی‌گرداند.

function isNumber(value) { return typeof value === "number"; }

const a1 = [1, 2, 3];
console.log(a1.every(isNumber)); // true

const a2 = [1, "2", 3];
console.log(a2.every(isNumber)); // false

• متد some(): اگر تابع کالبک برای حداقل یک آیتم در آرایه مقدار true برگرداند، مقدار true پس می‌دهد.

const a1 = [1, 2, 3];
console.log(a1.some(isNumber)); // true

const a2 = [1, "2", 3];
console.log(a2.some(isNumber)); // true

const a3 = ["1", "2", "3"];
console.log(a3.some(isNumber)); // false

متدهای انباشتگی و کاهش (reduce و reduceRight)

متد reduce() تابع کالبک مشخصی را (با پارامترهای: accumulator, currentValue, currentIndex, array) روی تک‌تک مقادیر آرایه اعمال می‌کند تا در نهایت کل لیست را به یک تک‌مقدار نهایی کاهش دهد. این متد مقدار نهایی حاصل از کالبک را برمی‌گرداند.

• اگر پارامتر initialValue (مقدار اولیه) مشخص شده باشد، کالبک در اولین اجرا، initialValue را به عنوان پارامتر اول و اولین آیتم آرایه را به عنوان پارامتر دوم دریافت می‌کند.

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

const a = [10, 20, 30];
const total = a.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  0, // مقدار اولیه
);
console.log(total); // 60

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