مقدمة عن عامل الانتشار ومعلمة الراحة في JavaScript (ES6)

تتم كتابة كل من عامل الانتشار ومعلمة الراحة على شكل ثلاث نقاط متتالية (...). هل لديهم أي شيء آخر مشترك؟

عامل الانتشار (...)

عامل الانتشارتم تقديمه في ES6. يوفر لك القدرة على توسيع الكائنات القابلة للتكرار إلى عناصر متعددة. ماذا يعني هذا حقا؟ دعنا نتحقق من بعض الأمثلة.

const movies = ["Leon", "Love Actually", "Lord of the Rings"];console.log(...movies);

مطبوعات:

ليون لوف في الواقع سيد الخواتم
const numbers = new Set([1, 4, 5, 7]);console.log(...numbers);

مطبوعات:

1 4 5 7

قد تلاحظ أنه تم توسيع كل من المصفوفة من المثال الأول والمجموعة من المثال الثاني إلى عناصرها الفردية (سلاسل وأرقام على التوالي). قد تسأل كيف يمكن أن يكون هذا مفيدا.

ربما يكون الاستخدام الأكثر شيوعًا هو الجمع بين المصفوفات. إذا كان عليك القيام بذلك في الأوقات التي سبقت عامل السبريد ، فمن المحتمل أنك استخدمت concat()الطريقة.

const shapes = ["triangle", "square", "circle"];const objects = ["pencil", "notebook", "eraser"];const chaos = shapes.concat(objects);console.log(chaos);

مطبوعات:

["مثلث" ، "مربع" ، "دائرة" ، "قلم رصاص" ، "دفتر ملاحظات" ، "ممحاة"]

هذا ليس سيئًا للغاية ، ولكن ما يقدمه عامل الانتشار هو اختصار ، مما يجعل الكود الخاص بك يبدو أكثر قابلية للقراءة أيضًا:

const chaos = [...shapes, ...objects];console.log(chaos);

مطبوعات:

["مثلث" ، "مربع" ، "دائرة" ، "قلم رصاص" ، "دفتر ملاحظات" ، "ممحاة"]

إليك ما سنحصل عليه إذا حاولنا فعل الشيء نفسه بدون عامل انتشار:

const chaos = [shapes, objects];console.log(chaos);

مطبوعات:

[صفيف (3) ، صفيف (3)]

ماذا حدث هنا؟ بدلاً من دمج المصفوفات ، حصلنا على chaosمصفوفة shapesبالمصفوفة في الفهرس 0 والمصفوفة objectsفي الفهرس 1.

المعلمة الباقية (...)

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

تعيين قيم المصفوفة للمتغيرات

دعنا نلقي نظرة على المثال التالي:

const movie = ["Life of Brian", 8.1, 1979, "Graham Chapman", "John Cleese", "Michael Palin"];const [title, rating, year, ...actors] = movie;console.log(title, rating, year, actors);

مطبوعات:

"حياة بريان" ، 8.1 ، 1979 ، ["جراهام تشابمان" ، "جون كليز" ، "مايكل بالين"]

يتيح لنا المعامل rest أن نأخذ قيم movieالمصفوفة ونخصصها لعدة متغيرات فردية باستخدام التدمير. بهذه الطريقة title، ratingو yearيتم تعيين القيم الثلاث الأولى في مجموعة، ولكن أين يحدث السحر الحقيقي هو actors. بفضل المعلمة rest ، actorsيتم تعيين القيم المتبقية movieللمصفوفة ، في شكل مصفوفة.

دوال متغيرة

الدوال المتغيرة هي دوال تأخذ عددًا غير محدد من الوسائط. أحد الأمثلة الجيدة على ذلك هو sum()الوظيفة: لا يمكننا أن نعرف مقدمًا عدد الوسائط التي سيتم تمريرها إليها:

sum(1, 2);sum(494, 373, 29, 2, 50067);sum(-17, 8, 325900);

في الإصدارات السابقة من JavaScript ، يمكن التعامل مع هذا النوع من الوظائف باستخدام الكائن arguments ، وهو كائن يشبه المصفوفة ، ومتوفر كمتغير محلي داخل كل دالة. يحتوي على جميع قيم الوسائط التي تم تمريرها إلى دالة. دعونا نرى كيف sum()يمكن تنفيذ الوظيفة:

function sum() { let total = 0; for(const argument of arguments) { total += argument; } return total;}

إنه يعمل ، لكنه بعيد عن الكمال:

  • إذا نظرت إلى تعريف sum()الوظيفة ، فليس لديها أي معلمات. يمكن أن يكون مضللاً تمامًا.
  • قد يكون من الصعب فهم ما إذا لم تكن معتادًا على كائن الوسائط (كما في: من أين تأتي هيك arguments؟!)

إليك كيف نكتب نفس الوظيفة مع معامل الراحة:

function sum(...nums) { let total = 0; for(const num of nums) { total += num; } return total;}

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

هللويا ES6!

هل بدأت للتو رحلتك مع البرمجة؟ إليك بعض المقالات التي قد تهمك أيضًا:

  • هل المعسكر التدريبي للترميز شيء مناسب لك؟
  • هل التغيير الوظيفي ممكن حقا؟
  • لماذا تعتبر روبي لغة رائعة لبدء البرمجة بها