it-swarm.com.de

Legen Sie einen Standardparameterwert für eine JavaScript-Funktion fest

Ich möchte, dass eine JavaScript-Funktion optionale Argumente enthält, für die ich einen Standardwert setze, der verwendet wird, wenn der Wert nicht definiert ist. In Ruby kannst du das so machen:

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

Funktioniert das in JavaScript?

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

In ES6/ES2015 befinden sich die Standardparameter in der Sprachspezifikation.

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

funktioniert einfach.

Referenz: Standardparameter - MDN

Mit Standardfunktionsparametern können Formalparameter mit Standardwerten initialisiert werden, wenn kein Wert oder undefined übergeben wird.

Sie können auch standardmäßige named -Parameter über Destructuring simulieren :

// 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
    ···
}

Pre ES2015,

Es gibt viele Möglichkeiten, aber dies ist meine bevorzugte Methode - Sie können alles übergeben, was Sie möchten, einschließlich falsch oder null. (typeof null == "object")

function foo(a, b) {
  a = typeof a !== 'undefined' ? a : 42;
  b = typeof b !== 'undefined' ? b : 'default_b';
  ...
}
3094
Tom Ritter
function read_file(file, delete_after) {
    delete_after = delete_after || "my default here";
    //rest of code
}

Dadurch wird delete_after der Wert von delete_after zugewiesen, wenn es sich nicht um einen falsey-Wert handelt, andernfalls wird die Zeichenfolge "my default here" zugewiesen. Weitere Informationen finden Sie unter Doug Crockfords Sprachumfrage und im Abschnitt Operatoren .

Dieser Ansatz funktioniert nicht, wenn Sie einen Falsey Wert übergeben möchten, d. H. false, null, undefined, 0 oder "". Wenn Sie falsey-Werte übergeben möchten, müssen Sie die Methode in Tom Ritters Antwort verwenden.

Bei einer Reihe von Parametern für eine Funktion ist es oft nützlich, dem Konsumenten zu erlauben, die Parameterargumente in einem Objekt zu übergeben und dann merge diese Werte mit einem Objekt, das die Standardwerte für die Funktion enthält

function read_file(values) {
    values = merge({ 
        delete_after : "my default here"
    }, values || {});

    // rest of code
}

// simple implementation based on $.extend() from jQuery
function merge() {
    var obj, name, copy,
        target = arguments[0] || {},
        i = 1,
        length = arguments.length;

    for (; i < length; i++) {
        if ((obj = arguments[i]) != null) {
            for (name in obj) {
                copy = obj[name];

                if (target === copy) {
                    continue;
                }
                else if (copy !== undefined) {
                    target[name] = copy;
                }
            }
        }
    }

    return target;
};

benutzen

// will use the default delete_after value
read_file({ file: "my file" }); 

// will override default delete_after value
read_file({ file: "my file", delete_after: "my value" }); 
580
Russ Cam

Ich finde, dass etwas Einfacheres so viel prägnanter und lesbarer ist.

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

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

In ECMAScript 6 können Sie genau das schreiben, was Sie haben:

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

Dies setzt delete_after auf false, wenn es nicht vorhanden ist, oder undefined. Sie können ES6-Funktionen wie diese heute mit Transpilern wie Babel verwenden.

Weitere Informationen finden Sie im MDN-Artikel

59
Felix Kling

Standardparameterwerte

Mit ES6 können Sie vielleicht eine der häufigsten Ausdrücke in JavaScript verwenden, um einen Standardwert für einen Funktionsparameter festzulegen. Die Art und Weise, wie wir dies seit Jahren getan haben, sollte ziemlich vertraut aussehen:

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

Dieses Muster wird am häufigsten verwendet, ist jedoch gefährlich, wenn Werte wie übergeben werden 

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

Warum? Da der 0 is falsy und damit der x || 11 results in 11 nicht der direkt in 0 übergebene Wert ist. Um dieses Problem zu beheben, schreiben manche Leute die Prüfung stattdessen ausführlicher:

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

