Domanda Imposta un valore di parametro predefinito per una funzione JavaScript


Vorrei che una funzione JavaScript avesse argomenti opzionali su cui imposto un valore predefinito, che viene utilizzato se il valore non è definito. In Ruby puoi farlo in questo modo:

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

Funziona in JavaScript?

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

2016
2018-05-21 20:07


origine


risposte:


Da ES6 / ES2015, i parametri predefiniti sono specificati nella lingua.

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

funziona

Riferimento: Parametri predefiniti - MDN

I parametri di funzione predefiniti consentono di inizializzare i parametri formali con i valori predefiniti se nessun valore o non definito è passato.

Puoi anche simulare il valore predefinito di nome parametri tramite destrutturazione:

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

Ci sono molti modi, ma questo è il mio metodo preferito: ti lascia passare tutto ciò che vuoi, incluso falso o nulla. (typeof null == "object")

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

2931
2018-05-21 20:10



function read_file(file, delete_after) {
    delete_after = delete_after || "my default here";
    //rest of code
}

Questo assegna a delete_after il valore di delete_after se non è un Falsey valore altrimenti assegna la stringa "my default here". Per maggiori dettagli, controlla Indagine di Doug Crockford sulla lingua e controlla la sezione sugli operatori.

Questo approccio non funziona se vuoi passare a Falsey valore i.e. false, null, undefined, 0 o "". Se hai bisogno Falsey i valori da passare in te dovrebbero utilizzare il metodo in La risposta di Tom Ritter.

Quando si ha a che fare con un numero di parametri per una funzione, è spesso utile consentire al consumatore di passare gli argomenti dei parametri in un oggetto e poi fondersi questi valori con un oggetto che contiene i valori predefiniti per la funzione

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;
};

usare

// 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" }); 

559
2018-05-21 20:09



Trovo che qualcosa di semplice come questo sia molto più conciso e leggibile personalmente.

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

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

137
2018-05-21 20:18



In ECMAScript 6 sarai effettivamente in grado di scrivere esattamente ciò che hai:

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

Questo verrà impostato delete_after a false se non è presente o undefined. È possibile utilizzare le funzionalità ES6 come questa oggi con transporter come Babele.

Vedere l'articolo MDN per ulteriori informazioni.


54
2018-05-29 15:25



Valori dei parametri predefiniti

Con ES6, puoi fare forse uno degli idiomi più comuni in JavaScript si riferisce all'impostazione di un valore predefinito per un parametro di funzione. Il modo in cui lo abbiamo fatto per anni dovrebbe sembrare abbastanza familiare:

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

Questo schema è più utilizzato, ma è pericoloso quando passiamo valori come

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

Perché? Perché il 0 is falsye così il x || 11 results in 11, non il passato direttamente in 0. Per risolvere questo problema, alcune persone scriveranno invece il controllo in modo più verosimile come questo:

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

ora possiamo esaminare una bella sintassi utile aggiunta al ES6 per semplificare l'assegnazione dei valori predefiniti agli argomenti mancanti:

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 una dichiarazione di funzione è più simile x !== undefined ? x : 11 rispetto all'idioma molto più comune x || 11

Espressioni valore predefinito

Function i valori predefiniti possono essere più di semplici valori come 31; possono essere qualsiasi espressione valida, anche a 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

Come puoi vedere, le espressioni di valore di default vengono ponderate, il che significa che vengono eseguite solo se e quando sono necessarie, ovvero quando l'argomento di un parametro viene omesso o non è definito.

Un'espressione di valore di default può anche essere una chiamata di espressioni di funzione inline, comunemente denominata espressione di funzione immediatamente richiamata (IIFE):

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

18
2017-10-15 17:58



quella soluzione è lavoro per me in js:

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

8
2017-11-16 11:29



Basta usare un confronto esplicito con undefined.

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

6
2017-11-16 07:34



Essendo uno sviluppatore C ++ di lunga data (Rookie to web development :)), quando ho incontrato per la prima volta questa situazione, ho eseguito l'assegnazione dei parametri nella definizione della funzione, come indicato nella domanda, come segue.

function myfunc(a,b=10)

Ma attenzione che non funziona in modo coerente attraverso i browser. Per me ha funzionato su Chrome sul mio desktop, ma non ha funzionato su Chrome su Android. Opzione più sicura, come molti hanno menzionato sopra è -

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

L'intenzione di questa risposta non è di ripetere le stesse soluzioni, ciò che altri hanno già menzionato, ma di informare che l'assegnazione dei parametri nella definizione della funzione può funzionare su alcuni browser, ma non fare affidamento su di essa.


5
2018-05-19 06:40



Come aggiornamento ... con ECMAScript 6 puoi farlo FINALMENTE imposta i valori di default nelle dichiarazioni dei parametri di funzione in questo modo:

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

f(1) === 50

Come riferito da - http://es6-features.org/#DefaultParameterValues


4
2017-10-06 16:16



Per chiunque sia interessato a far funzionare il codice in Microsoft Edge, non utilizzare i parametri di default.

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

In quell'esempio Edge genererà un errore "Expecting") ""

Per aggirare questo uso

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

A partire dall'8 agosto 2016 questo è ancora un problema


4
2017-08-03 14:49