Gibt es eine bessere Möglichkeit, optionale Funktionsparameter in JavaScript zu verwenden?

Question

Ich habe optionale Parameter in JavaScript immer wie folgt behandelt:

function myFunc(requiredArg, optionalArg){
  optionalArg = optionalArg || 'defaultValue';

  // Do stuff
}

Gibt es einen besseren Weg, dies zu tun?

Gibt es Fälle, in denen die Verwendung von || wie das scheitern wird?

Answer 1

Gelandet bei dieser Frage, auf der Suche nach Standard-Parameter in EcmaScript 2015 und deshalb nur erwähnt...

Con ES6 können wir tun Standardparameter :

function doSomething(optionalParam = "defaultValue"){
    console.log(optionalParam);//not required to check for falsy values
}

doSomething(); //"defaultValue"
doSomething("myvalue"); //"myvalue"

Answer 2

Während eines Projekts bemerkte ich, dass ich mich zu sehr mit den optionalen Parametern und Einstellungen wiederholte, also habe ich eine Klasse erstellt, die die Typüberprüfung übernimmt und einen Standardwert zuweist, was zu einem sauberen und lesbaren Code führt. Siehe Beispiel und lassen Sie mich wissen, ob dies für Sie funktioniert.

var myCar           = new Car('VW', {gearbox:'automatic', options:['radio', 'airbags 2x']});
var myOtherCar      = new Car('Toyota');

function Car(brand, settings) {
    this.brand      = brand;

    // readable and adjustable code
    settings        = DefaultValue.object(settings, {});
    this.wheels     = DefaultValue.number(settings.wheels, 4);
    this.hasBreaks  = DefaultValue.bool(settings.hasBreaks, true);
    this.gearbox    = DefaultValue.string(settings.gearbox, 'manual');
    this.options    = DefaultValue.array(settings.options, []);

    // instead of doing this the hard way
    settings        = settings || {};
    this.wheels     = (!isNaN(settings.wheels)) ? settings.wheels : 4;
    this.hasBreaks  = (typeof settings.hasBreaks !== 'undefined') ? (settings.hasBreaks === true) : true;
    this.gearbox    = (typeof settings.gearbox === 'string') ? settings.gearbox : 'manual';
    this.options    = (typeof settings.options !== 'undefined' && Array.isArray(settings.options)) ? settings.options : [];
}

Verwendung dieser Klasse:

(function(ns) {

    var DefaultValue = {

        object: function(input, defaultValue) {
            if (typeof defaultValue !== 'object') throw new Error('invalid defaultValue type');
            return (typeof input !== 'undefined') ? input : defaultValue;
        },

        bool: function(input, defaultValue) {
            if (typeof defaultValue !== 'boolean') throw new Error('invalid defaultValue type');
            return (typeof input !== 'undefined') ? (input === true) : defaultValue;
        },

        number: function(input, defaultValue) {
            if (isNaN(defaultValue)) throw new Error('invalid defaultValue type');
            return (typeof input !== 'undefined' && !isNaN(input)) ? parseFloat(input) : defaultValue;
        },

        // wrap the input in an array if it is not undefined and not an array, for your convenience
        array: function(input, defaultValue) {
            if (typeof defaultValue === 'undefined') throw new Error('invalid defaultValue type');
            return (typeof input !== 'undefined') ? (Array.isArray(input) ? input : [input]) : defaultValue;
        },

        string: function(input, defaultValue) {
            if (typeof defaultValue !== 'string') throw new Error('invalid defaultValue type');
            return (typeof input === 'string') ? input : defaultValue;
        },

    };

    ns.DefaultValue = DefaultValue;

}(this));

Answer 3

Das ist es, was ich am Ende hatte:

function WhoLikesCake(options) {
  options = options || {};
  var defaultOptions = {
    a : options.a || "Huh?",
    b : options.b || "I don't like cake."
  }
  console.log('a: ' + defaultOptions.b + ' - b: ' + defaultOptions.b);

  // Do more stuff here ...
}

So wird es genannt:

WhoLikesCake({ b : "I do" });

Answer 4

In allen Fällen, in denen optionalArg falsy ist, wird defaultValue verwendet.

function myFunc(requiredArg, optionalArg) {
    optionalArg = optionalArg || 'defaultValue';
    console.log(optionalArg);
    // Do stuff
}
myFunc(requiredArg);
myFunc(requiredArg, null);
myFunc(requiredArg, undefined);
myFunc(requiredArg, "");
myFunc(requiredArg, 0);
myFunc(requiredArg, false);

Alle der oben genannten protokollieren defaultValue, weil alle 6 fehlerhaft sind. In den Fällen 4, 5, 6 sind Sie vielleicht nicht daran interessiert, optionalArg als defaultValue zu setzen, aber es setzt, da sie falsy sind.

Answer 5

Leute -

Nachdem ich mir diese und andere Lösungen angeschaut hatte, probierte ich einige davon aus, wobei ich einen Codeschnipsel, der ursprünglich von W3Schools stammt, als Grundlage verwendete. Was funktioniert, können Sie im Folgenden nachlesen. Jeder der auskommentierten Punkte funktioniert ebenfalls und ist so angelegt, dass Sie experimentieren können, indem Sie einfach einzelne Kommentare entfernen. Um das klarzustellen, wird der Parameter "eyecolor" nicht definiert.

function person(firstname, lastname, age, eyecolor)
{
this.firstname = firstname;
this.lastname = lastname;
this.age = age;
this.eyecolor = eyecolor;
// if(null==eyecolor)
//   this.eyecolor = "unknown1";
//if(typeof(eyecolor)==='undefined') 
//   this.eyecolor = "unknown2";
// if(!eyecolor)
//   this.eyecolor = "unknown3";
this.eyecolor = this.eyecolor || "unknown4";
}

var myFather = new person("John", "Doe", 60);
var myMother = new person("Sally", "Rally", 48, "green");

var elem = document.getElementById("demo");
elem.innerHTML = "My father " +
              myFather.firstname + " " +
              myFather.lastname + " is " +
              myFather.age + " with " +
              myFather.eyecolor + " eyes.<br/>" +
              "My mother " +
              myMother.firstname + " " +
              myMother.lastname + " is " +
              myMother.age + " with " +
              myMother.eyecolor + " eyes.";