الدوال السهمية - JavaScript

تعد طريقة ForEach إحدى الطرق العديدة للتكرار خلال المصفوفات. لكل طريقة ميزات مختلفة ، والأمر متروك لك ، اعتمادًا على ما تفعله ، لتحديد الطريقة التي يجب استخدامها.

بفرض لديك المصفوفة التالية:
 

const numbers = [1, 2, 3, 4, 5];

فإن الحلقة التكرارية التقليدية خلال المصفوفة هي:

for (i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
} 

أما ما يميّز ForEach هو أنها تستخدم ظيفة مختلفة عن "for loop" الكلاسيكية. فيمرر التابع forEach تابع للرد Callback لكل عنصر من عناصر المصفوفة مع البارمترات التالية:

• القيمة الحالية للعنصر
• رقم فهرس Index العنصر الحالي
• غرض Object من المصفوفة الذي ينتمي إليه العنصر الحالي

فمثلاً يمكن تنفيذ تابع محدد عند المرور على كل عنصر ضمن المصفوفة:

numbers.forEach(function(number) {
    console.log(number);
});

فيكون الناتج: طباعة الأرقام 1،2،3،4،5

ومثال على استخدام الفهرس كمتحول في الحلقة:

numbers.forEach((number, index) => {
    console.log('Index: ' + index + ' Value: ' + number);
});

وعندها يكون الناتج: طباعة الأرقام مع فهارسها كالتالي:

Index: 0 , Value 1 - Index: 1 Value 2 - Index 2 Value 3 ....
وبالمقابل يمكن استخدام (السهم) أو ما يعرف بـ ES6 كالتالي:
 

numbers.forEach(number => console.log(number));

وهي تقوم بنفس الوظيفة تماماً ولكن تستخدم فقط لتسهيل قراءة الكود وترتيبه وجعله مختصر خصوصاً في الأكواد المعقدة و الحلقات والشروط المتداخلة والمتكررة بحيث يمكن اختصارها بأسطر بسيطة ضمن الكود.

هذا السهم يخص ما يسمى بالدوال السهمية arrow functions و هي إضافة جديدة تم إضافتها إلى JavaScript في ES6.

, الدوال السهمية هي صياغة بسيطة وموجزة لإنشاء الدوال، تمت تسمية هذا النوع من الدوال بالدوال السهمية لأنها تشبه السهم ببساطة، و صياغتها تكون كما يلي:

let func = function(arg1, arg2, ...argN) {
  return expression;
};

// لاخط أن السطر التالي مقابل لما سبق و لكنه أكثر إيجازًا
//  وحيد expression  لأن الدالة تقوم بعملية واحدة فقط return قمنا بالاستغناء عن الأقواس المجعدة و كلمة 


let func = (arg1, arg2, ...argN) => expression

مثال:

let sum = (a, b) => a + b;

/* صياغة الدالة السهمية أصغر من الصياغة العادية التالية
let sum = function(a, b) {
  return a + b;
};
*/

alert( sum(1, 2) ); // 3

أما بخصوص forEach فهي تقوم بتنفيذ دالة ما على كل عنصر من عناصر المصفوفة التي تقوم بالدوران عليها. و يمكنك استخدام forEach مع الدوال العادية أو الدوال السهمية.

الأكواد التالية مكافئة للمثال الذي قمت بإرفاقه و لكن بالدوال العادية

blocks.forEach( function(block, index) {

  block.style.order = orderRange[index];
  block.addEventListener('click', function(){
  
    flipBlock(block);
    
  });
  
});

يمكنك أن تجد العديد من المقالات في الأكاديمية تشرح الدوال السهمية و نسخة es6، أنصحك بأن تقوم بقراءتها. أيضًا أريد أن أنوه على أن تعلم es6 و النسخ الأحدث  أمر مهم و ضروري لك كمطور JavaScript

مرحبا مؤمن،

إن وجود الأسهم يعبر عن مايدعى Arrow Function وهي طريقة مختصرة لكتابة الدوال في جافا سكربت، بدلا من الطريقة العادية التي تستعمل الكلمة المحجوزة function.

الطريقة التي تعمل بها forEach هي استقبال call back function و تنفيذه لكل عنصر من عناصر المصفوفة المطبقة عليها.

الطريقة العامة لكتابة forEach هي :

array.forEach((value, index, array) => {callback function body}, thisArg);
value قيمة العنصر الحالي الخاص بهذا التكرار
index دليل العنصر
array المصفوفة الأساسية


// مثال
var numbers = [65, 44, 12, 4];
numbers.forEach(myFunction)

function myFunction(item, index, arr) {
  arr[index] = item * 10;
}

// الخرج output
650,440,120,40


// معظم الاستخدامات يكون فقط للقيمة
array.forEach((i) => callback(i));

مثال:

['a', 'b', 'c', 'd'].forEach(function(item, index) {
  console.log(item, index);
});

// الخرج output

a   0
b   1
c   2
d   3

وهذه عدة طرق لتطبيق هذا:

const colors = ['blue', 'green', 'white'];

// الطريقة العادية
// تعريف التابع
function iterate(item) {
  console.log(item);
}
// استدعائه لكل عنصر في المصفوفة
colors.forEach(iterate);

// الطريقة الثانية
// كتابة الدالة في قلب الحلقة
colors.forEach(function(item) {
  console.log(item);
});

// الطريقة الثالثة
// كتابة الدالة بطريقة مختصرة في قلب الحلقة
colors.forEach(c => console.log(c));

مقارنة بين حلقة for  مختصرة وحلقة forEach :

var a = ["a", "b", "c"];
a.forEach(function(entry) {
    console.log(entry);
});

const a = ["a", "b", "c"];
for (let val of a) {
    console.log(val);
}

// المختصرة for  توسيع استخدام حلقة 
// هنا نصل لديل العناصر و نطبعها
for(let element in arr) {
  console.log(element);
}

يمكنك متابعة توثيق حسوب لحلقات التكرار في جافاسكربت من هنا

و حلقة forEach من هنا

بالتوفيق

بتاريخ 21 ساعات قال Yomna Raouf:

الأكواد التالية مكافئة للمثال الذي قمت بإرفاقه و لكن بالدوال العادية

blocks.forEach( function(block, index) {

  block.style.order = orderRange[index];
  block.addEventListener('click', function(){
  
    flipBlock(block);
    
  });
  
});

 

ينفع في الداله التانيه الجوه foreach اعمل دله سهميه زي كده

blocks.forEach( function(block, index) {

  block.style.order = orderRange[index];
  block.addEventListener('click', => () { 
 
    flipBlock(block);
    
  });
 
});

بتاريخ 9 ساعات قال Momen Gamal:

ينفع في الداله التانيه الجوه foreach اعمل دله سهميه زي كده

blocks.forEach( function(block, index) {

  block.style.order = orderRange[index];
  block.addEventListener('click', => () { 
 
    flipBlock(block);
    
  });
 
});

 

نعم بإمكانك القيام بذلك.

blocks.forEach( function(block, index) {

  block.style.order = orderRange[index];
  
  block.addEventListener('click', () => { // لديك خطأ بسيط هنا يتم كتابة القوس أولًا ثم السهم // not => () 
 
    flipBlock(block);
    
  });
 
});