wir können jetzt eine nette hilfreiche Syntax untersuchen, die ab ES6 hinzugefügt wurde, um die Zuweisung von Standardwerten zu fehlenden Argumenten zu rationalisieren:

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 in einer Funktionsdeklaration ist mehr wie x !== undefined ? x : 11 als die viel gebräuchlichere Sprache x || 11

Standardwertausdrücke

Function Standardwerte können mehr als nur einfache Werte wie 31 sein; Sie können jeder gültige Ausdruck sein, sogar ein 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

Wie Sie sehen, werden die Standardwertausdrücke nur langsam ausgewertet, dh sie werden nur dann ausgeführt, wenn sie benötigt werden, das heißt, wenn das Argument eines Parameters ausgelassen wird oder undefiniert ist.

Ein Standardwertausdruck kann sogar ein Aufruf eines Inline-Funktionsausdrucks sein - im Allgemeinen als Ausdruck der sofort aufgerufenen Funktion bezeichnet. (IIFE):

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

diese lösung ist in js eine arbeit für mich:

function read_file(file, delete_after) {
    delete_after = delete_after || false;
    // Code
}
10
Takács Zsolt

Verwenden Sie einfach einen expliziten Vergleich mit undefined.

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

als langjähriger C++ - Entwickler (Rookie für Webentwicklung :)), als ich zum ersten Mal auf diese Situation gestoßen bin, habe ich die Parametrierung in der Funktionsdefinition vorgenommen, wie in der Frage erwähnt, wie folgt. 

function myfunc(a,b=10)

Beachten Sie jedoch, dass es nicht konsistent in Browsern funktioniert. Für mich funktionierte es auf Chrome auf meinem Desktop, aber nicht auf Chrome auf Android . Eine sicherere Option, wie viele oben erwähnt haben, ist -

    function myfunc(a,b)
    {
    if (typeof(b)==='undefined') b = 10;
......
    }

Diese Antwort soll nicht die gleichen Lösungen wiederholen, die andere bereits erwähnt haben, sondern dass die Parametrierung in der Funktionsdefinition in einigen Browsern funktionieren sollte, sich aber nicht darauf verlassen sollte.

7
vivek

Als Update ... mit ECMAScript 6 können Sie SCHLIE&SZLIG;LICH Standardwerte in Funktionsparameterdeklarationen setzen:

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

f(1) === 50

Wie von - http://es6-features.org/#DefaultParameterValues ​​ referenziert.

7
zillaofthegods

Ich würde äußerste Vorsicht empfehlen, wenn Sie Standardparameterwerte in Javascript verwenden. Es erzeugt häufig Fehler, wenn es zusammen mit Funktionen höherer Ordnung wie forEach, map und reduce verwendet wird. Betrachten Sie zum Beispiel diese Codezeile:

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

parseInt hat einen optionalen zweiten Parameter function parseInt(s, [Radix=10]), ordnet jedoch die Aufrufe parseInt mit drei Argumenten zu: (element, index und array).

Ich schlage vor, dass Sie Ihre erforderlichen Parameter von Ihren optionalen/Standardwertargumenten trennen. Wenn für Ihre Funktion 1, 2 oder 3 erforderliche Parameter erforderlich sind, für die kein Standardwert sinnvoll ist, machen Sie sie zur Positionsposition, und alle optionalen Parameter sollten als benannte Attribute eines einzelnen Objekts folgen. Wenn Ihre Funktion 4 oder mehr benötigt, ist es möglicherweise sinnvoller, alle Argumente über Attribute eines einzelnen Objektparameters bereitzustellen.

In Ihrem Fall würde ich vorschlagen, dass Sie die deleteFile-Funktion wie folgt schreiben: (editiert nachinstead 'comments) ...

// 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 = !!(options && options.deleteAfter === true);
  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);

Das Ausführen des obigen Snippets veranschaulicht die Gefahren, die hinter den Standardargumentwerten für nicht verwendete Parameter lauern.

7
Doug Coburn

Verwenden Sie für alle, die daran interessiert sind, dass Code in Microsoft Edge funktioniert, keine Standardwerte in Funktionsparametern. 

function read_file(file, delete_after = false) {
    #code
}

