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

@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.

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

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

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

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