متد های تکرار آرایه JS

هر نوع داده (data type) دارای متدها و ویژگی های مخصوص به خود است. در این بخش متدهای تکرار آرایه را بررسی می کنیم.

array.forEach() تکرار کامل آرایه array.map() تکرار کامل آرایه + ساخت آرایه جدید array.flatMap() تکرار کامل آرایه + ساخت آرایه جدید array.filter() فیلتر کردن نتایج آرایه array.reduce() تکرار و کاهش آرایه به یک مقدار array.reduceRight() تکرار و کاهش آرایه به یک مقدار - راست به چپ array.every() بررسی وقوع شرط روی همه المان ها array.some() بررسی وقوع شرط برای حداقل یکبار array.keys() برگرداندن کلیدهای آرایه array.entries() برگرداندن جفتی المان های آرایه  array.with() ویرایش مقدار آرایه ...array انتشار المان های آرایه

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

متد forEach()، یک تابع را روی همه المان های آرایه اجرا می کند.

array.forEach(function (value, index, array) {
    // ...
});

این متد، یک تابع با 3 پارامتر دریافت می کند:

• پارامتر اول: مقدار المان (اختیاری)
• پارامتر دوم: ایندکس المان (اختیاری)
• پارامتر سوم: کل آرایه (اختیاری)

const persons = ["Ehsan", "Amir", "Reza", "Mobin"];
persons.forEach(function (value, index, array) {
    text += `${index}: ${value}<br>`;
});

const persons = ["Ehsan", "Amir", "Reza", "Mobin"];
persons.forEach(function (val) {
  text += `${val}<br>`;
});

نکته: در JS حلقه foreach وجود ندارد. و جایگزین آن متد تکرار forEach برای آرایه ها وجود دارد.

متد map() عملکردی مشابه forEach دارد اما:

• متد map در هر تکرار مقدار را return می کند.
• متد map یک آرایه جدید می سازد.
• در متد map همیشه طول آرایه جدید با آرایه اصلی یکسان است.

array.map(function (value, index, array) {
    // return ...
});

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

const numbers1 = [20, 7, 9, 22, 27];
const numbers2 = numbers1.map(function (value) {
    return value * 2;
});

نمونه کد بالا را می توان با استفاده از تابع پیکانی به صورت زیر نوشت.

const numbers1 = [20, 7, 9, 22, 27];
const numbers2 = numbers1.map(value => value * 2);

نکته: همیشه طول آرایه جدید با طول آرایه اصلی یکسان است.

این متد یک تابع با 3 پارامتر دریافت می کند:

• پارامتر اول: مقدار المان (اختیاری)
• پارامتر دوم: ایندکس المان (اختیاری)
• پارامتر سوم: کل آرایه (اختیاری)

array.flatMap(function (value, index, array) {
    // return ...
});

const numbers1 = [[70, 7], [100, 1], [15, 5]];
const numbers2 = numbers1.flatMap(x => x.map(y => y * 2));

این متد یک تابع با 3 پارامتر دریافت می کند:

• پارامتر اول: مقدار المان (اختیاری)
• پارامتر دوم: ایندکس المان (اختیاری)
• پارامتر سوم: کل آرایه (اختیاری)

متد ()filter برای فیلتر کردن آرایه استفاده می شود.

array.filter(function (value, index, array) {
    // return ...
});

• متد filter در هر تکرار، اگر مقدار برگشتی true باشد مقدار را بر می گرداند. در غیراینصورت بر نمی گرداند.
• متد filter یک آرایه جدید می سازد.
• در متد filter طول آرایه جدید کمتر یا برابر آرایه اصلی است.

const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.filter(x => x < 10);

این متد یک تابع با 3 پارامتر دریافت می کند:

• پارامتر اول: مقدار المان (اختیاری)
• پارامتر دوم: ایندکس المان (اختیاری)
• پارامتر سوم: کل آرایه (اختیاری)

متد ()reduce برای انجام عملیات (مانند جمع المان های آرایه با هم) روی المان های آرایه و به دست آورد یک نتیجه استفاده می شود.

 متد reduce یک تابع با چهار پارامتر دریافت می کند:

• پارامتر اول: مقدار المان فعلی یا برگشتی تابع قبلی
• پارامتر دوم: مقدار المان بعدی
• پارامتر سوم: ایندکس المان فعلی
• پارامتر چهارم: کل آرایه

const numbers = [1, 3, 5, 7, 9];
let sum = numbers.reduce(function (prev, next, index, array) {
    return prev + next;
});

/* نتیجه
25

1: prev: 1, next: 3
2: prev: 4, next: 5
3: prev: 9, next: 7
4: prev: 16, next: 9
*/

 همانطور که در نمونه کد بالا دیدید، المان های آرایه را با هم جمع کردیم و به نتیجه 25 رسیدیم.

• در تکرار اول، پارامتر prev برابر 1 و پارامتر next برابر 3 است.
• در تکرار دوم، پارامتر prev برابر با برگشتی تابع قبلی یعنی 4 (1 + 3) و پارامتر next برابر 5 است.
• در تکرار سوم، پارامتر prev برابر با برگشتی تابع قبلی یعنی 9 (4 + 5) و پارامتر next برابر 7 است.
• در تکرار چهارم، پارامتر prev برابر با برگشتی تابع قبلی یعنی 16 (9 + 7) و پارامتر next برابر 9 است.

