how to call javascript function in html




قم بتعيين قيمة معلمة افتراضية لدالة JavaScript (14)

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

def read_file(file, delete_after = false)
  # code
end

هل هذا العمل في جافا سكريبت؟

function read_file(file, delete_after = false) {
  // Code
}

أجد شيئًا بسيطًا مثل هذا ليكون أكثر إيجازًا وقراءةً شخصياً.

function pick(arg, def) {
   return (typeof arg == 'undefined' ? def : arg);
}

function myFunc(x) {
  x = pick(x, 'my default');
} 

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

['1', '2', '3'].map(parseInt); // [1, NaN, NaN]

يحتوي parseInt على function parseInt(s, [ معلمة ثانية اختيارية function parseInt(s, [ radix =10]) ولكن يستدعي map تعيين parseInt بثلاث وسائط: ( element ، index ، and array ).

أقترح عليك فصل المعلمات المطلوبة الخاصة بك عن الحجج ذات القيمة الافتراضية / الافتراضية. إذا كانت وظيفتك تأخذ 1،2 ، أو 3 معلمات مطلوبة لا قيمة منطقية لها ، اجعلها معلمات موضعية للدالة ، يجب أن تتبع أي معلمات اختيارية كسمات مسماة لكائن واحد. إذا كانت وظيفتك تأخذ 4 أو أكثر ، فربما يكون من المنطقي تزويد كل الحجج عبر سمات معلمة كائن واحد.

في حالتك ، أقترح عليك كتابة الدالة DeleteFile مثل هذا:

// unsafe
function read_file(fileName, deleteAfter=false) {
    if (deleteAfter) {
        console.log(`Reading and then deleting ${fileName}`);
    } else {
        console.log(`Just reading ${fileName}`);
    }
}

// better
function readFile(fileName, options={}) {
  const { deleteAfter = false } = options || {}; // if null
  read_file(fileName, deleteAfter);
}

console.log('unsafe...');
['log1.txt', 'log2.txt', 'log3.txt'].map(read_file);

console.log('better...');
['log1.txt', 'log2.txt', 'log3.txt'].map(readFile);

يوضح تشغيل المقتطف أعلاه المخاطر المتربصة وراء قيم الوسيطة الافتراضية للمعلمات غير المستخدمة.


إذا كنت تستخدم ES6+ فيمكنك تعيين المعلمات الافتراضية بالطريقة التالية:

function test (foo = 1, bar = 2) {
  console.log(foo, bar);
}

test(5); // foo gets overwritten, bar remains default parameter

إذا كنت تحتاج إلى بنية ES5 فيمكنك القيام بذلك بالطريقة التالية:

function test(foo, bar) {
  foo = foo || 2;
  bar = bar || 0;
  
  console.log(foo, bar);
}

test(5); // foo gets overwritten, bar remains default parameter

في بناء الجملة أعلاه ، يتم استخدام عامل التشغيل OR . عامل التشغيل OR دوماً بإرجاع القيمة الأولى إذا كان يمكن تحويل هذا إلى true إذا لم يتم إرجاع القيمة righthandside. عندما يتم استدعاء الدالة بدون وسيطة مناظرة ، يتم تعيين متغير المعلمة ( bar في مثالنا) على undefined بواسطة محرك JS. undefined محولة يتم بعد ذلك تحويلها إلى false ومن ثم يقوم عامل التشغيل OR بإرجاع القيمة 0.


استخدم هذا إذا كنت تريد استخدام أحدث بنية ECMA6 :

function myFunction(someValue = "This is DEFAULT!") {
  console.log("someValue --> ", someValue);
}

myFunction("Not A default value") // calling the function without default value
myFunction()  // calling the function with default value

يطلق عليه default function parameters . يسمح للمعاملات الرسمية بالتهيئة مع القيم الافتراضية إذا لم يتم تمرير أي قيمة أو غير محدد. ملاحظة : لن تعمل مع Internet Explorer أو المستعرضات الأقدم.

للحصول على أقصى توافق ممكن استخدم هذا:

function myFunction(someValue) {
  someValue = (someValue === undefined) ? "This is DEFAULT!" : someValue;
  console.log("someValue --> ", someValue);
}

myFunction("Not A default value") // calling the function without default value
myFunction()  // calling the function with default value

كلا الدالتين لهما نفس السلوك بالضبط مثل كل من هذه الأمثلة تعتمد على حقيقة أن متغير المعلمة سيكون undefined إذا لم يتم تمرير قيمة المعلمة عند استدعاء تلك الوظيفة.


في ECMAScript 6 ، ستتمكن فعليًا من كتابة ما لديك بالضبط:

function read_file(file, delete_after = false) {
  // Code
}

سيؤدي هذا إلى تعيين delete_after على " false إذا لم يكن موجودًا أو undefined . يمكنك استخدام ميزات ES6 مثل هذا اليوم مع transpilers مثل Babel .

انظر المقالة MDN لمزيد من المعلومات .


كتحديث ... مع ECMAScript 6 ، يمكنك في النهاية تحديد القيم الافتراضية في إعلانات معلمات الدوال كما يلي:

function f (x, y = 7, z = 42) {
  return x + y + z
}

f(1) === 50

كما يشار إليها - http://es6-features.org/#DefaultParameterValues


مجرد استخدام مقارنة واضحة مع غير محدد.

function read_file(file, delete_after)
{
    if(delete_after === undefined) { delete_after = false; }
}

من ES6 / ES2015 ، تكون المعلمات الافتراضية في مواصفات اللغة.

function read_file(file, delete_after = false) {
  // Code
}

يعمل فقط.

المرجع: المعلمات الافتراضية - MDN

تسمح معلمات الدالة الافتراضية ببدء المعلمات الرسمية مع القيم الافتراضية إذا لم يتم تمرير أي قيمة أو غير محدد .

يمكنك أيضًا محاكاة المعلمات الافتراضية المسماة عبر destructuring :

// the `= {}` below lets you call the function without any parameters
function myFor({ start = 5, end = 1, step = -1 } = {}) { // (A)
    // Use the variables `start`, `end` and `step` here
    ···
}

قبل ES2015 ،

هناك الكثير من الطرق ، لكن هذه هي طريقتك المفضلة - فهي تتيح لك المرور في أي شيء تريده ، بما في ذلك كاذبة أو خالية. ( typeof null == "object" )

function foo(a, b) {
  a = typeof a !== 'undefined' ? a : 42;
  b = typeof b !== 'undefined' ? b : 'default_b';
  ...
}

نعم يشار إلى هذا كمعلمة افتراضية

تسمح معلمات الدالة الافتراضية ببدء المعلمات الرسمية مع القيم الافتراضية إذا لم يتم تمرير أي قيمة أو غير محدد.

بناء الجملة:

function [name]([param1[ = defaultValue1 ][, ..., paramN[ = defaultValueN ]]]) {
   statements
}

وصف:

معلمات الدوال افتراضية غير محددة ومع ذلك ، في الحالات ، قد يكون من المفيد تعيين قيمة افتراضية مختلفة. هذا هو المكان الذي يمكن أن تساعد المعلمات الافتراضية.

في الماضي ، كانت الاستراتيجية العامة لتحديد الإعدادات الافتراضية هي اختبار قيم المعلمات في جسم الدالة وتعيين قيمة إذا كانت غير محددة. إذا لم يتم توفير أي قيمة في المكالمة ، فستكون قيمتها غير محددة. يجب عليك تعيين فحص شرطي للتأكد من أن المعلمة غير معرّفة

باستخدام المعلمات الافتراضية في ES2015 ، لم يعد التدقيق في نص الدالة ضروريًا. الآن يمكنك ببساطة وضع قيمة افتراضية في رأس الوظيفة.

مثال على الاختلافات:

// OLD METHOD
function multiply(a, b) {
  b = (typeof b !== 'undefined') ?  b : 1;
  return a * b;
}

multiply(5, 2); // 10
multiply(5, 1); // 5
multiply(5);    // 5


// NEW METHOD
function multiply(a, b = 1) {
  return a * b;
}

multiply(5, 2); // 10
multiply(5, 1); // 5
multiply(5);    // 5

أمثلة مختلفة لبناء الجملة:

الحشو غير معرف مقابل قيم الفالس الأخرى:

حتى إذا تم تعيين القيمة بشكل صريح عند الاستدعاء ، فإن قيمة وسيطة num هي القيمة الافتراضية.

function test(num = 1) {
  console.log(typeof num);
}

test();          // 'number' (num is set to 1)
test(undefined); // 'number' (num is set to 1 too)

// test with other falsy values:
test('');        // 'string' (num is set to '')
test(null);      // 'object' (num is set to null)

تم تقييمه في وقت المكالمة:

يتم تقييم الوسيطة الافتراضية في وقت الاتصال ، لذلك بخلاف بعض اللغات الأخرى ، يتم إنشاء كائن جديد في كل مرة يتم استدعاء الدالة.

function append(value, array = []) {
  array.push(value);
  return array;
}

append(1); //[1]
append(2); //[2], not [1, 2]


// This even applies to functions and variables
function callSomething(thing = something()) {
 return thing;
}

function something() {
  return 'sth';
}

callSomething();  //sth

المعلمات الافتراضية متاحة للمعلمات الافتراضية التالية:

Params بالفعل واجهت متاحة للمعلمات الافتراضية في وقت لاحق

function singularAutoPlural(singular, plural = singular + 's',
                        rallyingCry = plural + ' ATTACK!!!') {
  return [singular, plural, rallyingCry];
}

//["Gecko","Geckos", "Geckos ATTACK!!!"]
singularAutoPlural('Gecko');

//["Fox","Foxes", "Foxes ATTACK!!!"]
singularAutoPlural('Fox', 'Foxes');

//["Deer", "Deer", "Deer ... change."]
singularAutoPlural('Deer', 'Deer', 'Deer peaceably and respectfully \ petition the government for positive change.')

وظائف محددة داخل جسم الوظيفة:

المقدمة في Gecko 33 (Firefox 33 / Thunderbird 33 / SeaMonkey 2.30). لا يمكن إحالة الدالات التي تم تعريفها في نص الدالة داخل المعلمات الافتراضية ورمي ReferenceError (حالياً TypeError في SpiderMonkey ، راجع الأخطاء 1022967). يتم تنفيذ المعلمات الافتراضية دائمًا أولاً ، حيث يتم تقييم الإعلانات الدالة داخل الجسم الوظيفي بعد ذلك.

// Doesn't work! Throws ReferenceError.
function f(a = go()) {
  function go() { return ':P'; }
}

المعلمات بدون الإعدادات الافتراضية بعد المعلمات الافتراضية:

قبل Gecko 26 (Firefox 26 / Thunderbird 26 / SeaMonkey 2.23 / Firefox OS 1.2) ، أدى التعليمة البرمجية التالية إلى SyntaxError. تم إصلاح هذا في الأخطاء 777060 ويعمل كما هو متوقع في الإصدارات الأحدث. لا تزال المعلمات تحدد من اليسار إلى اليمين ، وتستبدل المعلمات الافتراضية حتى إذا كانت هناك معلمات أحدث بدون افتراضات.

function f(x = 1, y) {
  return [x, y];
}

f(); // [1, undefined]
f(2); // [2, undefined]

معلمة تم إنهاؤها مع تعيين قيمة افتراضية:

يمكنك استخدام تعيين القيمة الافتراضي مع تدوين الواجب destructuring

function f([x, y] = [1, 2], {z: z} = {z: 3}) {
  return x + y + z;
}

f(); // 6

هذا الحل هو العمل بالنسبة لي في شبيبة:

function read_file(file, delete_after) {
    delete_after = delete_after || false;
    // Code
}

ES6: كما سبق ذكره في معظم الإجابات ، في ES6 ، يمكنك ببساطة تهيئة معلمة مع قيمة.

ES5: معظم الإجابات المقدمة ليست جيدة بما فيه الكفاية بالنسبة لي لأن هناك مناسبات قد تضطر فيها إلى تمرير قيم زائفة مثل 0 ، null وغير undefined لوظيفة. لتحديد ما إذا كانت المعلمة غير معرّفة لأن هذه القيمة التي مررت بها بدلاً من غير معرفة بسبب عدم تحديدها على الإطلاق ، أقوم بذلك:

function foo (param1, param2) {
   param1 = arguments.length >= 1 ? param1 : "default1";
   param2 = arguments.length >= 2 ? param2 : "default2";
}

قيم المعلمات الافتراضية

باستخدام ES6 ، يمكنك أن تفعل ربما واحدة من التعابير الأكثر شيوعا في JavaScript ترتبط بتعيين قيمة افتراضية لمعلمة دالة. يجب أن تبدو الطريقة التي قمنا بها لسنوات طويلة مألوفة:

function foo(x,y) {
 x = x || 11;
 y = y || 31;
 console.log( x + y );
}
foo(); // 42
foo( 5, 6 ); // 11
foo( 5 ); // 36
foo( null, 6 ); // 17

هذا النمط أكثر استخدامًا ، ولكنه خطير عندما نمر بقيم مثل

foo(0, 42)
foo( 0, 42 ); // 53 <-- Oops, not 42

لماذا ا؟ لأن 0 is falsy ، وهكذا فإن x || 11 results in 11 x || 11 results in 11 ، وليس تمريرها مباشرة في 0. لإصلاح هذه مسكتك ، سوف يقوم بعض الناس بدلاً من ذلك بكتابة الشيك بشكل أكثر وضوحًا مثل:

function foo(x,y) {
 x = (x !== undefined) ? x : 11;
 y = (y !== undefined) ? y : 31;
 console.log( x + y );
}
foo( 0, 42 ); // 42
foo( undefined, 6 ); // 17

يمكننا الآن فحص صيغة مفيدة مفيدة مضافة من ES6 لتسهيل تعيين القيم الافتراضية إلى الوسائط المفقودة:

function foo(x = 11, y = 31) {
 console.log( x + y );
}

foo(); // 42
foo( 5, 6 ); // 11
foo( 0, 42 ); // 42
foo( 5 ); // 36
foo( 5, undefined ); // 36 <-- `undefined` is missing
foo( 5, null ); // 5 <-- null coerces to `0`
foo( undefined, 6 ); // 17 <-- `undefined` is missing
foo( null, 6 ); // 6 <-- null coerces to `0`

x = 11 في تعريف الدالة يشبه x !== undefined ? x : 11 x !== undefined ? x : 11 من المصطلح الأكثر شيوعًا x || 11 x || 11

تعبيرات القيمة الافتراضية

يمكن أن تكون القيم الافتراضية للوظيفة أكثر من مجرد قيم بسيطة مثل 31؛ يمكن أن يكون أي تعبير صالح ، حتى function call :

function bar(val) {
 console.log( "bar called!" );
 return y + val;
}
function foo(x = y + 3, z = bar( x )) {
 console.log( x, z );
}
var y = 5;
foo(); // "bar called"
 // 8 13
foo( 10 ); // "bar called"
 // 10 15
y = 6;
foo( undefined, 10 ); // 9 10

كما ترى ، يتم تقييم تعبيرات القيمة الافتراضية بشكل تراكمي ، بمعنى أنه يتم تشغيلها فقط في حالة الحاجة إليها - أي عندما يتم حذف وسيطة المعلمة أو يتم تحديدها.

يمكن أن يكون تعبير القيمة الافتراضية عبارة عن استدعاء تعبير دالة مضمن - يشار إليه عادةً باسم تعبير دالة (IIFE) فوراً (IIFE) :

function foo( x =
 (function(v){ return v + 11; })( 31 )
) {
 console.log( x );
}
foo(); // 42

def read_file(file, delete_after = false)
  # code
end

قد تعمل التعليمات البرمجية التالية في هذه الحالة بما في ذلك ECMAScript 6 (ES6) بالإضافة إلى الإصدارات السابقة.

function read_file(file, delete_after) {
    if(delete_after == undefined)
        delete_after = false;//default value

    console.log('delete_after =',delete_after);
}
read_file('text1.txt',true);
read_file('text2.txt');

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


function helloWorld(name, symbol = '!!!') {
    name = name || 'worlds';
    console.log('hello ' + name + symbol);
}

helloWorld(); // hello worlds!!!

helloWorld('john'); // hello john!!!

helloWorld('john', '(>.<)'); // hello john(>.<)

helloWorld('john', undefined); // hello john!!!

helloWorld(undefined, undefined); // hello worlds!!!






default-parameters