پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

ورود / عضویت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

۲۲
آبان

جلسه ۲۲ : متدهای تکرار آرایه در جاوا اسکریپت

دسته‌بندی‌ها :

جلسه ۲۲ : متدهای تکرار آرایه در جاوا اسکریپت

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

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

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

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

متد () forEach.

متد ()forEach یک تابع را روی هر یک از عناصر آرایه فراخوانی می کند.

مثال : متد foreach

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);

function myFunction(value, index, array) {
  txt = txt + value + "<br>"; 
}

1

2

3

4

5

6

7

var txt = "";

var numbers = [45, 4, 9, 16, 25];

numbers.forEach(myFunction);

function myFunction(value, index, array) {

txt = txt + value + "<br>";

}

خودتان امتحان کنید »

دقت داشته باشید که یک تابع سه آرگومان می گیرد :

value (مقدار)
index
خودآرایه

در مثال فوق فقط از پارامتر value (مقدار) استفاده شده است،مانند مثال زیر:

مثال : پارامتر value

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);

function myFunction(value) {
  txt = txt + value + "<br>"; 
}

1

2

3

4

5

6

7

var txt = "";

var numbers = [45, 4, 9, 16, 25];

numbers.forEach(myFunction);

function myFunction(value) {

txt = txt + value + "<br>";

}

خودتان امتحان کنید »

متد () forEach. در مرورگرهای زیر پشتیبانی می شود :

Chrome
Edge
Firefox
Safari
Opera

متد ()map

متد ()map با انجام یک تابع در هر عنصر آرایه یک آرایه جدید ایجاد می کند.

متد ()map تابع عناصر آرایه بدون مقادیر را اجرا نمی کند.

متد ()map آرایه اصلی را تغییر نمی دهد.

این مثال تعداد هر مقدار آرایه را ۲ برابر می کند:

مثال : ryjs_array_mapکاربرد متد map

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

function myFunction(value, index, array) {
  return value * 2;
}

1

2

3

4

5

6

var numbers1 = [45, 4, 9, 16, 25];

var numbers2 = numbers1.map(myFunction);

function myFunction(value, index, array) {

return value * 2;

}

وقتی که در فراخوانی یک تابع فقط از پارامتر مقدار استفاده می شود، پارامترهای index و آرایه می توانند حذف شوند:

مثال : حذف پارامترهای index و array

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

function myFunction(value) {
  return value * 2;
}

1

2

3

4

5

6

var numbers1 = [45, 4, 9, 16, 25];

var numbers2 = numbers1.map(myFunction);

function myFunction(value) {

return value * 2;

}

خودتان امتحان کنید »

متد ()map بجز در مرورگرهای Internet Explorer 8 و قدیمی تر در تمام مروگرهای دیگر پشتیبانی می شود.

متد ()filter

متد ()filter یک آرایه جدید با عناصر آرایه ایجاد می کند که تست می شود.

این مثال یک آرایه جدید از عناصر با مقدار بزرگتر از ۱۸ ایجاد می کند:

مثال : فیلتر آرایه

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

1

2

3

4

5

6

var numbers = [45, 4, 9, 16, 25];

var over18 = numbers.filter(myFunction);

function myFunction(value, index, array) {

return value > 18;

}

خودتان امتحان کنید »

در مثال بالا، در فراخوانی تابع، از پارامترهای index و آرایه استفاده نمی شود، بنابراین می توان آنها را حذف کرد:

مثال : حذف پارامترهای index و array

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

function myFunction(value) {
  return value > 18;
}

1

2

3

4

5

6

var numbers = [45, 4, 9, 16, 25];

var over18 = numbers.filter(myFunction);

function myFunction(value) {

return value > 18;

}

خودتان امتحان کنید »

متد ()filter بجز در مرورگرهای Internet Explorer 8 و قدیمی تر در تمام مروگرهای دیگر پشتیبانی می شود.

