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


فهاد الدرس الثالت من دورة react js للمبتدئين غادي نكملو الدورة بالتطرق للمزيد من العناصر الجديدة ف ES6 ولي هما rest opérateur و spread opérateur و destructring فغادي نشوفوا هادشي كامل فهاد الجزء قبل المرور فالجزء القادم مباشرة ل react.


1- استعمال rest opérateur ف ES6

ف rest opérateur كيمكن باش نزيد عدد غير محدود من les paramètres لواحد ل fonction.
فالمثال لي عندنا زدت fonction سميتها employes لي كتاخد عدد من les paramètres حددتهم بهاد الطريقة :
- args... ولي داخلها كنعرض ل paramètre الأول ولي غادي تكون عندو ل index 0.
فكنفذ ل fonction لي عطيتها 3 اسماء فممكن تعطيها اي عدد بغيتي فيلا فتحتي المتصفح وشفتي ل console غادي تحصل على هاد النتيجة :



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

                                //
function employes(...args){
    console.log(args[0]);
}
employes('samadi','amine','salah');
                            

2- استعمال spread opérateur ف ES6

ف spread opérateur كيمكن باش نجمع variable أو أكثر 
فالمثال لي عندنا زدت جوج ديال ل arrays عندي cities و countries وزدت array أخرى سميتها newArray لي غادي تجمع ل arrays بجوج فيها فيلا فتحتي المتصفح وشفتي ل console غادي تحصل على هاد النتيجة :



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

                                //
const cities = ['london','paris','bremen'];
const countries = ['morocco','france','germany'];
//before we use concat to concatenate arrays
const newArray = [...cities,...countries];
console.log(newArray);
                            

3- استعمال destructuring ف ES6

ف destructuring  كتمكني باش نسترجع des variables من واحد الجدول أو object وكنعرضهم او لا كندوزهم لواحد ل fonction فالمثال لي عندنا زدنا objet فيه name و age منبعد كنعطي ل objet ل fonction لي غادي تعرضو باستعمال فقط les variables name & age فل fonction أتوماتيكيا كتعرف بلي خصها تعرض هاد les variables من objet لي عطيناها فيلا فتحتي المتصفح وشفتي ل console غادي تحصل على هاد النتيجة :



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

                                //
//use destructring
const personDestr = {
    name : 'samadi',
    age : 20
}

function getPersonDestr({name,age}){
    return name + ' ' +age;
}

console.log(getPersonDestr(personDestr));