Il modo migliore per determinare se un argomento non viene inviato alla funzione JavaScript

Ora ho visto 2 metodi per determinare se un argomento è stato passato a una funzione JavaScript. Mi chiedo se un metodo sia migliore dell'altro o se uno sia solo male da usare?

 function Test(argument1, argument2) {
      if (Test.arguments.length == 1) argument2 = 'blah';

      alert(argument2);
 }

 Test('test');

O

 function Test(argument1, argument2) {
      argument2 = argument2 || 'blah';

      alert(argument2);
 }

 Test('test');

Per quanto ne so, entrambi risultano nella stessa cosa, ma ho usato solo il primo prima in produzione.

Un'altra opzione, come menzionato da Tom :

function Test(argument1, argument2) {
    if(argument2 === null) {
        argument2 = 'blah';
    }

    alert(argument2);
}

Secondo il commento di Juan, sarebbe meglio cambiare il suggerimento di Tom in:

function Test(argument1, argument2) {
    if(argument2 === undefined) {
        argument2 = 'blah';
    }

    alert(argument2);
}

Esistono diversi modi per verificare se un argomento è stato passato a una funzione. Oltre ai due che hai menzionato nella tua (originale) domanda - controllo arguments.lengtho utilizzo ||dell'operatore per fornire valori predefiniti - si possono anche verificare esplicitamente gli argomenti per undefinedvia argument2 === undefinedo typeof argument2 === 'undefined'se si è paranoici (vedere commenti).

Utilizzando l' ||operatore è diventata una pratica standard - tutti i bambini freschi farlo - ma attenzione: il valore predefinito verrà attivato se i Esamina argomento false, il che significa che potrebbe in realtà essere undefined, null, false, 0, ''(o qualsiasi altra cosa per la quale Boolean(...)i rendimenti false).

Quindi la domanda è quando usare quale controllo, dato che tutti producono risultati leggermente diversi.

Il controllo arguments.lengthmostra il comportamento "più corretto", ma potrebbe non essere fattibile se esiste più di un argomento facoltativo.

Il test per il undefinedprossimo è il "migliore" - "fallisce" solo se la funzione viene esplicitamente chiamata con un undefinedvalore, che con ogni probabilità dovrebbe essere trattato allo stesso modo dell'omissione dell'argomento.

L'uso ||dell'operatore potrebbe innescare l'utilizzo del valore predefinito anche se viene fornito un argomento valido. D'altra parte, il suo comportamento potrebbe effettivamente essere desiderato.

Riassumendo: usalo solo se sai cosa stai facendo!

A mio avviso, usare ||è anche la strada da percorrere se c'è più di un argomento facoltativo e non si vuole passare un oggetto letteralmente come soluzione alternativa per i parametri con nome.

Un altro bel modo per fornire valori predefiniti usando arguments.lengthè possibile scorrendo le etichette di un'istruzione switch:

function test(requiredArg, optionalArg1, optionalArg2, optionalArg3) {
    switch(arguments.length) {
        case 1: optionalArg1 = 'default1';
        case 2: optionalArg2 = 'default2';
        case 3: optionalArg3 = 'default3';
        case 4: break;
        default: throw new Error('illegal argument count')
    }
    // do stuff
}

Questo ha il rovescio della medaglia che l'intenzione del programmatore non è (visivamente) ovvia e usa "numeri magici"; è quindi probabilmente soggetto a errori.

Se stai usando jQuery, un'opzione che è piacevole (specialmente per situazioni complicate) è usare il metodo di estensione di jQuery .

function foo(options) {

    default_options = {
        timeout : 1000,
        callback : function(){},
        some_number : 50,
        some_text : "hello world"
    };

    options = $.extend({}, default_options, options);
}

Se si chiama la funzione, quindi in questo modo:

foo({timeout : 500});

La variabile opzioni sarebbe quindi:

{
    timeout : 500,
    callback : function(){},
    some_number : 50,
    some_text : "hello world"
};

Questo è uno dei pochi casi in cui trovo il test:

if(! argument2) {  

}

funziona abbastanza bene e porta sintatticamente le implicazioni corrette.

(Con la restrizione simultanea che non permetterei un valore nullo legittimo per il argument2quale ha qualche altro significato; ma sarebbe davvero confuso.)

MODIFICARE:

Questo è davvero un buon esempio di una differenza stilistica tra linguaggi tipicamente vaghi e fortemente tipizzati; e un'opzione stilistica che javascript offre a picche.

La mia preferenza personale (senza critiche per altre preferenze) è il minimalismo. Meno il codice ha da dire, fintanto che sono coerente e conciso, meno qualcun altro deve comprendere per dedurre correttamente il mio significato.

Un'implicazione di quella preferenza è che non voglio - non trovo utile - accumulare un mucchio di test di dipendenza dal tipo. Invece, provo a fare in modo che il codice significhi ciò che sembra significhi; e testare solo ciò per cui avrò davvero bisogno.