In diesem Beispiel gibt Edge einen Fehler "Expecting ')" aus. 

Um diese Verwendung zu umgehen

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

Ab dem 8. August 2016 ist dies immer noch ein Problem

6
Steven Johnston

ES6: Wie in den meisten Antworten bereits erwähnt, können Sie in ES6 einfach einen Parameter zusammen mit einem Wert initialisieren.


ES5: Die meisten der angegebenen Antworten sind für mich nicht gut genug, da es gelegentlich vorkommt, dass ich Falsey-Werte wie 0, null und undefined an eine Funktion übergeben muss. Um festzustellen, ob ein Parameter undefiniert ist, weil dies der Wert ist, den ich übergeben habe und nicht, weil er überhaupt nicht definiert wurde:

function foo (param1, param2) {
   param1 = arguments.length >= 1 ? param1 : "default1";
   param2 = arguments.length >= 2 ? param2 : "default2";
}
3
Angel Politis
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!!!
3
TinhNQ

Wie in der Syntax 

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

sie können den Standardwert der Formalparameter . definieren und auch undefinierte Werte mithilfe der Funktion typeof prüfen.

3
sachin kumar

Verwenden Sie dies, wenn Sie die neueste ECMA6 Syntax verwenden möchten:

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

Es heißt default function parameters . Es ermöglicht die Initialisierung von Formalparametern mit Standardwerten, wenn kein Wert oder undefiniert übergeben wird. [~ # ~] Hinweis [~ # ~] : Funktioniert nicht mit Internet Explorer oder älteren Browsern.

Verwenden Sie für eine größtmögliche Kompatibilität Folgendes:

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

Beide Funktionen haben genau dasselbe Verhalten wie jedes dieser Beispiele und basieren auf der Tatsache, dass die Parametervariable undefined ist, wenn beim Aufrufen dieser Funktion kein Parameterwert übergeben wurde.

3
BlackBeard

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

Hier ist foo () eine Funktion mit einem Parameter namens argValue. Wenn wir beim Funktionsaufruf hier nichts übergeben, wird die Funktion throwIfNoValue () aufgerufen und das zurückgegebene Ergebnis dem einzigen Argument argValue zugewiesen. So kann ein Funktionsaufruf als Standardparameter verwendet werden. Dadurch wird der Code einfacher und lesbarer.

Dieses Beispiel wurde von hier übernommen

2
dutta

Wenn Sie ES6+ verwenden, können Sie die Standardparameter auf folgende Weise festlegen:

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

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

Wenn Sie ES5-Syntax benötigen, können Sie dies auf folgende Weise tun:

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

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

In der obigen Syntax wird der Operator OR verwendet. Der Operator OR gibt immer den ersten Wert zurück, wenn dieser Wert in true konvertiert werden kann. Andernfalls wird der Wert auf der rechten Seite zurückgegeben. Wenn die Funktion ohne entsprechendes Argument aufgerufen wird, wird die Parametervariable (in unserem Beispiel bar) von der JS-Engine auf undefined gesetzt. undefined Wird dann in false konvertiert und der OR-Operator gibt daher den Wert 0 zurück.

2

Wenn Sie aus irgendeinem Grund nicht auf ES6 sind und mit lodash sind, können Sie die Funktionsparameter mit der _.defaultTo -Methode voreingestellt setzen:

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>

Welches ist der Standardwert, wenn der aktuelle Wert NaN, null oder undefined ist.

1
Akrion

Ja, die Verwendung von Standardparametern wird in ES6 voll unterstützt:

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

oder

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

aber vorher in ES5 könnte man das leicht machen:

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

Was bedeutet, wenn der Wert vorhanden ist, verwenden Sie den Wert, andernfalls verwenden Sie den zweiten Wert nach || Operation, die das Gleiche tut ...

Hinweis: Es gibt auch einen großen Unterschied zwischen denen, wenn Sie einen Wert an ES6 übergeben, wobei sogar der Wert falsch ist und durch einen neuen Wert ersetzt wird. so etwas wie null oder ""... aber ES5 eins wird nur ersetzt, wenn nur der übergebene Wert wahr ist, das liegt daran, wie || Arbeiten...

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

Der folgende Code kann in dieser Situation funktionieren, einschließlich ECMAScript 6 (ES6) sowie früheren Versionen. 

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');

als Standardwert in Sprachen funktioniert, wenn der Parameterwert der Funktion beim Aufruf übersprungen wird, wird er in JavaScript undefined zugewiesen. Dieser Ansatz sieht nicht programmatisch attraktiv aus, hat aber Rückwärtskompatibilität .

0
Muhammad Rizwan

Ein anderer Ansatz zum Festlegen von Standardparametern besteht darin, die Objektzuordnung von Argumenten anstelle von Argumenten direkt zu verwenden. Zum Beispiel,

const defaultConfig = {
 category: 'Animals',
 legs: 4
};

function checkOrganism(props) {
 const category = props.category || defaultConfig.category;
 const legs = props.legs || defaultConfig.legs;
}

Auf diese Weise ist es einfach, die Argumente zu erweitern, und Sie müssen sich keine Gedanken über eine falsche Länge der Argumente machen.

0
Aman Pandey

Ja, dies wird als Standardparameter bezeichnet

Mit Standardfunktionsparametern können Formalparameter mit Standardwerten initialisiert werden, wenn kein oder undefinierter Wert übergeben wird.

Syntax:

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

Beschreibung:

Funktionsparameter standardmäßig auf undefined In Situationen kann es jedoch nützlich sein, einen anderen Standardwert festzulegen. Hier können Standardparameter helfen. 

In der Vergangenheit bestand die allgemeine Strategie zum Festlegen von Standardwerten darin, Parameterwerte im Rumpf der Funktion zu testen und einen Wert zuzuweisen, wenn sie nicht definiert sind. Wenn im Aufruf kein Wert angegeben wird, wäre dessen Wert undefiniert. Sie müssen eine bedingte Prüfung festlegen, um sicherzustellen, dass der Parameter nicht undefiniert ist

Mit den Standardparametern in ES2015 ist die Überprüfung im Funktionsrumpf nicht mehr erforderlich. Jetzt können Sie einfach einen Standardwert in den Funktionskopf eingeben.

Beispiel für die Unterschiede:

// 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

Verschiedene Syntaxbeispiele:

Padding undefined gegen andere Falschwerte:

Auch wenn der Wert beim Aufruf explizit festgelegt wird, ist der Wert des num-Arguments der Standardwert.

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)

