دورة react js للمبتدئين الدرس الثاني

منذ 5 سنوات imadbelasri Reactjs
RS

فهاد الدرس الثاني من دورة react js غادي نكملوا هاد المقدمة على ES6 ولي بديناها بمجموعة من les fonctions لي غادي نحتاجوهم فاش نبداو ف react فغادي نشوفوا المزيد منهم فهاد الدرس ولي أغلبهم كيف قلنا غادي نخدموا بهم ف react.


1- استعمال ل FONCTION REDUCE ف ES6

فل fonction reduce كتمكن باش نحصل على مجموع ديال أعداد معينة فالمثال لي عندنا فيلا بغينا المجموع ديال النقط لي حددناهم ف grade فغادي نخدم ب reduce لي كتاخد sum لي هي المجموع و person لي هو ل objet من بعد كنجمع sum مع ل grade وعندي ايضا الصفر لي هو القيمة الأولية ديال sum.

فيلا فتحتي المتصفح وشفتي ل console غادي تحصل على هاد النتيجة :



الكود لي زدنا ف main.js هو :


                                                    
                                                        //
//use reduce to get the sum of grades
//0 is sum initialisation
const grades = names.reduce(function(sum,person){
    return sum + person.grade;
},0);

console.log(grades);
                                                    
                                                

2- استعمال ل FONCTION FOR ف ES6

ف for بحالها بحال ل boucle كتدور على مجموعة من القيم وكتعرضها فالمثال لي عندنا خدمت بها وعطيت person لي هو كل قيمة ف names منبعد عرضت الإسم فيلا فتحتي المتصفح وشفتي ل console غادي تحصل على هاد النتيجة :



الكود لي زدنا ف main.js هو :

                                                        
                                                            //
//use of  for 
for(person of names){
    console.log(person.name);
}
                                                        
                                                    

3- استعمال ل FONCTION FOREACH ف ES6

ف forEach بحالها بحال for كتدور على مجموعة من القيم وكتعرضها فالمثال لي عندنا خدمت بها وعرضت الأسماء كاملين يلا مشيتي ل console غادي تلقى نفس النتيجة السابقة.

الكود لي زدنا ف main.js هو :

                                                        
                                                            //
names.forEach(function(person){
    console.log(person.name);
});
                                                        
                                                    

4- استعمال ل FONCTION MAP ف ES6

ف map بحالها بحال forEach غادي نخدمو بها بزاف ف react فهي  كتدور على مجموعة من القيم وكتعرضها فالمثال لي عندنا خدمت بها وعرضت الأسماء كاملين يلا مشيتي ل console غادي تلقى نفس النتيجة السابقة .

الكود لي زدنا ف main.js هو :

                                                        
                                                            //
const result2 = names.map(function(person){
    console.log( person.name);
});
                                                        
                                                    

دروس ذات صلة

RS

دورة react js للمبتدئين الدرس الأول

فهاد الدرس الأول من دورة react js للمبتدئين غادي نشوفوا مقدمة على ES6 لي هي javascript 2016 ولي جابت...


RS

دورة react js للمبتدئين الدرس الثالت

فهاد الدرس الثالت من دورة react js للمبتدئين غادي نكملو الدورة بالتطرق للمزيد من العناصر الجديدة ف E...


RS

دورة react js للمبتدئين الدرس الرابع

فهاد الدرس الرابع من دورة react js للمبتدئين غادي نبداو ف react فغادي نشوفوا كيفاش نزيدو أول projet...


RS

دورة react js للمبتدئين الدرس الخامس

فهاد الدرس الخامس من دورة react js غادي نشوفوا كيفاش نزيدو component آخر ومنبعد غادي نشوفوا كيفاش نع...


RS

دورة react js للمبتدئين الدرس السادس

فهاد الدرس السادس من دورة react js للمبتدئين غادي نكملوا الدورة ديالنا و نشوفوا كيفاش نرسلو معلومات...


RS

دورة REACT JS للمبتدئين الدرس السابع

فهاد الدرس السابع من دورة react js للمبتدئين غادي نشوفوا كيفاش نزيدو مجموعة ديال الاخبار ف state ومن...


RS

دورة react js للمبتدئين الدرس العاشر

فهاد الدرس العاشر من دورة react js للمبتدئين غادي نشوفوا ل event onClick من بعد ماشفنا onChange فالد...


RS

دورة react js للمبتدئين الدرس الحادي عشر

فهاد الدرس الحادي عشر من دورة react js للمبتدئين غادي نشوفوا كيفاش نستعملوا axios باش نسترجعوا les a...


RS

دورة REACT JS للمبتدئين الدرس الثاني عشر

فهاد الدرس الثاني عشر من دورة  react js للمبتدئين غادي نشوفوا حاجة مهمة ف react js هي routes لي كيمك...


RS

دورة react js للمبتدئين الدرس الثالت عشر

فهاد الدرس الجديد من دورة react js للمبتدئين غادي نشوفوا كيفاش نتعاملو مع les formulaires ف react js...