آرایه ها در JavaScript

مقدمه

آرایه ها (Array) نوعی از داده هستن (data type) که مقادیر رو به صورت یک زنجیره ذخیره میکنن. به جای این که ۳ مقدار رو توسط ۳ متغیر جدا از هم ذخیره کنیم، می تونیم این ۳ مقدار رو در یک آرایه ذخیره کنیم.

let x = 1;
let y = 2;
let z = 3;
const items = [1, 2, 3];

پس آرایه ها مثل یک قطار هستن که هر واگنش میشه یکی از اون مقدار ها. به هر کدوم از این مقادیر میگن یک عنصر (element) اون آرایه (برخی وقتا عضو هم میگن). این عناصر می تونن خودشون از هر جنسی باشن. مثلا ممکنه آرایه ای از چندین Object داشته باشیم (که اتفاقا خیلی هم رایجه). در jS آرایه ها می تونن Heterogeneous باشن. یعنی عناصر آرایه می تونن جنس داده های مختلفی داشته باشن. مثلا آرایه ای از چند عدد، چند رشته و غیره. از همین الان یاد بگیر که به عنوان یک عادت خوب، آرایه ها رو با const اعلان کنی.

const bag = ['key', 'money', 12, true]; 
const users = [
    {name: 'bizhan', age: 26},
    {name: 'hazhir', age: 28},
    {name: 'sepehr', age: 25}
];

اعمال روی آرایه ها

مفهوم آرایه ها منحصر به jS نیست. در بقیه زبان ها هم آرایه داریم. در پایتان هم جنسی از داده به نام list داریم که به شدت شبیه به آرایه هاست. در واقع آرایه یک جور Data Structure عه. منظور از data structure (ساختار داده) روشی برای ساماندهی به داده هاست که خودش انواع مختلفی داره و یک بحث خیلی مهم و شیرینه. فارغ از این که با چه زبان کار میکنیم، روی آرایه ها (با توجه به این که چندین عنصر دارن) طبیعتا و بدیهتا این اعمال رو باید انجام بدیم (اصلا نیازی به حفظ نیست. به تدریج خودت یاد می گیری):

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

خواندن عناصر آرایه (reading)

برای خواندن مقدار عناصر یک آرایه از [ ] استفاده میکنیم. اولین عنصر آرایه شاخصه (index) ۰ رو داره و عنصر بعدی ۱ و الی آخر. این طوری (در همه این کد ها هدف استفاده از console.log مشاهده اثر نهایی در کنسول عه و ربطی به اصل بحث نداره. چون در jS چیزی به نام print به معنی زبان هایی مثل Python نداریم):

