تکرار آرایه (Array Iteration) در JS

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

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

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

متد forEach() در JS

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

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

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

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

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 (value) {
  text += `${value}<br>`;
});

متد map() در JS

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

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

نکته: متد 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 پارامتر دریافت می کند:

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

متد flatMap() در JS

متد ()flatMap ترکیب دو متد flat و map است.

  • متد flatmap در هر تکرار مقدار را return می کند.
  • متد flatmap یک آرایه جدید می سازد.
  • در متد flatmap ممکن است طول آرایه جدید با آرایه اصلی متفاوت باشد.
const numbers1 = [[70, 7], [100, 1], [15, 5]];
const numbers2 = numbers1.flatMap(x => x.map(y => y * 2));

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

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

متد filter() در JS

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

  • متد filter در هر تکرار، اگر مقدار برگشتی true باشد مقدار را بر میگرداند. در غیراینصورت بر نمی گرداند.
  • متد filter یک آرایه جدید می سازد.
  • معمولا در متد filter طول آرایه جدید کمتر از آرایه اصلی است.
const numbers1 = [20, 7, 9, 22, 27];
const numbers2 = numbers1.filter(x => x < 10);

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

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

متد reduce() در JS

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

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

  • پارامتر اول: مقدار المان فعلی یا برگشتی تابع قبلی
  • پارامتر دوم: مقدار المان بعدی
  • پارامتر سوم: ایندکس المان فعلی
  • پارامتر چهارم: کل آرایه
const numbers = [1, 3, 5, 7, 9];
let sum = numbers.reduce(function (prev, next, index, array) {
    return prev + next;
});

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

  • در بار اول پارامتر 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(function (prev, next) {
        return prev + next;
    }, 100);

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

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

    متد reduceRight() در JS

    متد 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() در JS

    متد 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() در JS

    متد 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 می پردازیم.

    متد every متد some
    مقدار بولین برمی گرداند مقدار بولین برمی گرداند
    روی آرایه اصلی تغییری ایجاد نمی کند روی آرایه اصلی تغییری ایجاد نمی کند
    وقوع شرط روی همه المان ها را بررسی می کند وقوع شرط برای حداقل یکبار روی ارایه را بررسی می کند
    با اولین برگشتی false نتیجه false می شود با اولین برگشتی true نتیجه true می شود
    با اولین برگشتی false حلقه پایان می یابد با اولین برگشتی true حلقه پایان می یابد

    متد keys() در JS

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

    const persons = ["Ehsan", "Amir", "Reza", "Mobin"];
    const keys = persons.keys();
    
    for (const x of keys) {
        text += `${x}: ${persons[x]}<br>`;
    }

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

    متد entries() در JS

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

    const persons = ["Ehsan", "Amir", "Reza", "Mobin"];
    const entries = persons.entries();
    
    for (const [key, value] of entries) {
        text += `${key}: ${value}<br>`;
    }

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

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

    متد Array with() در JS

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

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

    • پارامتر اول: ایندکس مورد نظر
    • پارامتر دوم: مقدار جدید
    const persons = ["Ehsan", "Amir", "Reza", "Mobin"];
    const updated_persons = persons.with(1, "Iman");

    عمگر ... در JS یا spread syntax

    عملگر ... ( سه نقطه) پشت نام آرایه قرار می گیرد و می تواند المان های داخل آرایه را انتشار دهد. 

    const class1 = ["Ehsan", "Amir"];
    const class2 = ["Reza", "Mobin"];
    
    const all_class = [...class1, ...class2];

    خلاصه درس

    در این آموزش با موارد زیر آشنا شدیم:

    • متد forEach()
    • متد map()
    • متد flatMap()
    • متد filter()
    • متد reduce()
    • متد reduceRight()
    • متد every()
    • متد some()
    • متد keys()
    • متد entries()
    • متد with()
    • عملگر ... - spread syntax

    توسعه دهندگان
    احسان اسلامی