وظائف JavaScript ES6: الأجزاء الجيدة

يقدم ES6 بعض الميزات الوظيفية الجديدة الرائعة التي تجعل البرمجة في JavaScript أكثر مرونة. دعنا نتحدث عن بعضها - على وجه التحديد ، المعلمات الافتراضية ، ومعلمات الراحة ، ووظائف الأسهم.

نصيحة ممتعة : يمكنك نسخ ولصق أي من هذه الأمثلة / التعليمات البرمجية في Babel REPLويمكنك أن ترى كيف ينتقل كود ES6 إلى ES5.

قيم المعلمات الافتراضية

تحتوي وظائف JavaScript على ميزة فريدة تسمح لك بتمرير أي عدد من المعلمات أثناء استدعاء الوظيفة (المعلمات الفعلية) بغض النظر عن عدد المعلمات الموجودة في تعريف الوظيفة (المعلمات الرسمية). لذلك تحتاج إلى تضمين المعلمات الافتراضية فقط في حالة نسيان شخص ما تمرير أحد المعلمات.

كيف سيتم تنفيذ المعلمات الافتراضية في ES5

ما سبق يبدو جيدًا عند تشغيله. number2لم يتم تمريره وقمنا بالتحقق من ذلك باستخدام ||عامل التشغيل " " لإرجاع المعامل الثاني إذا كان الأول خاطئًا. وبالتالي ، تم تعيين "10" كقيمة افتراضية حيث لم number2يتم تعريفها.

لكن هناك مشكلة واحدة فقط. ماذا لو تجاوز شخص ما "0" كوسيطة ثانية؟ ⚠

قد تفشل الطريقة أعلاه لأنه سيتم تعيين القيمة الافتراضية "10" بدلاً من القيمة التي تم تمريرها ، مثل "0". لماذا ا؟ لأن "0" تم تقييمه على أنه خطأ!

دعونا نحسن الكود أعلاه ، أليس كذلك؟

آغ! هذا الكثير من التعليمات البرمجية. ليس باردًا على الإطلاق. دعونا نرى كيف يقوم ES6 بذلك.

المعلمات الافتراضية في ES6

