انتقل إلى المحتوى الرئيسي

الراحة وانتشار

@serverSerrverlesskiy

تدعم العديد من وظائف JavaScript المضمنة عددًا عشوائيًا من الوسائط.

على سبيل المثال:

Math.max (arg1, arg2, ..., argN) - تحسب الحد الأقصى لعدد الوسائط التي تم تمريرها.

Math.min (arg1, arg2, ..., argN) - تُرجع الحد الأدنى لقيمة الوسيطات التي تم تمريرها.

في هذه المقالة ، سوف نتعلم كيفية القيام بنفس الشيء مع وظائفنا وكيفية تمرير المعلمات إلى وظائف مثل المصفوفة.

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

Parametrs

يمكنك استدعاء دالة بأي عدد من المتغيرات ، بغض النظر عن كيفية تعريفها.

على سبيل المثال 👇:

محرر مباشر
النتيجة
Loading...

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

مفهوم ES6

Idea

بدءًا من معيار ES6 ، ظهر مفهوم مثل... rest- المعلمات المتبقية.

let goFun = (...rest) => {
// Algorithm
}

يمكن الإشارة إلى المعلمات المجانية بثلاث نقاط.... يعني حرفيا: "جمع المعلمات المتبقية ووضعها في مصفوفة."

على سبيل المثال ، دعنا نجمع كل المتغيرات في مصفوفة args👇:

محرر مباشر
النتيجة
Loading...

الجواب بالفعل 28 ولا توجد أخطاء🙅‍♂️! حاول تغيير الوسيطات أو أبعاد المصفوفة.

معلمات متعددة

يمكننا وضع المعلمات القليلة الأولى في المتغيرات🔔, وجمع الباقي في مصفوفة. هذا يعني أنه يمكنك ببساطة إدراج ملفات ... rest, ولكن فقط بدلاً من المعلمة الأخيرة للوظيفة.

paste

let goFun = (first, second, ...rest) => {
// Algorithm
}

في المثال أدناه ، الأولين 2️⃣ ستصبح وسيطات الوظيفة الاسم الأول والأخير ، وستصبح الوسيطات الثالثة واللاحقة هي المصفوفة titles [i] 👇:

محرر مباشر
النتيجة
Loading...

أخطاء محتملة

error

يجب أن تكون المعلمات المتبقية في النهاية ، لذا لا يمكنك كتابة 🖊️ أي شيء بعدها. سيؤدي هذا إلى ظهور خطأ:

function f(arg1, ...rest, arg2) {   // arg2 после ...rest ?
// Mistake!
}

::: ملاحظة تذكر ... rest يجب أن يكون دائمًا أخيرًا.

:::

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

operators

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

على سبيل المثال ، هناك وظيفة مضمنة⚙️ Math.max. تقوم بإرجاع أكبر رقم في القائمة:

محرر مباشر
النتيجة
Loading...

ليس بسيط جدا

Index_finger

لنفترض أن لدينا مجموعة من الأرقام [3, 5, 1]. كيف تتصل Math.max لذلك؟

لا يمكنك فقط إدراجها -Math.max تتوقع الحصول على قائمة أرقام ، وليس مصفوفة واحدة.

محرر مباشر
النتيجة
Loading...

بالطبع يمكننا إدخال الأرقام يدويًا: Math.max (arr[0], arr[1], ar[2]).

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

حدوث المعلمات

Transform

ال...spread عامل سيساعدنا هنا. إنه مشابه للمعلمات المتبقية - يستخدم أيضًا `` ... '' ، لكنه يفعل العكس تمامًا.

عندما ...spread يتم استخدام الوظيفة في استدعاء دالة ، فهي تحول كائن المصفوفة arr إلى قائمة وسيطات.

لMath.max 👇:

محرر مباشر
النتيجة
Loading...

بالطريقة نفسها ، يمكننا تمرير العديد من العناصر التكرارية 👇:

محرر مباشر
النتيجة
Loading...

رائع! نهج مرن للغاية للبرمجة. يمكنك أيضًا دمج عامل الانتشار مع القيم العادية.