نکته: دفعات تکرار متد reduce برابر با طول آرایه منهای یک (array.length - 1) است.

نکته: متد ()reduce آرایه اصلی را تغییر نمی دهد.

نکته: معمولا از متد reduce برای انجام عملیات ریاضی روی تمام المان های آرایه استفاده می شود.

const numbers = [1, 3, 5, 7, 9];
let sum = numbers.reduce((prev, next) => prev + next);

متد ()reduce می تواند پارامتر دوم را به عنوان مقدار اولیه دریافت کند.

const numbers = [1, 3, 5, 7, 9];
let sum = numbers.reduce(func, 100);

function func(prev, next) {
    return prev + next;
}

نمونه کد بالا را می توان به این صورت خلاصه نوشت.

const numbers = [1, 3, 5, 7, 9];
let sum = numbers.reduce((prev, next) => prev + next, 100);

این متد 2 پارامتر دریافت می کند:

• پارامتر اول: تابع برگشتی که خود شامل چهار پارامتر است (اجباری)
• پارامتر دوم: مقدار اولیه (اختیاری)

متد reducerRight() عملکردی مشابه متد reduce دارد. با این تفاوت که متد reduceRight از انتهای آرایه (سمت راست) شروع به تکرار می کند.

const numbers = [1, 3, 5, 7, 9];
let sum = numbers.reduceRight(func, 100);

function func(prev, next) {
    return prev + next;
}

این متد 2 پارامتر دریافت می کند:

• پارامتر اول: تابع برگشتی که خود شامل چهار پارامتر است (اجباری)

• پارامتر دوم: مقدار اولیه (اختیاری)

متد every()، وقوع شرط را روی تمام المان های آرایه چک می کند.

• این متد در صورت برخورد به اولین نتیجه false، از حلقه تکرار خارج، و نتیجه false را برمی گرداند.
• در غیر اینصورت، true برمی گرداند.

نکته: نتیجه نهایی متد every یک بولین است.

const numbers = [11, 13, 9, 15, 17];
let all_over_10 = numbers.every(function (value) {
    return value > 10;
});

در این نمونه کد به صورت خلاصه از متد every استفاده کرده ایم.

const numbers = [11, 13, 29, 15, 17];
let all_over_10 = numbers.every(value => value > 10);

این متد یک تابع با 3 پارامتر دریافت می کند:

• پارامتر اول: مقدار المان (اختیاری)
• پارامتر دوم: ایندکس المان (اختیاری)
• پارامتر سوم: کل آرایه (اختیاری)

متد some()، وقوع شرط را برای حداقل یک المان آرایه چک می کند.

• این متد در صورت برخورد به اولین نتیجه true، از حلقه تکرار خارج، و نتیجه true را برمی گرداند.
• در غیر اینصورت، false برمی گرداند.

نکته: نتیجه نهایی متد some یک بولین است.

const numbers = [11, 13, 9, 15, 17];
let has_over_10 = numbers.some(function (value) {
    return value > 10;
});

این متد یک تابع با 3 پارامتر دریافت می کند:

• پارامتر اول: مقدار المان (اختیاری)
• پارامتر دوم: ایندکس المان (اختیاری)
• پارامتر سوم: کل آرایه (اختیاری)

تفاوت متد some با every

اگر در متد every و some از شرط زیر استفاده کنیم:

numbers.every(value => value > 10);
numbers.some(value => value > 10);

متد every بررسی می کند که آیا همه المان های آرایه، بزرگتر از 10 هستند یا خیر؟

متد some بررسی می کند آیا آرایه یک المان بزرگتر از 10 دارد یا خیر؟

در جدول زیر به مقایسه متد every و some می پردازیم.

متد keys() یک  شیء از کلیدهای آرایه (ایندکس های آرایه) برمی گرداند.

const persons = ["Ehsan", "Amir", "Reza", "Mobin"];
const keys = persons.keys();

keys.forEach(function (value) {
    text += `${value}: ${persons[value]}<br>`;
}

نکته: متد keys یک متد مشترک در آرایه و اشیاء است. این متد غالبا در اشیا استفاده می شود و در آرایه ها استفاده خاصی ندارد.

متد entries() یک شیء به صورت جفت کلید/مقدار (key/value) برمی گرداند.

const persons = ["Ehsan", "Amir", "Reza", "Mobin"];
const entries = persons.entries();

entries.forEach(function (value) {
    text += `${value}
`;
})

نکته: متد entries یک متد مشترک در آرایه و اشیاء است. این متد غالبا در اشیا استفاده می شود و در آرایه ها استفاده خاصی ندارد.

برگشتی متد entries() به صورت جفت های کلید/مقدار است.

[0, "Ehsan"]
[1, "Amir"]
[2, "Reza"]
[3, "Mobin"]

متد with() راهی امن برای به روز رسانی المان های آرایه، بدون تغییر آرایه اصلی است.

 متد with دو پارامتر دریافت می کند:

• پارامتر اول: ایندکس مورد نظر
• پارامتر دوم: مقدار جدید

const persons = ["Ehsan", "Amir", "Reza", "Mobin"];
const updated_persons = persons.with(1, "Iman");