متد ()reduce

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

متد () reduce به ترتیب از چپ به راست در آرایه کار می کند.

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

این مثال مجموع اعداد را در یک آرایه پیدا می کند:

مثال : محاسبه ی مجموع اعداد در یک آرایه

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value, index, array) {
  return total + value;
}

1

2

3

4

5

6

var numbers1 = [45, 4, 9, 16, 25];

var sum = numbers1.reduce(myFunction);

function myFunction(total, value, index, array) {

return total + value;

}

خودتان امتحان کنید »

مثال فوق از پارامترهای index و array استفاده نمی کند. می توان آن را بازنویسی کرد:

مثال : حذف دو پارامتر index و array

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value) {
  return total + value;
}

1

2

3

4

5

6

var numbers1 = [45, 4, 9, 16, 25];

var sum = numbers1.reduce(myFunction);

function myFunction(total, value) {

return total + value;

}

خودتان امتحان کنید »

متد () reduce می تواند یک مقدار خاص را بپذیرد :

مثال : اختصاص مقدار خاص

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction, 100);

function myFunction(total, value) {
  return total + value;
}

1

2

3

4

5

6

var numbers1 = [45, 4, 9, 16, 25];

var sum = numbers1.reduce(myFunction, 100);

function myFunction(total, value) {

return total + value;

}

خودتان امتحان کنید »

متد ()reduce بجز در مرورگرهای Internet Explorer 8 و قدیمی تر در تمام مروگرهای دیگر پشتیبانی می شود.

متد ()reduceRight

متد () costRight یک تابع در هر عنصر آرایه برای تولید یک مقدار (کاهش آن) را اجرا می کند.

متد () reduceRight از آرشیو راست به چپ کار می کند. همچنین مشاهده کنید.

نکته : متد ()reduceRight آرایه ی اصلی را حذف نمی کند.

مثال زیر مجموع اعداد را در یک آرایه محاسبه می کند :

مثال : محاسبه ی مجموعه اعداد یک آرایه با حفظ اصل آرایه

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);

function myFunction(total, value, index, array) {
  return total + value;
}

1

2

3

4

5

6

var numbers1 = [45, 4, 9, 16, 25];

var sum = numbers1.reduceRight(myFunction);

function myFunction(total, value, index, array) {

return total + value;

}

خودتان امتحان کنید »

مثال فوق از پارامترهای index و array استفاده نمی کند. می توان آن را بصورت زیر نوشت:

مثال : حذف مقادیر index و array

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);

function myFunction(total, value) {
  return total + value;
}

1

2

3

4

5

6

var numbers1 = [45, 4, 9, 16, 25];

var sum = numbers1.reduceRight(myFunction);

function myFunction(total, value) {

return total + value;

}

خودتان امتحان کنید »

متد ()reduce بجز در مرورگرهای Internet Explorer 8 و قدیمی تر در تمام مروگرهای دیگر پشتیبانی می شود.

متد ()every

متد every() بررسی می کند که آیا تمام مقادیر آرایه یک تست را تحویل می دهند.

این مثال اینکه تمام مقادیر آرایه بزرگتر از ۱۸ باشد را بررسی می کند:

مثال : بازگرداندن تمام مقادیر بزرگتر از 18 در آرایه

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

1

2

3

4

5

6

var numbers = [45, 4, 9, 16, 25];

var allOver18 = numbers.every(myFunction);

function myFunction(value, index, array) {

return value > 18;

}

خودتان امتحان کنید »

هنگامی که فراخوانی تابع با استفاده از پارامتر اول تنها (value)، پارامترهای دیگر را می توان حذف کرد:

مثال : حذف مقادیر index و array

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

function myFunction(value) {
  return value > 18;
}

1

2

3

4

5

6

var numbers = [45, 4, 9, 16, 25];

var allOver18 = numbers.every(myFunction);