Zum Anrufzeitpunkt ausgewertet:

Das Standardargument wird zur Aufrufzeit ausgewertet. Im Gegensatz zu anderen Sprachen wird bei jedem Aufruf der Funktion ein neues Objekt erstellt.

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

Standardparameter sind für spätere Standardparameter verfügbar:

Bereits angetroffene Parameter stehen für spätere Standardparameter zur Verfügung

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.')

Funktionen innerhalb des Funktionskörpers definiert:

Eingeführt in Gecko 33 (Firefox 33/Thunderbird 33/SeaMonkey 2.30). Funktionen, die im Funktionshauptteil deklariert sind, können nicht innerhalb von Standardparametern referenziert werden und einen ReferenceError auslösen (derzeit ein TypeError in SpiderMonkey, siehe Fehler 1022967). Standardparameter werden immer zuerst ausgeführt, Funktionsdeklarationen innerhalb des Funktionskörpers werden anschließend ausgewertet.

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

Parameter ohne Standardwerte nach Standardparametern:

Vor Gecko 26 (Firefox 26/Thunderbird 26/SeaMonkey 2.23/Firefox OS 1.2) führte der folgende Code zu einem SyntaxError. Dies wurde in Bug 777060 behoben und funktioniert in späteren Versionen erwartungsgemäß. Die Parameter werden immer noch von links nach rechts gesetzt, wodurch die Standardparameter überschrieben werden, auch wenn spätere Parameter ohne Standardwerte vorhanden sind.

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

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

Zerstörtes Parameter mit Standardwertzuweisung:

Sie können die Standardwertzuordnung mit der Notierungsfunktion für die destrukturierende Zuordnung verwenden

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

f(); // 6
0
esewalson