Una delle esasperazioni che trovo nel codice di alcune altre persone è la necessità di capire se, in un contesto più ampio, si aspettano effettivamente di imbattersi nei casi per cui stanno testando. O se stanno provando a testare tutto il possibile, sulla possibilità che non anticipino completamente il contesto. Ciò significa che alla fine ho bisogno di rintracciarli esaurientemente in entrambe le direzioni prima di poter refactificare o modificare con sicurezza qualsiasi cosa. Immagino che ci siano buone probabilità che abbiano messo in atto quei vari test perché prevedevano circostanze in cui sarebbero stati necessari (e che di solito non sono evidenti per me).

(Ritengo che un grave aspetto negativo nel modo in cui queste persone usano i linguaggi dinamici. Troppo spesso le persone non vogliono rinunciare a tutti i test statici e finiscono per fingere.)

L'ho visto in modo molto evidente nel confrontare il codice completo di ActionScript 3 con l'elegante codice javascript. L'AS3 può essere 3 o 4 volte la maggior parte dei js e l'affidabilità che sospetto non è almeno migliore, solo a causa del numero (3-4X) delle decisioni di codifica che sono state prese.

Come dici tu, Shog9, YMMV. : D

Ci sono differenze significative. Impostiamo alcuni casi di test:

var unused; // value will be undefined
Test("test1", "some value");
Test("test2");
Test("test3", unused);
Test("test4", null);
Test("test5", 0);
Test("test6", "");

Con il primo metodo che descrivi, solo il secondo test utilizzerà il valore predefinito. Il secondo metodo non adempia tutti tranne il primo (come convertirà JS undefined, null, 0, e ""nella booleano false. E se si sceglie di usare il metodo di Tom, solo la quarta prova userà il default!

Quale metodo scegli dipende davvero dal tuo comportamento previsto. Se undefinedsono consentiti valori diversi da argument2, allora probabilmente vorrai qualche variazione sul primo; se si desidera un valore diverso da zero, non nullo, non vuoto, il secondo metodo è l'ideale, anzi, viene spesso utilizzato per eliminare rapidamente un intervallo così ampio di valori.

url = url === undefined ? location.href : url;

In ES6 (ES2015) è possibile utilizzare i parametri predefiniti

function Test(arg1 = 'Hello', arg2 = 'World!'){
  alert(arg1 + ' ' +arg2);
}

Test('Hello', 'World!'); // Hello World!
Test('Hello'); // Hello World!
Test(); // Hello World!

Mi dispiace, non posso ancora commentare, quindi per rispondere alla risposta di Tom ... In javascript (undefined! = Null) == false In effetti quella funzione non funzionerà con "null", dovresti usare "undefined"

Perché non usare l' !!operatore? Questo operatore, posto prima della variabile, la trasforma in un valore booleano (se ho capito bene), quindi !!undefinede !!null(e anche !!NaN, che può essere abbastanza interessante) tornerà false.

Ecco un esempio:

function foo(bar){
    console.log(!!bar);
}

foo("hey") //=> will log true

foo() //=> will log false

Può essere conveniente avvicinarsi al rilevamento degli argomenti evocando la tua funzione con un oggetto con proprietà opzionali:

function foo(options) {
    var config = { // defaults
        list: 'string value',
        of: [a, b, c],
        optional: {x: y},
        objects: function(param){
           // do stuff here
        }
    }; 
    if(options !== undefined){
        for (i in config) {
            if (config.hasOwnProperty(i)){
                if (options[i] !== undefined) { config[i] = options[i]; }
            }
        }
    }
}

Esiste anche un modo complicato per scoprire se un parametro viene passato o meno a una funzione . Dai un'occhiata all'esempio seguente:

this.setCurrent = function(value) {
  this.current = value || 0;
};

Ciò necessario significa che se il valore di valuenon è presente / passato, impostarlo su 0.

Abbastanza bello eh!

Alcune volte potresti anche voler verificare il tipo, specialmente se stai usando la funzione come getter e setter. Il seguente codice è ES6 (non verrà eseguito in EcmaScript 5 o precedente):

class PrivateTest {
    constructor(aNumber) {
        let _aNumber = aNumber;

        //Privileged setter/getter with access to private _number:
        this.aNumber = function(value) {
            if (value !== undefined && (typeof value === typeof _aNumber)) {
                _aNumber = value;
            }
            else {
                return _aNumber;
            }
        }
    }
}

function example(arg) {
  var argumentID = '0'; //1,2,3,4...whatever
  if (argumentID in arguments === false) {
    console.log(`the argument with id ${argumentID} was not passed to the function`);
  }
}

Perché le matrici ereditano da Object.prototype. Considera ⇑ di migliorare il mondo.

fnCalledFunction (Param1, Param2, window.YourOptionalParameter)

Se la funzione di cui sopra viene chiamata da molti punti e sei sicuro che i primi 2 parametri vengano passati da ogni dove ma non sei sicuro del terzo parametro, puoi usare la finestra.

window.param3 gestirà se non è definito dal metodo del chiamante.