دمج المصفوفات

Merger

عامل الانتشار ... spread يمكن أيضًا استخدامها لدمج المصفوفات👇:

محرر مباشر
النتيجة
Loading...

التحويل إلى سلسلة

Transform

ال... spread تعمل وظيفة المشغل مع أي كائن قابل للتكرار.

على سبيل المثال ، عامل الانتشار مناسب لتحويل سلسلة إلى مصفوفة من الأحرف👇:

let str = 'Hey, Alex!'
let result = [...str]

spread

دعونا نرى ما سيحدث. تحت غطاء المحرك ، يستخدم عامل الانتشار التكرارات للتكرار على العناصر. تماما مثلfor..of يفعل.

الfor..of حلقة تتكرر عبر السلسلة كسلسلة من الأحرف ، لذا من ... str اتضح أن "P" و "p" و "و" in "و" e "و" t "...

يتم جمع الأحرف الناتجة في مصفوفة باستخدام التصريح القياسي للمصفوفة🗣️ [... str] .

يمكننا أيضًا استخدامArray.from لهذه المهمة. كما أنه يحول متكررًا (مثل سلسلة نصية) إلى مصفوفة 👇:

let str = 'Hello'
Array.from(str) // "H", "e", "l", "l", "o"
// Array.from converts an iterable to an array

spread

والنتيجة هي نفسها[...str]. لكن هناك فرق بين Array.from(obj) و [...obj] :

  • Array.from يعمل مع كل من المصفوفات الزائفة والمتكررة.
  • ال ... spread يعمل المشغل only مع كائنات قابلة للتكرار.

لذلك، Array.from هي طريقة أكثر عمومية.

مجموع

Elipsis

عندما نرى"..." في الكود ، يمكن أن تكون إما المعلمات المتبقية...rest أو عامل التمديد ...spread.

كيف نميزهم عن بعضهم البعض:

  • إذا كان ... موجودًا في نهاية قائمة وسيطات الدالة ، فهذه هي "المعلمات المتبقية". يقوم بجمع بقية الحجج غير المحددة وإنشاء مصفوفة منها.
  • إذا حدث ... في استدعاء دالة أو في مكان آخر ، فهو "عامل تمديد". يستخرج عناصر من مصفوفة لتهيئة الوظيفة.

من المفيد أن تتذكر:

  • تُستخدم المعلمات المتبقية لإنشاء وظائف جديدة بعدد غير محدد من الوسائط.

  • باستخدام معامل الانتشار ، يمكنك إدراج مصفوفة في دالة تعمل افتراضيًا مع قائمة عادية من الوسائط.

    "معًا ، تجعل هذه التركيبات من السهل تحويل مجموعات القيم من المصفوفات وإليها.

مشاكل؟

Problem

اكتب لDiscord محادثة.

أسئلة:

Question

إذا كان `... 'موجودًا في نهاية قائمة وسيطات الدالة ، فإننا نتعامل مع:

  1. المعلمة المتبقية
  2. مشغل التوسع
  3. مؤشرات عشوائية

لإنشاء دالة بعدد غير محدد من الوسائط ، استخدم:

  1. المعلمات المتبقية ...rest
  2. عامل الانتشار...spread
  3. وظائف المكالمات الخارجية

يمكنك دمج صفيفين في صفيف واحد باستخدام:

  1. مشغل التوسع
  2. عامل التشغيل "Array.from"
  3. المعلمة المتبقية

لفهم مقدار ما تعلمته في هذا الدرس ، قم بإجراء الاختبار في mobile application من مدرستنا في هذا الموضوع.

Sumerian school

الروابط

  1. MDN web doc. Spread syntax article
  2. Residual Parameters and the Spread Operator article
  3. The article "The spread and rest operator"

المساهمون ✨

الشكر يعود إلى هؤلاء الأشخاص الرائعين (emoji key):


Dmitriy K.

📖

Dmitriy Vasilev

💵

Resoner2005

🐛 🎨 🖋

Navernoss

🖋 🐛 🎨

Become a Patron!