const letters = ['a',b','c','d'];
console.log(letters[0])    // 'a'
console.log(letters[1])    // 'b'

برای مشاهده طول یک آرایه (یعنی این که چند تا عنصر داره) از ویژگی (property) ای به نام length استفاده میشه:

console.log(letters.length);    // 4

حالا فرض کن میخایم برعکس عناصر رو بخونیم. مثلا آخرین عنصر رو بخونیم. این طوری عملی میکنیم:

console.log(letters[letters.length - 1]);    // 'd'

برای عوض کردن مقادیر هم همین طوری عمل میکنیم:

letters[0] = 'الف';

متد ها (Methods)

آرایه ها در jS نوعی object حساب میشن و هر object ای هم متد های خاص خودش رو داره. به کد زیر دقت کن:

const items = [1,2,3,4,5];
typeof items;    // 'object'
items instanceof Array;    // true

کد بالا به ما نشون میده که جنس داده یک آرایه object عه و از روی کلاس Array رونویسی شده. حالا که items یک object عه که از روی کلاس Array درست شده پس باید یک سری متد هم داشته باشه. همین متد ها هستن که به ما کمک میکنن تا اعمالی که در بالا لیست کرده بودیم رو پیاده سازی کنیم. این متد ها اکثرا مقدار اولیه خود آرایه رو عوض میکنن (هر چند برخی هاشون این طوری نیستن و نیازی هم نیست حفظ کنی چون بدیهیه). در ادامه به بررسی این متد ها می پردازیم.

مرتب کردن آرایه (sort)

با استفاده از متد sort روی خود آرایه انجام میشه. اگه بهش هیچ آرگومان ای (Argument) ندیم به صورت پیش فرض و بر اساس الفبا مرتب میکنه عناصر رو. می تونیم بهش یک function هم به عنوان آرگومان بدیم که به صورت دلخواه خودمون عناصر رو مرتب کنه.

const nums = [10, 2, 12, 9, 1];
nums.sort();    // [1, 10, 12, 2, 9];

چی شد !!!! این طوری که اشتباه مرتب کرده! یعنی ۲ از ۱۲ بزرگتره!!!! این به دلیل اینه که متد sort اعداد رو بر اساس رقم اولشون مقایسه میکنه برای همینه که هر عددی با رقم اول ۱ کوچکتر از بقیه اعداد میشه حتی ۱۰۰۰۰۰. برای حل این مشکل چه کار کنیم؟! همون function عه که بالا بهت گفتم. باید اون رو بدیم به متد sort:

nums.sort( function(a, b){
    return a-b;
}); 

در کد بالا منظور از a و b دو عنصر پشت سر هم هستند که قراره با هم مقایسه بشن. اگر حاصل return a-b مقدار منفی بشه آرایه به صورت صعودی و اگر مقدار مثبتی بشه آرایه به صورت نزولی مرتب میشه. ولی خوب اگه هیچ a-b مقدار مثبتی نشد چی؟! چطوری نزولی مرتب کنیم؟ کاری نداره. به جای a-b می نویسیم b-a. حفظ هم لازم نیست بکنی. شکل اش گویاست دیگه. a-b خودش ترتیب صعودی داره چون b از a تو الفبای انگلیسی بزرگتره. b-a هم ظاهر نزولی داره. استفاده از متد sort با function به صورت آرگومان به خصوص در مواقعی کار گشاست که با آرایه ای از شئ ها رو به رو هستیم:

const users = [
     {name: 'bizhan', age: 26},
     {name: 'hazhir', age: 28},
     {name: 'sepehr', age: 25} 
];
users.sort(function(a,b){
    return a.age-b.age;
});

برعکس کردن

با متد reverse می تونیم ترتیب عناصر رو برعکس چیزی که هست کنیم. این متد آرایه اولیه رو تغییر میده.

const nums = [1,12, 5, 2, 13];
nums.reverse();    // [13, 2, 5, 12, 1];

فرض کن که میخای بررسی کنیم که آیا یک کلمه پالیندروم هست یا نه. منظور از رشته های پالیندروم اینه که از هر دو طرف یک جور خونده بشه. مثلا damad یک پالیندرومه. برای این کار:

• رشته مورد بررسی رو به آرایه تبدیل میکنیم.
• سپس آرایه ایجاد شده رو reverse میکنیم.
• حالا آرایه برعکس شده رو دوباره به رشته تبدیل میکنیم.
• مقدار حاصل از مرحله سوم رو با مقدار اولیه مقایسه می کنیم.

کدش میشه این (سعی کن اول خودت بنویسی بعدش به این نگاه کن. می تونی تو گوگل هم سرچ کنی که هر مرحله رو چطوری انجام بدی).

let word = 'damad';
const chars = word.split('');
chars.reverse();
let reversed = chars.join('');
if (word === reversed) console.log(&quotPalindrome&quot);

اضافه کردن عنصر به آرایه

بسته به این که به کجای آرایه بخایم عنصر جدید اضافه کنیم می تونیم از چند متد استفاده کنیم.

• متد push: اضافه کردن عنصر به انتهای آرایه
• متد unshift: اضافه کردن عنصر به ابتدای آرایه
• متد splice: اضافه کردن عنصر به هر جایی از آرایه (من جمله ابتدا و انتها)

همگی این متد ها آرایه اولیه رو تغییر میدن. اول متد push رو بررسی کنیم:

const letters = ['a', 'b', 'c', 'd'];
letters.push('e');    // returns the new length of array: 5
console.log(letters);    // ['a', 'b', 'c', 'd',' e']

در ضمن متد push طول آرایه حاصل رو هم return میکنه. متد unshift هم مثل متد push عنصر اضافه میکنه با این تفاوت که به اول آرایه اضافه میکنه.

const nums = [1,2,3,4,5];
nums.unshift(0);    // returns the new length of array: 6
console.log(nums);    // [0,1,2,3,4,5]

این متد هم مثل متد قبلی طول جدید آرایه رو بر می گردونه. به متد های push و unshift میشه به جای یک مقدار (که قراره به آرایه اضافه بشه) چند مقدار داد. در این صورت مقادیر باید با کاما از هم جدا بشن.

const odds = [1,3,5];
odds.push(7,9,11);    // returns the new length of array: 6
console.log(odds); [1,3,5,7,9,11];

متد splice

متد splice حرفه ای تر از push و unshift عه و نه تنها میشه باهاش عنصر اضافه کرد بلکه میشه از هر جای آرایه عنصر حذف کرد. این متد هم مثل بقیه متد هایی که تا این جا بررسی کردیم مقدار اولیه رو عوض میکنه (یعنی این طوری نیست که بر اساس آرایه اولیه یک آرایه جدید درست کنه. بلکه همون آرایه اولیه رو عوض میکنه). حداقل ۲ تا آرگومان میگیره که به این طریقه:

Array.splice(start, removed, addings ....);

اولین مقدار این متد index ای هست که میخاد فعالیت رو شروع کنه. همون طوری که قبلا گفتم هر عنصری در آرایه ها یک index عددی داره که انگاری میشه همون موقعیتش در آرایه. آرگومان بعدی تعداد عناصری هست که بعد از موقعیت شروع باید حذف بشن (اگه نمیخای عنصری رو حذف کنی ۰ بذار) و در نهایت یک یا چند مقدار که این ها باید اضافه بشن. مثلا کد زیر در موقعیت ۲ (یعنی سومین موقعیت چون اگه یادت بشه موقعیت ها از ۰ شروع میشد) یک مقدار جدید اضافه میکنه:

const nums = [1, 2, 3, 4, 5, 6];
nums.splice(2, 0, 3.5);    // [1, 2, 3.5, 3, 4, 5, 6]

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

const chars = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
chars.splice(3, 2);
console.log(chars); // ['a', 'b', 'c', 'f', 'g'];

وقتی که با متد splice عنصر از آرایه حذف میکنیم، آرایه اولیه تغییر میکنه و در اثر این عمل (یعنی در اثر خط دوم کد بالا) عناصر حذف شده return میشن. توی همین کد بالا مثلا اگه میخاستیم عناصر حذف شده رو در قالب یک متغیر ذخیره کنیم میشد این طوری کد بنویسیم:

const chars = ['a', 'b', 'c', 'd', 'e', 'f', 'g']; 
const removeds = chars.splice(3, 2);
console.log(removeds); // ['d', 'e'];

کم کردن عنصر از آرایه

تا این جا یاد گرفتیم که با متد splice از هر جای آرایه که دوست داریم عنصر حذف کنیم (من جمله ابتدای و انتها). برای موقعیت های ساده تر متد های راحت تری هم هست مثل pop و shift. متد pop از انتهای آرایه آخرین عنصر رو حذف میکنه و مقدار این عنصر حذف شده رو return میکنه. متد shift هم همین کار رو از ابتدای آرایه انجام میده و اولین عنصر آرایه رو حذف میکنه و مقدارش رو return میکنه.

const evens = [2, 4, 6, 8, 10, 12, 14];
let popped = evens.pop();
console.log(popped);    // 14
console.log(evens);    // [2,4,6,8,10,12]

همین داستان برای متد shift تکرار میشه با این تفاوت که shift از اول آرایه عنصر حذف میکنه.

const primes = [2,3,5,7,11,13];
let removed = primes.shift();
console.log(removed);    // 2
console.log(primes);    // [3,5,7,9,11,13]

بریدن چند عنصر از آرایه و ایجاد آرایه ای جدید

متد slice یک آرایه رو قیچی میکنه و آرایه جدیدی شامل عناصر بریده شده بهمون بر می گردونه. این متد آرایه اولیه رو بدون تغییر میذاره. بدیهی هم هست چون اگه آرایه اولیه رو تغییر میداد کلی از عناصر که در برش انتخاب نشده بودن از دست می رفتن.

const years = [1385, 1386, 1387, 2006, 2007, 2008, 2009];
const shamsi_years = years.slice(0, 3);
const gregorian_years = years.slice(3)

به متد slice دو تا آرگومان می تونیم بدیم. آرگومان اول موقعیت شروع به برش هست (اولین موقعیت ۰ عه) که از اون جا شروع میکنه به بریدن و عنصری که تو موقعیت ۰ باشه رو هم حساب میکنه. آرگومان دوم موقعیتی هست که این برش متوقف میشه ولی عنصری که در این موقعیت قرار داده بریده نمیشه. به عبارت آرگومان اول موقعیت start و آرگومان دوم موقعیت stop عه.

در کد بالا مشاهده میکنی که در خط سوم به متد slice فقط یک آرگومان دادیم. در این صورت از موقعیت ۳ شروع به برش میکنه و تا انتهای آرایه رو می بره. یعنی همه سال های میلادی.

پیدا کردن موقعیت یک عنصر در آرایه

همون طوری که گفتیم هر عنصری در آرایه بر اساس این که به چه ترتیبی در تعریف آرایه قرار داده شده باشه دارای یک شاخص (index) هست. از دو عبارت موقعیت (position) و شاخص (index) اکثر اوقات به صورت هم معنی استفاده میشه ولی اصطلاح تخصصی برنامه نویسیش همون index عه.

حالا فرض کن که ما یک آرایه به هم ریخته و بدون ترتیب داریم. در این صورت برای پیدا کردن موقعیت مقدار خاصی باید از متد indexOf استفاده کنیم. (عناصر تکراری در آرایه هیچ مشکلی نداره)

const nums = [4,2,7,4,2,9,6,3,2,6,8];
let position = nums.indexOf(2);
console.log(position);    // 1

ولی خوب در آرایه بالا چندین عنصر با مقدار ۲ داریم. متد indexOf موقعیت اولین عنصری که مقدار خواسته شده رو داره به ما میده. اگه موقعیت عناصر بعدی با مقدار یکسان رو خواستیم چی؟! آرگومان دومی می تونیم به این متد بدیم که موقعیت شروع به جست و جو در آرایه است. برای مثال در موقعیت ۴ همین آرایه کد بالا هم یک ۲ داریم. اگه بخایم گیرش بیاریم این طوری کد میزنیم:

let position = nums.indexOf(2, 2);

در نهایت به خاطر بسپار که اگه متد indexOf مقدار مورد نظر رو در آرایه پیدا نکرد 1- بر می گردونه.

الصاق چند آرایه به هم

برای ترکیب چند آرایه با هم روش های مختلفی هست. ساده ترین روش استفاده از spread syntax عه که خیلی کار رو راحت میکنه:

const evens = [2,4,6,8];
const odds = [1,3,5,7,9];
const nums = [...odds, ...evens];

به استفاده از اون ۳ تا نقطه میگن spread syntax که تو ورژن های جدید jS اضافه شده و خیلی کار رو راحت میکنه. در ضمن میشه از این spread syntax هر طوری دوست داری استفاده کنی. این طوری مثلا:

const ages = [1,2,3,4, ...odds];
const digits = [1,2,3, ...evens, 4,5,6];

راهکار دیگه برای الصاق دو آرایه به هم استفاده از متد concat عه.

const evens = [2,4,6,8]; 
const odds = [1,3,5,7,9]; 
const nums = evens.concat(odds);

به متد concat میشه چندین آرگومان هم داد تا چندین آرایه رو به هم وصل کنیم.

چسبوندن عناصر آرایه به هم

اصطلاحا میگن که آرایه ها Human readable نیستن. منظور چیه؟! یعنی کسی که برنامه نویس نیست و نمیدونه که ] و یا [ به چه معنی عه گیج میشه. اگه بخایم یک آرایه رو به صورت عرف نگارشی انسان ها نشون بدیم باید Human readable اش کنیم. برای این کار باید عناصر آرایه رو به هم بچسبونیم و با یک علامتی (اکثرا کاما) از هم جداشون کنیم. به کد دقت کن:

const letters = ['a','b','c','d','e'];
let humanReadable = letters.toString();
console.log(humanReadable);    // 'a,b,c,d,e'

مشاهده کردی که آرایه ای که برنامه نویس ها و ماشین ها ازش سر در می آوردن رو تبدیل کرد به a,b,c,d,e که برای هر انسانی هم قابل فهم باشه. متد join هم همین کار رو میکنه با این فرق که می شه بهش گفت با چی عناصر رو به هم بچسبونه. به کد دقت کن:

const letters = ['a','b','c','d','e'];
humanReadable = letters.join(' - ');
 console.log(humanReadable);    // 'a - b - c - d - e';

حتی میشه به جای ' - ' هر چیز دیگه ای که دوست داریم بذاریم. مثلا: 'اصغر'!!! متد join روی آرایه ها و متد split روی رشته ها (برای مطالعه در باره متد split روی رشته ها به این لینک مراجعه کن) در کنار هم خیلی مفید هستن. برای مثال فرض کن یک چالش به این صورت داریم: از رشته AaBbCcDdEe فقط کاراکتر های UpperCase رو جدا کنید و به صورت یک رشته نمایش دهید.

برای حل این مسئله ابتدا گام هاش رو می نویسیم:

• تبدیل رشته اولیه به آرایه
• تبدیل همه عناصر آرایه حاصله از مرحله اول به UpperCase
• حذف عناصر تکراری از آرایه
• تبدیل آرایه حاصل از مرحله ۳ به رشته

این چالش رو این طوری حل میکنیم (سعی کن اول خودت با سرچ در گوگل چالش رو حل کنی. مرحله هاش رو که بهت گفتم. هر مرحله رو تو گوگل سرچ کن دربارش و راهکارش رو پیدا کن.)

let chars = &quotAaBbCcDdEe"
const splitteds = chars.split('');
splitteds.sort();
const answer = splitteds.slice(0,5);
console.log(answer.join(''));

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

ایجاد آرایه ای جدید بر اساس آرایه اول (map کردن)

به این کار در عرف برنامه نویسی میگن map کردن یک آرایه. یعنی آرایه ای جدید درست کنیم بر اساس آرایه اولیه. به موازات هر عنصر از آرایه اولیه، عنصری جدید در آرایه ای جدید خواهیم داشت. مثلا فرض کن آرایه ای از اعداد فرد داریم و میخایم بر اساس اون آرایه ای از اعداد زوج درست کنیم. خوب مشخصه که باید به هر عضو آرایه اولیه ۱ واحد اضافه کنیم تا آرایه ای از اعداد زوج درست بشه.

const odds = [1,3,5,7,9];
const evens = odds.map(odd => odd + 1);

نکته: در کد بالا odd => odd + 1 استایل جدید arrow function هست که جز ویژگی های مدرن jS حساب میشه و برابر با اینه:

function(odd) {
    return odd + 1;
}

مپ کردن آرایه ها خیلی کار راه اندازه و در عین حال واقعا هم ساده است. بذار یک مثال دیگه بررسی کنیم. آرایه ای از رشته های عددی داری. یعنی به جای ۱ و ۲ و ۳ با '1' و '2' و ... رو به رو هستیم. خوب مشخصا نمی تونیم با این اوضاع روی عناصر این آرایه فعالیت های ریاضی انجام بدیم چون جنس داده شون String عه نه Number. باید آرایه اولیه رو به Number مپ کنیم.

const digits = ['1','2','3','4','5'];
const nums = digits.map(Number);

به همین راحتی به همین خوشمزگی!!! در توضیح عرض کنم که Number خودش یکی از function های jS عه که هر چیزی که می تونه به عدد تبدیل بشه رو به عدد تبدیل میکنه. ما در کد بالا حتی به خودمون زحمت ندادیم که function تعریف کنیم. چرا این کار رو بکنیم وقتی خود jS فانکشن اش رو تعریف کرده؟!

حتما تا این جا متوجه شدی که متد map آرایه جدید درست میکنه و آرایه اولیه رو دست نخورده باقی میذاره. کاملا هم مشخصه و بدیهیه چون خیلی خطرناکه اگه بخایم تک تک عناصر آرایه اولیه رو عوض کنیم و مقدار اولیه شون رو از دست بدیم.

فقط عناصر دلخواه رو بیرون کشیدن (filter کردن)

یک صافی رو در نظر بگیر. تک تک عناصر آرایه رو دونه دونه بهش میدیم و اون هایی که از سوراخ های صافی ریزتر هستند عبور میکنن و بقیه گیر میکنن پشت صافی. این کاریه که متد filter برامون میکنه. خیلی گویاست. یک آرایه رو فیلتر میکنه. فیلترش رو هم خودمون می تونیم تعریف کنیم. برای مثال: آرایه از اعداد ۱ تا ۱۰ داریم و میخایم فقط اعداد فرد رو ازش بیرون بکشیم. خوب مراحل حل این مسئله میشه:

• تقسیم تک تک عناصر آرایه بر ۲
• اگر باقی مانده تقسیم ۰ شد عدد زوج است (و از فیلتر عبور نمیکند)
• اگر باقی مانده تقسیم ۱ شد عدد فرد است (و از فیلتر عبور میکند)

کدش میشه این (بهتره اول خودت یک تلاشی بکنی و یک کد بنویسی حتی با کمک از گوگل و بعد به کد من نگاه کنی)

const nums = [1,2,3,4,5,6,7,8,9,10];
cont odds = nums.filter(num => num % 2 === 1);

عملگر ٪ در کد بالا باقی مانده تقسیم ۲ مقدار رو به ما میده. مجددا تاکید میکنم که متد filter هم آرایه اولیه رو دست نخورده باقی میذاره و آرایه جدیدی درست میکنه. متد filter متد دم دستی و راه گشایی هست به خصوص موقع کار کردن با database. مثلا فرض کن که یک web application داریم که بر اساس یک آرایه، جدولی رو با استفاده از HTML برای کاربر پرینت کرده. (این تکنیک توی Angular و امثالش خیلی رایجه مثلا). حالا ما برای کاربر یک input گذاشتیم که هر چی توش تایپ کنه در اسرع وقت اون جدول فقط ردیف هایی رو نشون میده که مقدار تایپ شده درش باشن. یعنی یک سرچ live. خوب حالا که با filter آشنا شدی می بینی که چیز خاصی رخ نداده. اون جدول بر اساس آرایه اولیه از ردیف ها پرینت نشده، بر اساس filter شده اش پرینت شده. و هر وقت کاربر مقداری رو داخل اون input تایپ کنه آرایه اولیه filter میشه و ردیف هایی نشون داده میشن که مقدار تایپ شده توسط کاربر درشون موجود باشه.

انجام کاری به ازای هر عضو آرایه

فرض کن که آرایه ای از اعداد داریم و میخایم هر عنصر رو log کنیم. به صورت کلاسیک میشد این طوری از یک for استفاده کرد:

const nums = [3,4,5,6,7,8];
for (let i=0; i < nums.length; i++) {
    console.log(nums[i])
}

در ورژن های جدید تر حلقه مدرنی اضافه شده به اسم for in که کار رو راحت میکنه:

for (let i in nums) {
    console.log(nums[i])
}

حتی میشه راحت تر از این از for of استفاده کرد. این دیگه واقعا معرکه است:

for (let x of nums) {
    console.log(x);
}

به همه این کار ها اصلاحا میگن loop کردن در آرایه. به عبارتی «چرخیدن» در آرایه. ولی من میخایم یک راه دم دستی و ساده تر بهتون یادم بدم. استفاده از متد forEach ! در یک خط همه این کار ها رو میکنه:

nums.forEach(num => console.log(num));

متد forEach به ازای هر عضو از آرایه کاری رو انجام میده. این متد نه آرایه جدیدی درست میکنه و نه آرایه اولیه رو عوض میکنه. (نیازی هم به این کار نداره). هنگام کار کردن با SPA (Single Page Application) ها این متد forEach خیلی کمکت میکنه. فرض کن آرایه ای از email ها داری و میخای به هر email یک متنی رو ارسال کنی. چه چیزی بهتر از forEach؟!

بررسی حضور فلان مقدار در آرایه

این کار رو میشد با indexOf هم انجام داد به این صورت که اگه مقدار ۰ به بالا داد یعنی هست و اگه -۱ داد یعنی نیست. ولی این یک کم می لنگه. چون ۰ در jS تفسیر به false میشه و -1 و بقیه مقادیر مثبت تفسیر به true! متد includes ولی کار رو برای ما راحت میکنه. چون که سر راست false یا true بر می گردونه.

const nums = [1,2,3,4,5,6,7,9];
console.log(nums.includes(1));    // true
console.log(nums.includes(8));    // false

کاهش دادن آرایه به یک مقدار ساده

به این کار میگن reduce کردن یک آرایه. یعنی یک آرایه که از جنس داده های پیچیده است رو تبدیل کنیم به جنسی از داده که ابتدایی باشه مثلا عدد یا رشته. فرض کن که آرایه ای از اعداد داریم و میخایم که جمع همه عناصر رو به دست بیاریم. یعنی عناصر رو دو نه به دونه با هم جمع کنیم. خوب ممکنه که با یک حلقه for ساده کارت رو انجام بدی و یا اگه حرفه ای تر باشی از for in و for of استفاده کنی. ولی راهکار ساده تری هم هست. متد reduce.

const nums = [1,2,3,4,5,6,7];
nums.reduce((acc, cur) => {acc += cur});

در کد بالا منظور از acc مخفف شده عبارت accumulative عه (تو انگلیسی یعنی تجمیعی) و cur هم current عه. به عبارتی متد reduce میاد و مثل forEach توی آرایه می چرخه و متغیر cur نماینده عنصر همون دور چرخش هست و acc هم محصول جمع همه cur ها تا اون دور چرخشه. این متد هم آرایه اولیه رو دست نخورده باقی میذاره و در نهایت یک حاصل فقط return میکنه که همون جمع همه عناصر. با متد reduce میشه مسائل دیگری هم حل کرد. مثلا آرایه از اسامی داریم و میخایم همه اسامی رو به هم بچسبونیم و یک رشته یک پارچه درست کنیم. با متد reduce این کار رو میکنیم و توی هر چرخش cur رو به acc می چسبونیم. ولی صبر کن!!! چرا راه سخت رو بریم؟! وقتی متد join رو داریم چرا از reduce استفاده کنیم؟!

نتیجه گیری

ببخشید طولانی شد! من سعی کردم اصلی ترین متد ها رو به صورت مفهومی توضیح بدم. تازه هنوز یک سری متد دیگه مونده! (کمتر کاربرد دارن ولی واسه مطالعه بیشتر از این لینک استفاده کن). تسلط به آرایه ها در jS مثل تسلط به جمله سازی در زبان فارسی عه. و تسلط به آرایه ها هم یعنی تسلط به متد هایی که روی آرایه ها هست. اگه واقعا تا این جا حوصله کردی که بخونی بهت تبریک میگم تو یک قهرمانی!