function myFunction(value) {

return value > 18;

}

خودتان امتحان کنید »

متد ()every بجز در مرورگرهای Internet Explorer 8 و قدیمی تر در تمام مروگرهای دیگر پشتیبانی می شود.

متد () some

متد () some بررسی می کند که آیا برخی از مقادیر آرایه یک تست را تحویل می دهند.

این مثال اینکه تمام مقادیر آرایه بزرگتر از ۱۸ باشد را بررسی می کند:

مثال : بررسی برخی از عناصر آرایه

var numbers = [45, 4, 9, 16, 25];
var someOver18 = numbers.some(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

1

2

3

4

5

6

var numbers = [45, 4, 9, 16, 25];

var someOver18 = numbers.some(myFunction);

function myFunction(value, index, array) {

return value > 18;

}

خودتان امتحان کنید »

متد () some بجز در مرورگرهای Internet Explorer 8 و قدیمی تر در تمام مروگرهای دیگر پشتیبانی می شود.

متد () indexOf

یک آرایه را برای یک مقدار عنصر جستجو کرده و موقعیت آن را بازمی گرداند.

نکته : اولین آیتم موقعیت ۰، آیتم دوم دارای موقعیت ۱ و… است.

مثال : جستجو در آرایه

var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");

1 2	var fruits = ["Apple", "Orange", "Apple", "Mango"]; var a = fruits.indexOf("Apple");

خودتان امتحان کنید »

متد ()indexOf بجز در مرورگرهای Internet Explorer 8 و قدیمی تر در تمام مروگرهای دیگر پشتیبانی می شود.

سینتکس

مثال :

array.indexOf(item, start)

1	array.indexOf(item, start)

item	ضروری ، شروع جستجو را مشخص می کند.
start	اختیاری ، انتهای جستجو را مشخص می کند.

اگر در متد ()indexOf مقداری پیدا نشود، -۱ بازگردانده می شود.

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

متد ()lastIndexOf

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

مثال : جستجو از انتها

var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");

1 2	var fruits = ["Apple", "Orange", "Apple", "Mango"]; var a = fruits.lastIndexOf("Apple");

خودتان امتحان کنید »

متد ()indexOf بجز در مرورگرهای Internet Explorer 8 و قدیمی تر در تمام مروگرهای دیگر پشتیبانی می شود.

سینتکس

مثال :

array.lastIndexOf(item, start)

1	array.lastIndexOf(item, start)

item	ضروری ، شروع جستجو را مشخص می کند.
start	اختیاری ، انتهای جستجو را مشخص می کند.

متد ()find

متد () find مقدار عنصر آرایه اول را که یک تست را می گذراند، باز میگرداند.

این مثال (عدد اول را باز می کند) عنصر اول که بزرگتر از ۱۸ است را برمی گرداند:

مثال : برگرداندن مقدار اولین عنصر آرایه

var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

1

2

3

4

5

6

var numbers = [4, 9, 16, 25, 29];

var first = numbers.find(myFunction);

function myFunction(value, index, array) {

return value > 18;

}

خودتان امتحان کنید »

متد ()indexOf بجز در مرورگرهای Internet Explorer 8 و قدیمی تر در تمام مروگرهای دیگر پشتیبانی می شود.
متد ()findIndex بجز در مرورگرهای Internet Explorer 8 و قدیمی تر در تمام مروگرهای دیگر پشتیبانی می شود.

مثال : متد findIndex

var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

1

2

3

4

5

6

var numbers = [4, 9, 16, 25, 29];

var first = numbers.findIndex(myFunction);

function myFunction(value, index, array) {

return value > 18;

}

خودتان امتحان کنید »

کلام آخر

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

QR: جلسه ۲۲ : متدهای تکرار آرایه در جاوا اسکریپت

به اشتراک بگذارید

توابع در جاوا اسکریپت

دیدگاه کاربران

تعداد دیدگاه : 0