4. آرایه‌ها

4.1. اسکریپت [tab-01]

اسکریپت زیر برخی از ویژگی‌های آرایه‌های جاوااسکریپت را نشان می‌دهد. این آرایه‌ها مشابه آرایه‌های PHP هستند، اما با یک تفاوت عمده: آن‌ها با استفاده از نشانگرها مدیریت می‌شوند و به عنوان اشیاء در نظر گرفته می‌شوند.

''use strict';

// یک آرایه یک شیء است که از طریق نشانی آن به آن دسترسی می‌شود
const tab1 = [1, 2, 3];
// کپی کردن آدرس‌ها
const tab2 = tab1;
// tab1 و tab2 به یک آرایه اشاره می‌کنند
console.log("tab1===tab2 :", tab1 === tab2);
// می‌توان آرایه را با استفاده از tab1 یا tab2 تغییر داد
tab2[1] = 10;
console.log("tab1=", tab1);
console.log("tab2=", tab2);

اجرا

[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\tableaux\tab-01.js"
tab1===tab2 : true
tab1= [ 1, 10, 3 ]
tab2= [ 1, 10, 3 ]

توضیحات

• خط ۲ نتایج نشان می‌دهد که [tab1] و [tab2] دو موجودیت یکسان هستند – در واقع، دو نشانگر یکسان؛
• خطوط ۴ و ۵ نتایج نشان می‌دهند که این دو اشارهگر به آرایه یکسانی اشاره می‌کنند؛

4.2. اسکریپت [tab-02]

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

''use strict';

// آرایه
const tab = [];
console.log("tab=", tab, ", longueur=[", tab.length, "]");
console.log("-------------------------------");
// ابتدایی‌سازی یک عنصر
tab[3] = 100;
tab[1] = "huit";
// آرایه
console.log("tab=", tab, ", longueur=[", tab.length, "]");
console.log("-------------------------------");
// toString
console.log("tab.toString=[", tab.toString(), "]");
console.log("-------------------------------");
// کلیدهای آرایه، شاخص‌های آن هستند
for (let key of tab.keys()) {
  console.log("clé=[", key, "], valeur=[", tab[key], "]");
}
console.log("-------------------------------");
// مقادیر آرایه
for (let value of tab.values()) {
  console.log("valeur=[", value, "]");
}

• خط ۴: یک آرایه خالی؛
• خط ۸: یک آرایه اندازه ثابتی ندارد. این صرفاً یک دنباله از عناصر است که با یک عدد ایندکس شده‌اند. عنصر شماره ۳ را می‌توان مقداردهی اولیه کرد حتی اگر عناصر [0, 1, 2] هنوز تعریف نشده باشند؛
• خطوط ۱۶–۲۴: یک آرایه جاوااسکریپت به روشی مشابه آرایه PHP رفتار می‌کند؛

اجرا

[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\tableaux\tab-02.js"
tab= [] , longueur=[ 0 ]
-------------------------------
tab= [ <1 empty item>, 'huit', <1 empty item>, 100 ] , longueur=[ 4 ]
-------------------------------
tab.toString=[ ,huit,,100 ]
-------------------------------
clé=[ 0 ], valeur=[ undefined ]
clé=[ 1 ], valeur=[ huit ]
clé=[ 2 ], valeur=[ undefined ]
clé=[ 3 ], valeur=[ 100 ]
-------------------------------
valeur=[ undefined ]
valeur=[ huit ]
valeur=[ undefined ]
valeur=[ 100 ]

4.3. اسکریپت [tab-03]

این اسکریپت روش‌های مختلفی از شیء [tableau] را نشان می‌دهد.

''use strict';
// یک آرایه می‌تواند شامل انواع داده‌های مختلف باشد
const tab = [1, 2, "un", "deux", true, [10, 20], { prop1: 10, prop2: "abc" }];
//QZXW2HTMLCY29uc29sZS.sb2cZQX می‌تواند محتویات یک آرایه را نمایش دهد
show(1);
console.log("tab=", tab);
show(2);
// پیمایش آرایه با استفاده از `foreach`
tab.forEach(element => {
  console.log("élément=", element, typeof (element));
});
show("2b");
// راه دیگری برای انجام همان کار
tab.forEach(function (element) {
  console.log("élément=", element, typeof (element));
});
show(3);
// پیمایش آرایه با استفاده از `for`
for (let i = 0; i < tab.length; i++) {
  console.log("i=", i, "tab[i]=", tab[i]);
}
show(4);
// تغییر یک تب[i]
tab[5] = [];
//نمایش
console.log("tab=", tab);
show(5);
// حذف آخرین عنصر
let element = tab.pop(tab);
console.log("élément=", element, "tab=", tab);
show(6);
// افزودن یک عنصر به انتهای آرایه
tab.push('xyz');
console.log("tab=", tab);
show(7);
// افزودن یک عنصر به ابتدای آرایه
tab.unshift(1000);
console.log("tab=", tab);
show(8);
// حذف اولین عنصر از آرایه
element = tab.shift();
console.log("élément=", element, "tab=", tab);
show(9);
//عنصر شمارهٔ ۲ از آرایه حذف می‌شود
element = tab.splice(2, 1);
console.log("élément=", element, "tab=", tab);
show(10);
//دو عنصر را از آرایه حذف می‌کند، از عنصر اول شروع می‌کند
element = tab.splice(1, 2);
console.log("élément=", element, "tab=", tab);

//تابع
function show(param) {
  console.log("[", param, ":::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: ]");
}

توضیحات

• تفاوت بین آرایه‌های PHP و آرایه‌های جاوااسکریپت در خطوط ۳ و ۲۴ نشان داده شده است:
  • خط ۳ متغیر [tab] را به‌عنوان یک ثابت اعلام می‌کند؛
  • خط 24 عنصر تب [5] را تغییر می‌دهد؛

در خط ۳، اشاره‌گرِ اشاره به آرایه است که به‌عنوان ثابت اعلام شده، نه خودِ آرایه. خودِ آرایه قابل تغییر است.

• خطوط 14–16: آرایه [tab] با استفاده از متد [forEach] از آرایه [tab] به‌صورت بازگشتی پردازش می‌شود. این متد به عنوان پارامتر، تعریف یک تابع را می‌گیرد که می‌توان آن را تابع صریح (literal function) نامید. این تابع پارامتر، یک پارامتر دارد: عنصر فعلی آرایه [tab]. این تابع برای هر عنصر آرایه فراخوانی می‌شود. این نوع سینتکس در جاوااسکریپت رایج است؛
• خطوط ۹–۱۰: سینتکس متفاوتی برای تعریف تابع استفاده می‌شود. به جای نوشتن:
  • function(p1, p2, …, pn){….}

می‌نویسیم:

• (ادامه)
  • (p1, p2, …, pn) => {…}. این به عنوان نگارش «تیر» (arrow notation) شناخته می‌شود؛
• بقیه کد توسط توضیحات توضیح داده شده است؛

از این اسکریپت، توجه کنید که:

• یک آرایه یک شیء است که توسط یک نشانگر به آن ارجاع داده می‌شود؛
• که این شیء متدهایی دارد [forEach, pop, push, shift, unshift];

4.4. اسکریپت [tab-04]

این اسکریپت روش‌های دیگر اشیاء آرایه را نشان می‌دهد.

''use strict';

//روش دستکاری آرایه

// یک آرایه
const tab = [];
for (let i = 0; i < 10; i++) {
  tab[i] = i * 10;
}
// نمایش
console.log("tab=", tab);
// نقشه
const tab2 = tab.map(element => {
  return { prop1: element, prop2: element * element }
});
// نمایش
console.log("tab=", tab);
console.log("tab2=", tab2);
// کاهش بدون مقدار اولیه
const somme = tab.reduce((accumulator, currentValue) => accumulator + currentValue);
console.log("somme tab=", somme);
// کاهش با مقدار اولیه
const somme2 = tab.reduce((accumulator, currentValue) => accumulator + currentValue, 10);
console.log("somme2 tab=", somme2);
// پالایش
const tab4 = tab.filter((element) => {
  if (element > 50) {
    return element;
  }
});
console.log("tab4=", tab4);
// یافتن
const element1 = tab.find((element) => (element > 20));
console.log("élément1=", element1);
// findIndex
const index1 = tab.findIndex((element) => (element === 20));
console.log("index1 20=", index1);
// indexOf
const index2 = tab.indexOf(30);
console.log("index2 30=", index2);
const index3 = tab.indexOf(31);
console.log("index3 31=", index3);
// lastIndexOf
const index4 = [4, 5, 4, 2].lastIndexOf(4);
console.log("index4 4=", index4);
//مرتب‌سازی
const tab5 = [4, 5, 4, 2].sort();
console.log("tab5=", tab5);
// ترتیب معکوس
const tab6 = [4, 5, 4, 2].sort((e1, e2) => {
  if (e1 > e2) {
    return -1;
  }
  else if (e1 === e2) {
    return 0;
  } else {
    return +1;
  }
});
console.log("tab6=", tab6);

توضیحات

• خطوط ۱۳–۱۵: متد [map] یک تابع تبدیل را به‌عنوان پارامتر می‌پذیرد. این تابع برای هر عنصر آرایه بارها فراخوانی می‌شود. این تابع مسئول تبدیل عنصر به چیزی دیگر است، در این مورد یک شیء با ویژگی‌های [prop1, prop2]. متد [map] یک آرایهٔ جدید بازمی‌گرداند. آرایهٔ اصلی بدون تغییر باقی می‌ماند:

tab= [ 0, 10, 20, 30, 40, 50, 60, 70, 80, 90 ]
tab2= [ { prop1: 0, prop2: 0 },
{ prop1: 10, prop2: 100 },
{ prop1: 20, prop2: 400 },
{ prop1: 30, prop2: 900 },
{ prop1: 40, prop2: 1600 },
{ prop1: 50, prop2: 2500 },
{ prop1: 60, prop2: 3600 },
{ prop1: 70, prop2: 4900 },
{ prop1: 80, prop2: 6400 },
{ prop1: 90, prop2: 8100 } ]

• خط ۲۰: متد [reduce] یک تابع با دو پارامتر را به‌عنوان ورودی می‌گیرد که برای هر عنصر آرایه بارها فراخوانی می‌شود. این تابع دو پارامتر دارد:
  • [currentValue] عنصر فعلی آرایه است؛
  • [accumulator] جدیدترین نتیجه‌ای است که توسط این تابع بازگردانده می‌شود. اگر هیچ مقدار اولیه برای این انباشتگر مشخص نشود، مقدار آن 0 خواهد بود؛
  • در اولین بار که تابع انباشت فراخوانی می‌شود، مقدار [0+tab[0]] را برمی‌گرداند. این مقدار به انباشتگر اختصاص داده می‌شود؛
  • بار دوم، مقدار accumulator + tab[1] را برمی‌گرداند، یعنی tab[0] + tab[1];
  • بار سوم، اکولوییتور را روی +tab[2] تنظیم می‌کند، یعنی tab[0] + tab[1] + tab[2];
  • و غیره. در نهایت، انباشتگر نمایانگر مجموع تمام عناصر آرایه خواهد بود [tab];
• خط ۲۶: متد [filter] یک تابع فیلترینگ را به‌عنوان پارامتر می‌پذیرد. این تابع برای هر عنصر آرایه به‌طور مکرر فراخوانی می‌شود و آن عنصر را به‌عنوان پارامتر دریافت می‌کند. باید بازگرداند:
  • [true] اگر عنصر قرار است حفظ شود؛
  • [false] در غیر این صورت؛
• خط ۳۳: متد [find] یک تابع جستجو را به عنوان پارامتر می‌پذیرد. این تابع برای هر عنصر آرایه به طور مکرر فراخوانی شده و آن عنصر را به عنوان پارامتر دریافت می‌کند. این تابع باید در صورتی که عنصر دریافتی معیار جستجو را برآورده کند، مقدار [true] را بازگرداند. در این صورت فرآیند متوقف می‌شود. بنابراین، متد [find] یک یا صفر عنصر برمی‌گرداند؛
• خط ۳۶: متد [findIndex] به همان شیوه متد [find] عمل می‌کند، اما به جای بازگرداندن عنصر یافت‌شده، اندیس آن را در آرایه بازمی‌گرداند؛
• خطوط ۳۹ و ۴۱: متد [indexOf(valeur)] در آرایه به دنبال [valeur] می‌گردد و شاخص آن را برمی‌گرداند، یا در صورت عدم یافتن، -۱ را برمی‌گرداند؛
• خط ۴۴: متد [lastIndexOf(valeur)] به همان شیوه‌ای عمل می‌کند که متد [indexOf(valeur)] عمل می‌کند، اما جستجوی خود را از انتهای آرایه آغاز می‌کند؛
• خط ۴۷: متد [sort]، هنگامی که بدون پارامتر فراخوانی شود، آرایه‌ای مرتب‌شده به ترتیب طبیعی (اعداد، رشته‌ها) را بازمی‌گرداند؛
• خط ۵۰: هنگامی که ترتیب طبیعی مناسب نیست، باید تابعی با دو پارامتر (e1، e2) را به متد [sort] ارسال کنید، که برمی‌گرداند:
  • +1 اگر e1 باید بعد از e2 مرتب شود؛
  • -1 اگر e1 باید قبل از e2 مرتب شود؛
  • 0 اگر هر دو عنصر باید رتبه یکسانی داشته باشند؛

تابعی که به‌عنوان پارامتر به متد [sort] ارسال می‌شود، توسط آن متد بارها برای مقایسه دو عنصر آرایه فراخوانی می‌گردد؛