function counts(number1 = 5, number2 = 10) { // do anything here}

number1و number2يتم تعيين القيم الافتراضية "5" و "10" على التوالي.

حسنًا ، هذا إلى حد كبير. قصير و حلو. لا يوجد رمز إضافي للتحقق من وجود معلمة مفقودة. هذا يجعل جسم الوظيفة لطيفًا وقصيرًا. ؟

ملاحظة: عندما يكون قيمة undefinedيتم تمريرها للمعلمة مع الوسيطة الافتراضية، كما هو متوقع القيمة التي تم تمريرها هي غير صالحة و يتم تعيين قيمة المعلمة الافتراضية . ولكن إذا nullتم تمريره ، فسيتم اعتباره صالحًا ولا يتم استخدام المعلمة الافتراضية ويتم تعيين قيمة خالية لهذا المعامل.

الميزة الرائعة للمعلمات الافتراضية هي أن المعلمة الافتراضية لا يجب أن تكون بالضرورة قيمة أولية ، ويمكننا أيضًا تنفيذ وظيفة لاسترداد قيمة المعلمة الافتراضية. هذا مثال:

يمكن أيضًا أن تكون المعلمات السابقة معلمات افتراضية للمعلمات التي تليها مثل:

function multiply(first, second = first) { // do something here}

لكن المعكوس سيؤدي إلى خطأ. أي أنه إذا تم تعيين المعلمة الثانية كقيمة افتراضية للمعامل الأول ، فسيؤدي ذلك إلى حدوث خطأ لأن المعلمة الثانية لم يتم تحديدها بعد أثناء تعيين المعلمة الأولى.

function add(first = second, second) { return first + second;}console.log(add(undefined, 1)); //throws an error

معلمات الراحة

A بقية المعلمة هي ببساطة معلمة اسمه الذي يسبقه ثلاث نقاط (...). تصبح هذه المعلمة المسماة مصفوفة تحتوي على باقي المعلمات (أي بصرف النظر عن المعلمات المسماة) التي تم تمريرها أثناء استدعاء الوظيفة.

فقط ضع في اعتبارك أنه لا يمكن أن يكون هناك سوى معلمة راحة واحدة ، ويجب أن تكون المعلمة الأخيرة. لا يمكن أن يكون لدينا معلمة مسماة بعد معلمة الراحة.

هذا مثال:

كما ترى ، فقد استخدمنا المعامل rest للحصول على جميع المفاتيح / الخصائص المراد استخراجها من الكائن الذي تم تمريره ، وهو المعلمة الأولى.

يتمثل الاختلاف بين معلمة rest و "كائن الوسائط" في أن الأخير يحتوي على جميع المعلمات الفعلية التي تم تمريرها أثناء استدعاء الوظيفة ، بينما يحتوي "معلمة الراحة" فقط على المعلمات التي لم يتم تسميتها بالمعلمات ويتم تمريرها أثناء استدعاء الوظيفة.

وظائف السهم ➡

وظائف السهم ، أو "وظائف السهم السميك" ، تقدم صيغة جديدة لتعريف الوظائف التي تكون موجزة للغاية. يمكننا تجنب كلمات مثل الكتابة function، returnوحتى الأقواس { }والأقواس ().

بناء الجملة

يأتي بناء الجملة بنكهات مختلفة ، اعتمادًا على استخدامنا. جميع الاختلافات في شيء واحد مشترك ، أي أنها تبدأ مع الحجج ، تليها على السهم ( =&GT؛)، تليها ر انه يعمل ب] ODY.

يمكن أن تتخذ الحجج والجسد أشكالًا مختلفة. إليك المثال الأساسي:

let mirror = value => value;
// equivalent to:
let mirror = function(value) { return value;};

يأخذ المثال أعلاه وسيطة واحدة "قيمة" (قبل السهم) ويعيد تلك الوسيطة ( => value ؛). كما ترون ، هناك فقط القيمة المرتجعة ، لذلك لا داعي للكلمة الرئيسية المرتجعة أو حمالة الصدر المجعدة لإغلاق جسم الوظيفة.

نظرًا لوجود حجة واحدة فقط ، فلا داعي لاستخدام الأقواس "()" أيضًا.

إليك مثال مع أكثر من حجة لمساعدتك على فهم هذا:

let add = (no1, no2) => no1 + no2;
// equivalent to:
let add = function(no1, no2) { return no1 + no2;};

إذا لم تكن هناك أية وسيطات على الإطلاق ، فيجب عليك تضمين أقواس فارغة كما يلي:

let getMessage = () => 'Hello World';
// equivalent to:
let getMessage = function() { return 'Hello World';}

بالنسبة لجسم الوظيفة الذي يحتوي على عبارة إرجاع فقط ، فإن الأقواس المتعرجة اختيارية .

للحصول على جسم وظيفي يحتوي على أكثر من مجرد بيان عودة ، تحتاج إلى لف الجسم بأقواس مجعدة تمامًا مثل الوظائف التقليدية.

هذه وظيفة حسابية بسيطة بعمليتين - الجمع والطرح. يجب أن يكون جسمه ملفوفًا بأقواس مجعدة:

let calculate = (no1, no2, operation) => { let result; switch (operation) { case 'add': result = no1 + no2; break; case 'subtract': result = no1 - no2; break; } return result;};

الآن ماذا لو أردنا دالة تقوم ببساطة بإرجاع كائن؟ سوف يتم الخلط بين المترجم سواء كانت الأقواس المتعرجة من الكائن ( er}) أو الأقواس المتعرجة للجسم الوظيفي.()=>{id: numb

الحل هو لف الكائن بين قوسين. إليك الطريقة:

let getTempItem = number => ({ id: number});
// effectively equivalent to:
let getTempItem = function(number) { return { id: number };};

Let’s have a look at the final example. In this we’ll use filter function on a sample array of numbers to return all numbers greater than 5,000:

// with arrow functionlet result = sampleArray.filter(element => element > 5000);
// without arrow functionlet result = sampleArray.filter(function(element) { return element > 5000;});

We can see how much less code is necessary compared to the traditional functions.

A few things about arrow functions to keep in mind though:

  • They can’t be called with new, can’t be used as constructors (and therefore lack prototype as well)
  • Arrow functions have their own scope, but there’s no ‘this’ of their own.
  • No arguments object is available. You can use rest parameters however.

Since JavaScript treats functions as first-class, arrow functions make writing functional code like lambda expressions and currying much easier.

"كانت وظائف الأسهم مثل وقود الصواريخ لانفجار البرمجة الوظيفية في JavaScript." - إريك إليوت

كذلك هناك تذهب! ربما حان الوقت لبدء استخدام هذه الميزات.

تعد ميزات ES6 مثل هذه نفسًا منعشًا ، والمطورين يحبون استخدامها.

هذا هو الرابط إلى رسالتي السابقة حول التصريحات والرفع المتغير!

آمل أن يكون هذا هو الدافع لك لتولي ES6 وجهاً لوجه إذا لم تكن قد فعلت ذلك بالفعل!

سلام ✌️️