Einen Standardparameterwert für eine JavaScript-Funktion festlegen

Question

Ich möchte eine JavaScript-Funktion, um optionale Argumente, die ich einen Standard auf, die verwendet werden, wenn der Wert nicht definiert ist (und ignoriert, wenn der Wert übergeben wird). In Ruby kann man das so machen:

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

Funktioniert das auch in JavaScript?

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

Answer 1

Ja, die Verwendung von Standardparametern wird vollständig unterstützt in ES6 :

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

oder

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

aber vorher in ES5 können Sie dies problemlos tun:

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

Das heißt, wenn der Wert vorhanden ist, wird der Wert verwendet, andernfalls wird der zweite Wert nach || Operation, die das Gleiche bewirkt...

Anmerkung: Außerdem gibt es einen großen Unterschied zwischen den beiden, wenn Sie einen Wert an ES6 wenn auch nur ein Wert falsch ist, wird dieser durch einen neuen Wert ersetzt, etwa so null o "" ... aber ES5 wird nur ersetzt, wenn nur der übergebene Wert wahrheitsgemäß ist, weil die Art und Weise || arbeiten...

Answer 2

function throwIfNoValue() {
throw new Error('Missing argument');
}
function foo(argValue = throwIfNoValue()) {
return argValue ;
}

Hier ist foo() eine Funktion, die einen Parameter namens argValue hat. Wenn wir hier im Funktionsaufruf nichts übergeben, wird die Funktion throwIfNoValue() aufgerufen und das zurückgegebene Ergebnis wird dem einzigen Argument argValue zugewiesen. Auf diese Weise kann ein Funktionsaufruf als Standardparameter verwendet werden. Das vereinfacht den Code und macht ihn lesbarer.

Dieses Beispiel wurde von hier übernommen

Answer 3

Gemäß der Syntax

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

können Sie den Standardwert von Formalparametern festlegen. und auch undefinierte Werte prüfen, indem Sie typeof Funktion.

Answer 4

Wenn Sie aus irgendeinem Grund pas auf ES6 und sind mit lodash hier ist ein kurzer Weg, Funktionsparameter über _.defaultTo Methode:

var fn = function(a, b) {
  a = _.defaultTo(a, 'Hi')
  b = _.defaultTo(b, 'Mom!')

  console.log(a, b)
}

fn()                 // Hi Mom!
fn(undefined, null)  // Hi Mom!
fn(NaN, NaN)         // Hi Mom!
fn(1)                // 1 "Mom!"
fn(null, 2)          // Hi 2
fn(false, false)     // false false
fn(0, 2)             // 0 2

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

Damit wird der Standardwert festgelegt, wenn der aktuelle Wert NaN , null , oder undefiniert

Answer 5

Klänge der Zukunft

In Zukunft werden Sie ein Objekt auf ein anderes "verteilen" können (derzeit ab 2019 NICHT von Edge unterstützt !) - Demonstration, wie man das für schöne Standardoptionen unabhängig von der Reihenfolge verwenden kann:

function test(options) {
    var options = {
       // defaults
       url: 'defaultURL',
       some: 'somethingDefault',
       // override with input options
       ...options
    };

    var body = document.getElementsByTagName('body')[0];
    body.innerHTML += '<br>' + options.url + ' : ' + options.some;
}
test();
test({});
test({url:'myURL'});
test({some:'somethingOfMine'});
test({url:'overrideURL', some:'andSomething'});
test({url:'overrideURL', some:'andSomething', extra:'noProblem'});

MDN-Referenz: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

...währenddessen was Edge DOES unterstützt Object.assign() (IE nicht, aber ich hoffe wirklich, dass wir IE hinter uns lassen können :) )

In ähnlicher Weise könnten Sie Folgendes tun

    function test(options) {
        var options = Object.assign({
           // defaults
           url: 'defaultURL',
           some: 'somethingDefault',
        }, options); // override with input options

        var body = document.getElementsByTagName('body')[0];
        body.innerHTML += '<br>' + options.url + ' : ' + options.some;
    }
    test();
    test({});
    test({url:'myURL'});
    test({some:'somethingOfMine'});
    test({url:'overrideURL', some:'andSomething'});
    test({url:'overrideURL', some:'andSomething', extra:'noProblem'});

EDIT: Aufgrund von Kommentaren zu const Optionen - das Problem bei der Verwendung konstanter Optionen im Rest der Funktion ist eigentlich pas dass Sie das nicht tun können, ist nur, dass Sie die konstante Variable nicht in ihrer eigenen Deklaration verwenden können - Sie müssten die Benennung der Eingabe anpassen, z. B.

function test(input_options){
   const options = {
     // defaults
     someKey:    'someDefaultValue',
     anotherKey: 'anotherDefaultValue',

     // merge-in input options
     ...input_options
   };

   // from now on use options with no problem
}