معلمات وظيفة جافا سكريبت

تعرف على أساسيات معلمات وظائف JavaScript

يمكن أن تقبل الوظيفة معلمة واحدة أو أكثر.

const dosomething = () => {
  //do something
}

const dosomethingElse = foo => { //do something }

const dosomethingElseAgain = (foo, bar) => { //do something }

بدءا منES6 / ES2015، يمكن أن تحتوي الوظائف على قيم افتراضية للمعلمات:

const dosomething = (foo = 1, bar = 'hey') => {
  //do something
}

يتيح لك هذا استدعاء دالة دون ملء جميع المعلمات:

dosomething(3)
dosomething()

ES2018قدم فواصل لاحقة للمعلمات ، وهي ميزة تساعد في تقليل الأخطاء بسبب فقدان الفواصل عند التنقل حول المعلمات (على سبيل المثال ، تحريك الأخير في المنتصف):

const dosomething = (foo = 1, bar = 'hey',) => {
  //do something
}

dosomething(2, ‘ho!’)

كما أنه من المقبولمكالمةوظائفك بفاصلة لاحقة بعد المعلمة الأخيرة:

dosomething(2, 'ho!',)

يمكنك التفاف جميع الوسائط في مصفوفة ، واستخدام الامتدادانتشار المشغلعند استدعاء الوظيفة:

const dosomething = (foo = 1, bar = 'hey') => {
  //do something
}
const args = [2, 'ho!']
dosomething(...args)

مع وجود العديد من المعلمات ، قد يكون من الصعب تذكر الترتيب. باستخدام الكائنات ، يسمح التدمير بالاحتفاظ بأسماء المعلمات:

const dosomething = ({ foo = 1, bar = 'hey' }) => {
  //do something
  console.log(foo) // 2
  console.log(bar) // 'ho!'
}
const args = { foo: 2, bar: 'ho!' }
dosomething(args)

تدعم الوظائف الآن المعلمات الافتراضية:

const foo = function(index = 0, testing = true) { /* ... */ }
foo()

تم إدخال قيم المعلمات الافتراضية في ES2015 ، وتم تطبيقها على نطاق واسع في المتصفحات الحديثة.

هذا الdoSomethingالوظيفة التي تقبلparam1.

const doSomething = (param1) => {

}

يمكننا إضافة قيمة افتراضية لـparam1إذا تم استدعاء الوظيفة دون تحديد معامل:

const doSomething = (param1 = 'test') => {

}

هذا يعمل مع المزيد من المعلمات أيضًا ، بالطبع:

const doSomething = (param1 = 'test', param2 = 'test2') => {

}

ماذا لو كان لديك كائن فريد به قيم معلمات؟

ذات مرة ، إذا اضطررنا إلى تمرير كائن من الخيارات إلى وظيفة ، من أجل الحصول على القيم الافتراضية لهذه الخيارات إذا لم يتم تحديد أحدها ، كان عليك إضافة القليل من التعليمات البرمجية داخل الوظيفة:

const colorize = (options) => {
  if (!options) {
    options = {}
  }

const color = (‘color’ in options) ? options.color : ‘yellow’ … }

باستخدام خاصية إتلاف الكائنات ، يمكنك توفير القيم الافتراضية ، مما يبسط الكود كثيرًا:

const colorize = ({ color = 'yellow' }) => {
  ...
}

إذا لم يتم تمرير أي كائن عند استدعاءcolorizeوظيفة ، وبالمثل يمكننا تعيين كائن فارغ افتراضيًا:

const spin = ({ color = 'yellow' } = {}) => {
  ...
}

المزيد من دروس js: