از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
راهنمای متد forEach() جاوا اسکریپت متد forEach() یکی از روشهای متعددی است که می‌توان از آن برای حلقه زدن محتویات یک آرایه استفاده کرد و هر عنصر را به صورت متوالی نشان داد. این ویژگی‌های متمایز را دارد که آن را از سایر تکنیک‌های تکرار روی آرایه‌ها متمایز می‌کند، به این معنی که این شما هستید که انتخاب کنید کدام روش را انتخاب کنید…
سرفصلهای مطلب
معرفی
را forEach() متد یکی از روش‌هایی است که می‌توان از آن برای حلقه زدن محتوای یک آرایه و نمایش هر عنصر به صورت متوالی استفاده کرد. دارای ویژگی های متمایز است که آن را از سایر تکنیک های تکرار روی آرایه ها متمایز می کند، به این معنی که این شما هستید که انتخاب کنید بر اساس کدام روش از آن استفاده کنید. روی کاری که شما انجام می دهید
در این راهنما، روش استفاده از آن را یاد خواهید گرفت
forEach()روش و روش عملکرد آن با استفاده از نمونه های کد واقعی. ما همچنین مقایسه خواهیم کردforEach()روش وforحلقه بزنید تا بتوانید بین دو مورد از آنها تفاوت قائل شوید و بدانید که چه زمانی باید یکی را از دیگری انتخاب کنید.
نحو و پارامترها
را forEach() متد یک نحو بسیار ساده دارد:
forEach(callback(currentElement, index, arr), thisValue);
به عنوان یک پارامتر، a را می پذیرد callback تابع و آن را برای هر ورودی در آرایه اجرا می کند. این callback تابع سه آرگومان می گیرد – the currentElement (الزامی)، آن است index ( index از currentElementو آرایه (arr) که عنصر به آن تعلق دارد. در نهایت، thisValue پارامتر (اختیاری) به عنوان مقدار استفاده می شود this در callback.
توجه داشته باشید: تنها پارامتر مورد نیاز این است currentElement، که مقدار عناصر آرایه را نشان می دهد. را index و currentElement آرگومان‌هایی هستند که بیشتر از همه استفاده می‌کنید.
روش استفاده از جاوا اسکریپت برای هر() روش
بیایید نگاهی به forEach() روش در عمل همانطور که قبلاً بیان کردیم، می‌توانید از آن برای تکرار یک آرایه و اعمال تابع callback برای هر عنصر آن آرایه استفاده کنید. در این بخش روش اعلان تابع callback مناسب و روش استفاده از هر یک از پارامترهای آن را توضیح خواهیم داد.
در نسخه های قبلی جاوا اسکریپت، قبل از ES6، باید تابع callback را به صورت زیر اعلام کنید:
const ages = (20, 28, 19, 56);
const newAges = ();
ages.forEach(function (age) {
newAges.push(age + 5);
});
console.log(newAges);
// Output: (25, 33, 24, 61)
یا می‌توانید تابع callback را در جایی خارج از آن تعریف کنید forEach() متد و با استفاده از نحو زیر آن را فراخوانی کنید:
const ages = (20, 28, 19, 56);
const newAges = ();
ages.forEach(increaseAgeBy5);
function increaseAgeBy5(age) {
newAges.push(age + 5);
}
console.log(newAges);
// Output: (25, 33, 24, 61)
هر دوی اینها روشهای بسیار خوانا و منظمی برای استفاده از a هستند forEach() روش، اما ما می توانیم نحو را بیشتر ساده کنیم. از ES6، ما می توانیم یک تابع callback را به عنوان یک تعریف کنیم تابع فلش:
const ages = (20, 28, 19, 56);
const newAges = ();
ages.forEach((age) => {
newAges.push(age + 5);
});
console.log(newAges);
// Output: (25, 33, 24, 61)
یا، می‌توانید تابع را کوچک کنید تا فقط:
const ages = (20, 28, 19, 56);
const newAges = ();
ages.forEach((age) => newAges.push(age + 5));
console.log(newAges);
// Output: (25, 33, 24, 61)
را فهرست مطالب پارامتر
را index یک پارامتر اختیاری است که می تواند برای ارزیابی موقعیت یک عنصر در آرایه اصلی استفاده شود. به عنوان مثال، می توانیم موقعیت و مقدار عنصر را نمایش دهیم:
const courses = ('Biology', 'Mathematics', 'Chemistry', 'Physics');
courses.forEach(function (course, index) {
console.log(index + ': ' + course);
});
این نتیجه در:
0: Biology
1: Mathematics
2: Chemistry
3: Physics
را آرایه پارامتر
را array پارامتر به خود آرایه اصلی ارجاع می دهد. این یک پارامتر اختیاری است که معمولاً به ندرت از آن استفاده می کنید، زیرا از قبل به هر عنصر جداگانه دسترسی دارید و می توانید عملیات را اجرا کنید. روی آنها اگر آن را به عنوان پارامتری از console.log()، کل آرایه یک بار برای هر عنصر در آرایه چاپ می شود:
const courses = ('Biology', 'Mathematics', 'Chemistry', 'Physics');
courses.forEach(function (course, index, array) {
console.log(array);
});
این نتیجه در:
( 'Biology', 'Mathematics', 'Chemistry', 'Physics' )
( 'Biology', 'Mathematics', 'Chemistry', 'Physics' )
( 'Biology', 'Mathematics', 'Chemistry', 'Physics' )
( 'Biology', 'Mathematics', 'Chemistry', 'Physics' )
جاوا اسکریپت رایج برای هر() مثال ها
با مقدمه خارج از راه – اجازه دهید به چند مورد استفاده رایج از آن شیرجه بزنیم forEach() روش. در این بخش، روش حلقه زدن در میان آرایه ای از اشیاء و روش محاسبه مجموع تمام عناصر در یک آرایه را نشان خواهیم داد – هرچند، می توانید هر تابع فراخوان دلخواه را تعریف کنید.
چگونه از میان آرایه ای از اشیا بر اساس مقدار حلقه بزنیم
دست پایین – رایج ترین مورد استفاده از forEach() روش این است که print هر عنصر (یا برخی از فیلدهای آنها) از یک آرایه:
const students = (
{ firstName: 'John', lastName: 'Doe' },
{ firstName: 'Stephen', lastName: 'Matt' },
{ firstName: 'Abigail', lastName: 'Susu' },
);
students.forEach((student) => {
console.log(`${student.firstName} ${student.lastName}`);
});
این نتیجه در:
John Doe
Stephen Matt
Abigail Susu
چگونه عناصر آرایه یا فیلدهای آنها را جمع کنیم
بیایید با توضیح اینکه چگونه می‌توانیم همه آیتم‌ها را در یک آرایه اضافه کنیم و آن را نمایش دهیم ادامه دهیم sum:
const students = (
{ firstName: 'John', lastName: 'Doe', tuition: 5000},
{ firstName: 'Stephen', lastName: 'Matt', tuition: 7500 },
{ firstName: 'Abigail', lastName: 'Susu', tuition: 6000 },
);
sum = 0;
students.forEach((student) => {
sum += student.tuition;
});
console.log(sum);
// Output: 18500
متد forEach(). در مقابل برای حلقه
جاوا اسکریپت چند راه را برای تکرار بر روی عناصر یک آرایه در اختیار ما قرار می دهد – از جمله مهمترین آنها for حلقه و forEach() روش. هر دوی آنها به طور مشابه کار می کنند و در نهایت از نظر عملکرد تقریباً معادل هستند. فقط چند تفاوت بین آنها وجود دارد، بنابراین، برای کمک به شما در انتخاب یکی از آنها، ما این تفاوت ها را در این بخش پوشش خواهیم داد.
دامنه نام های متغیر
را forEach() متد یک محدوده تابع دارد – همه نام متغیرها را در محدوده تابع پاسخ به تماس خود نگه می دارد. اگر متغیری را خارج از آن اختصاص دهید forEach() متد و در صورت وجود تضاد (همان نام متغیر) در حلقه از آن استفاده کنید – از تابع callback استفاده می شود. به عنوان مثال، فرض کنید ما یک را ایجاد می کنیم student متغیر و تخصیص Joy به آن اگر از میان دانش‌آموزان حلقه می‌زدیم، هر یک به‌عنوان یک نشان می‌داد student، ما یک تضاد نام متغیر خواهیم داشت:
const student = 'Joy';
const students = ('Mark', 'Jane', 'John', 'Sarah');
students.forEach((student) => {
console.log(student);
// Output: "Mark" "Jane" "John" "Sarah"
});
console.log(student);
// Output: "Joy"
استفاده چند بار از یک نام متغیر کار خوبی نیست و فقط به سردرگمی می‌افزاید – اما شایان ذکر است که forEach() محدوده عملکردی دارد.
مدیریت عناصر از دست رفته
آ for حلقه و forEach() روش به طور متفاوتی عناصر گم شده را مدیریت می کند. فرض کنید یک آرایه داریم که برخی از عناصر در آن وجود ندارد:
const students = ('Mark', , 'Jane', 'John', , 'Sarah');
با نگاهی به آرایه بالا، متوجه خواهید شد که برخی از عناصر گم شده اند (یک نادر در students آرایه). اول، بیایید حلقه را بر روی students آرایه با for حلقه بزنید تا ببینید چگونه مقادیر از دست رفته را مدیریت می کند:
const students = ('Mark', , 'Jane', 'John', , 'Sarah');
const studentsList = ();
for (let i = 0; i < students.length; i++) {
studentsList.push(students(i));
}
console.log(studentsList);
// Output: ("Mark",undefined,"Jane","John",undefined,"Sarah")
در قطعه کد بالا، متوجه خواهید شد که ما یک کد دریافت می کنیم undefined ارزش روی شاخص اول و چهارم – students(1) و students(4). را for حلقه عناصر از دست رفته را به عنوان undefined ارزش های.
حال، بیایید نگاهی به چگونگی forEach() متد مقادیر از دست رفته را درمان می کند students آرایه:
const students = ('Mark', , 'Jane', 'John', , 'Sarah');
const studentsList = ();
students.forEach(function (student) {
studentsList.push(student);
});
console.log(studentsList);
// Output: ("Mark","Jane","John","Sarah")
forEach() شکاف مقادیر از دست رفته را رد می کند و حرکت می کند روی!
کد پاک و قابل خواندن
این کاملاً به شما بستگی دارد که تصمیم بگیرید کدام روش حلقه زدن از طریق یک آرایه کد تمیزتر و خواناتر را ارائه می دهد. را forEach() روش مطمئناً نحو مختصرتری دارد، بنابراین به طور کلی اگر خوانایی کد بالا باشد مناسب تر است. روی یک لیست اولویت
در این بخش، نمونه کدهایی را به شما می‌دهیم و به شما اجازه می‌دهیم تصمیم بگیرید که خواندن و درک کدام روش برای حلقه کردن آرایه‌ها آسان‌تر است.
فرض کنید مجموعه ای از دانش آموزان داریم. هر دانش آموز دارای نام و مجموعه ای از دوره هایی است که در آن شرکت می کنند:
const students = (
{ name: 'John', courses: ('Maths', 'English', 'Physics') },
{ name: 'Sarah', courses: ('Chemistry', 'Maths', 'Computer Science') },
);
فرض کنید می‌خواهیم نام هر دانش‌آموز و هر دوره‌ای را که یک دانش‌آموز در آن شرکت می‌کند نمایش دهیم.
ما می توانیم با استفاده از دو به آن دست پیدا کنیم for حلقه ها اولین حلقه روی همه دانش آموزان تکرار می شود و نام دانش آموز را ثبت می کند. مورد دوم در تمام دروسی که دانشجوی فعلی شرکت می کند تکرار می شود و آنها را یکی یکی ثبت می کند:
for (let i = 0; i < students.length; i++) {
let student = students(i);
console.log(student);
for (let k = 0; k < student.courses.length; k++) {
let subject = student.courses(k);
console.log(subject);
}
}
را for حلقه نیاز به دسترسی به آرایه با استفاده از موقت دارد i و k متغیرها، و سپس به هر عنصر با استفاده از نماد براکت. این ممکن است نامرتب به نظر برسد و سردرگمی زیادی به کد شما اضافه کند، زیرا درک آن در مقایسه با کد ساده نیست. forEach() روش:
students.forEach((student) => {
console.log(student);
student.courses.forEach((subject) => {
console.log(subject);
});
});
را forEach() متد به ما کمک می کند تا از شر متغیرهای شمارنده موقت خلاص شویم و خواندن و درک کد را بسیار آسان تر می کند. در این روش از a callback تابع و آن را برای هر عنصر در آرایه اعمال می کند، به این معنی که برای دریافت هر عنصر نیازی به استفاده از علامت براکت نداریم.
شکستن از یک حلقه
تاکنون ، ما اساساً فقط نمونه هایی را به نفع آن برجسته کرده ایم forEach() روش. اما یک مزیت متمایز از for حلقه توانایی آن است زودتر از یک حلقه خارج شوید در صورت لزوم
به عنوان مثال، فرض کنید می خواهید فقط یک دانش آموز به نام را برگردانید سارا از students آرایه. شما باید روی هر دانش آموز در آرایه تکرار کنید، بررسی کنید که آیا نام آن است سارا، و اگر دانش آموز پیدا شد از حلقه خارج شوید.
ممکن است فکر کنید می توانید از هر دو استفاده کنید for حلقه و forEach() روش برای تکرار بیش از students آرایه. اما، در واقع، اگر سعی کنید از آن استفاده کنید break داخل از forEach() روش، آن را پرتاب می کند SyntaxError.
بنابراین، اگر باید از حلقه خارج شوید، احتمالاً باید از a استفاده کنید for حلقه:
const students = ('Mark', 'Jane', 'Sarah', 'John', 'Sarah');
for (let i = 0; i < students.length; i++) {
if (students(i).name === 'Sarah') {
console.log(`>> ${students(i).name} is the most brilliant lady in the class`);
break;
}
console.log(`> Name of the current student is ${students(i)}`);
}
این نتیجه در:
> Name of the current student is Mark
> Name of the current student is Jane
>> Sarah is the most brilliant lady in the class
توجه داشته باشید: همین امر در مورد return و continue. هیچ راهی برای ترمز کردن از یک حلقه در وجود ندارد forEach() روش – نه حتی با return یا continue.
همگام سازی/انتظار
را forEach() روش سازگار نیست async کارکرد. حتی اگر شما اعلام کنید async عملکرد در داخل forEach() مسدود کنید، آن طور که انتظار می رود رفتار نمی کند. راهی برای ساختن وجود ندارد async/await کار با forEach() روش. بنابراین، اگر شما نیاز به کد خود دارید async سازگار، استفاده کنید for حلقه در عوض!
استفاده کردن برای هر() با سایر ساختارهای داده
در درجه اول، forEach() روش برای حلقه از طریق مجموعه ای از عناصر استفاده می شود. از طرف دیگر ، می توانید از طریق سایر ساختارهای داده – مجموعه ها و نقشه ها حلقه کنید. در این بخش ، چند نمونه ساده را مشاهده خواهیم کرد که نشان می دهد چگونه می توان از طریق یک مجموعه و یک نقشه حلقه کرد.
چگونه به حلقه حلقه آ تنظیم استفاده کردن برای هر()
شما می توانید از طریق عناصر مجموعه JavaScript با استفاده از آن تکرار کنید forEach() روش. مثلا:
const nums = new Set((11, 25, 35, 47, 25, 47));
nums.forEach(myFunction);
function myFunction(num) {
console.log(num);
}
این نتیجه در:
11
25
35
47
توجه داشته باشید: آ Set مجموعه ای از موارد منحصر به فرد است ، یعنی هیچ عنصر قابل تکرار است.
چگونه به حلقه حلقه آف نقشه استفاده کردن برای هر()
شما می توانید از طریق عناصر یک نقشه با استفاده از forEach() روش، دسترسی به key و value از هر ورودی، به جای خود ورودی:
// Declaring map
const map = new Map();
// Inserting key/value pairs
map.set('greeting', 'Hello');
map.set('firstName', 'John');
map.set('lastName', 'Doe');
// Loop through with forEach
map.forEach((value, key) => {
console.log(`${key} - ${value}`);
});
این نتیجه در:
greeting - Hello
firstName - John
lastName - John
نتیجه
در این راهنما ، ما نگاهی به روش JavaScript انداخته ایم forEach() روش کار می کند ، و اینکه چگونه می توانیم از آن برای حلقه از طریق عناصر یک آرایه استفاده کنیم. ما نگاهی به استدلال های همراه ، مانند currentElement، index، و array که به شما امکان می دهد عناصر خاصی را از یک آرایه دریافت کنید.
در نهایت، ما نگاهی به چندین مثال انداخته‌ایم که تفاوت بین آنها را پوشش می‌دهد forEach() روش و for حلقه، و روش حلقه زدن از طریق دیگر ساختارهای داده (مجموعه ها و نقشه ها) با استفاده از forEach() روش.
منتشر شده در 1403-01-10 16:48:03
