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

@serverSerrverlesskiy

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

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

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

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

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

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

Parametrs

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

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

محرر مباشر

function learnJavaScript() {
  let summa = (a, b, c) => {
    return a + b + c
  } // Sum of 3 numbers

  return summa(1, 2, 3, 4, 5, 6, 7)
}

function learnJavaScript() {
  let summa = (a, b, c) => {
    return a + b + c
  } // Sum of 3 numbers

  return summa(1, 2, 3, 4, 5, 6, 7)
}

النتيجة

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

مفهوم ES6

Idea

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

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

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

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

محرر مباشر

function learnJavaScript() {
  let sumAll = (...args) => {
    // args — name of the array of passed arguments
    let sum = 0
    for (let arg of args) if (typeof arg === 'number') sum += arg // sum - will collect the sum of all numeric arguments
    return sum
  }
  return sumAll(1, 2, 3, 4, 5, 6, 7, 'React', 'Native')
}

function learnJavaScript() {
  let sumAll = (...args) => {
    // args — name of the array of passed arguments
    let sum = 0
    for (let arg of args) if (typeof arg === 'number') sum += arg // sum - will collect the sum of all numeric arguments
    return sum
  }
  return sumAll(1, 2, 3, 4, 5, 6, 7, 'React', 'Native')
}

النتيجة

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

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

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

paste

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

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

محرر مباشر

function learnJavaScript() {
  let free = ''
  let showName = (firstName, lastName, ...titles) => {
    free = firstName + ' ' + lastName // First name + Last name
    return titles[0] + ' ' + titles[1]
  }
  // The rest of the parameters will go to the titles = ["React", "Native"] array
  // titles [0] // React
  // titles [1] // Native

  let result = showName('Julius', 'Caesar', 'React', 'Native')

  return free + ' or ' + result
}

function learnJavaScript() {
  let free = ''
  let showName = (firstName, lastName, ...titles) => {
    free = firstName + ' ' + lastName // First name + Last name
    return titles[0] + ' ' + titles[1]
  }
  // The rest of the parameters will go to the titles = ["React", "Native"] array
  // titles [0] // React
  // titles [1] // Native

  let result = showName('Julius', 'Caesar', 'React', 'Native')

  return free + ' or ' + result
}

النتيجة

أخطاء محتملة

error

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

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

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

:::

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

operators

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

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

محرر مباشر

function learnJavaScript() {
  return Math.max(3, 5, 1, 17, 14, 8, 2, 11)
}

function learnJavaScript() {
  return Math.max(3, 5, 1, 17, 14, 8, 2, 11)
}

النتيجة

ليس بسيط جدا

Index_finger

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

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

محرر مباشر

function learnJavaScript() {
  let arr = [3, 5, 1, 17, 14, 8, 2, 11]
  return Math.max(arr) // NaN - значение будет не определено
}

function learnJavaScript() {
  let arr = [3, 5, 1, 17, 14, 8, 2, 11]
  return Math.max(arr) // NaN - значение будет не определено
}

النتيجة

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

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

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

Transform

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

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

لMath.max :

محرر مباشر

function learnJavaScript() {
  let arr = [3, 5, 1, 17, 14, 8, 2, 11]

  return Math.max(...arr) // the ... arr operator converts the array `arr` to an argument list
}

function learnJavaScript() {
  let arr = [3, 5, 1, 17, 14, 8, 2, 11]

  return Math.max(...arr) // the ... arr operator converts the array `arr` to an argument list
}

النتيجة

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

محرر مباشر

function learnJavaScript() {
  let arr1 = [1, 2, 34, 41]
  let arr2 = [8, 3, 18, 17]
  let arr3 = [2, 4, 16, 38]

  return 'Max = ' + Math.max(...arr1, ...arr2, ...arr3)
}

function learnJavaScript() {
  let arr1 = [1, 2, 34, 41]
  let arr2 = [8, 3, 18, 17]
  let arr3 = [2, 4, 16, 38]

  return 'Max = ' + Math.max(...arr1, ...arr2, ...arr3)
}

النتيجة

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

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

Merger

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

محرر مباشر

function learnJavaScript() {
  let arr1 = [3, 5, 7]
  let arr2 = [4, 2, 8]

  let merged = [100, ...arr1, 500, ...arr2]
  let str = 'Массив: ' + merged

  return <b>{str}</b>
}

function learnJavaScript() {
  let arr1 = [3, 5, 7]
  let arr2 = [4, 2, 8]

  let merged = [100, ...arr1, 500, ...arr2]
  let str = 'Массив: ' + merged

  return <b>{str}</b>
}

النتيجة

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

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.

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

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

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

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