Définir une valeur de paramètre par défaut pour une fonction JavaScript


2367

Je voudrais qu'une fonction JavaScript ait des arguments optionnels sur lesquels j'ai défini une valeur par défaut, qui seront utilisés si la valeur n'est pas définie (et ignorée si la valeur est transmise). Dans Ruby, vous pouvez le faire comme ceci:

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

Est-ce que cela fonctionne en JavaScript?

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

Réponses:


3299

Depuis ES6 / ES2015 , les paramètres par défaut sont dans la spécification de langue.

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

fonctionne juste.

Référence: Paramètres par défaut - MDN

Les paramètres de fonction par défaut permettent aux paramètres formels d'être initialisés avec des valeurs par défaut si aucune valeur ou indéfinie n'est transmise.

Vous pouvez également simuler des paramètres nommés par défaut via la déstructuration :

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

Pré ES2015 ,

Il existe de nombreuses façons, mais c'est ma méthode préférée - elle vous permet de transmettre tout ce que vous voulez, y compris faux ou nul. ( typeof null == "object")

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

216
Vous pouvez également l'encapsuler en tant que tel: function defaultFor(arg, val) { return typeof arg !== 'undefined' ? arg : val; }puis vous pouvez l'appeler commea = defaultFor(a, 42);
Camilo Martin

6
@SiPlus et vous avez obtenu gratuitement des erreurs de référence supplémentaires en essayant d'utiliser des undefinedobjets: p Même s'il peut fonctionner avec certains navigateurs et être plus rapide, il nulls'agit toujours d'un objet et undefinedfait référence au type primitif qui essaie de dire qu'il existe rien ici, même pas null. Voir ici, les deux cas en bref: JavaScript / Reference / Global_Objects / undefined .
Sampo Sarrala - codidact.org

9
si vous vérifiez contre la propriété d'un objet, alors typeofest redondant. function foo(data) { var bar = data.bar !== undefined ? data.bar : 'default'; }Cela ne générera pas d'erreurs de référence et est concis.
Dziamid

10
Je sais que c'est vraiment mineur, mais je n'aime pas comment vous vous affectez a = aet b = bquand ces paramètres ne sont pas indéfinis. En outre, cet opérateur ternaire avec une condition un peu compliquée peut être difficile à lire pour les futurs responsables. Je préférerais la syntaxe suivante: if (typeof a == 'undefined') a = 42- pas d'affectation inutile et un peu plus facile à lire.
Daddy32

12
Y a-t-il une raison d'utiliser typeof? Il semblerait plus simple de le faire a === undefined. De plus, vous obtiendrez une erreur de référence si vous avez mal orthographié par undefinedrapport à le mettre dans une chaîne.
Abe Voelker

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

Ceci affecte à delete_afterla valeur de delete_aftersi ce n'est pas une valeur de falsey sinon il affecte la chaîne "my default here". Pour plus de détails, consultez le sondage de Doug Crockford sur la langue et consultez la section sur les opérateurs .

Cette approche ne fonctionne pas si vous voulez passer dans une Falsey valeur -à- dire false, null, undefined, 0ou "". Si vous souhaitez que les valeurs de falsey soient transmises, vous devrez utiliser la méthode indiquée dans la réponse de Tom Ritter .

Lorsqu'il s'agit d'un certain nombre de paramètres d'une fonction, il est souvent utile de permettre au consommateur de passer les arguments de paramètre dans un objet, puis de fusionner ces valeurs avec un objet qui contient les valeurs par défaut de la fonction

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

utiliser

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

115
Je trouve cela insuffisant, car je veux peut-être passer pour faux.
Tom Ritter

52
Je trouve que c'est suffisant pour la plupart des situations
Russ Cam

50
Parce que cela ne fonctionne pas pour les valeurs de falsey, cela peut créer un cauchemar de maintenance. Un peu de code qui a toujours reçu des valeurs véridiques avant et qui échoue soudainement parce qu'un falsey est passé devrait probablement être évité lorsqu'une approche plus robuste est disponible.
jinglesthula

1
Comment se fait-il que dans ce cas, delete_afterle résultat booléen ne soit pas obtenu delete_after || "my default value"?
xbonez

3
ou, vous pouvez simplement utiliser par défaut une valeur de falsey - qui est généralement une bonne valeur par défaut de toute façon (par exemple, faux pour les bools, chaîne vide pour les chaînes, 0 pour les nombres, etc.) - dans ce cas, peu importe ce qui était passé.
Mark Brackett

150

Je trouve que quelque chose de simple comme ça est beaucoup plus concis et lisible personnellement.

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

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

6
Mise à jour: Si vous utilisez déjà underscore.js, je le trouve encore meilleur à utiliser _.defaults(iceCream, {flavor: "vanilla", sprinkles: "lots"});. L'utilisation de l'espace de noms global comme indiqué dans cette réponse est considérée par beaucoup comme une mauvaise pratique. Vous pouvez également envisager de lancer votre propre utilitaire pour cette tâche courante (par exemple. util.default(arg, "defaul value")) Si vous ne souhaitez pas utiliser de soulignement, mais je finis surtout par utiliser le soulignement tôt ou tard de toute façon, il est inutile de réinventer la roue.
andersand

2
En fait, je recommande celui-ci, je l'utilise et l'appelle "por" qui signifie "paramètre ou"
super

2
Ne dites pas typeof arg == 'undefined', dites plutôt arg === undefined
OsamaBinLogin

3
@OsamaBinLogin ce que vous dites est correct pour le JS actuel - l'ancien test persiste parce que sur certains navigateurs, il était possible d'écraser undefinedavec une autre valeur, provoquant l'échec du test.
Alnitak

2
@Alnitak: Il est toujours possible de passer outre undefined. Donc, c'est toujours une bonne idée d'utiliser typeofet 'undefined'.
LS

63

Dans ECMAScript 6, vous pourrez réellement écrire exactement ce que vous avez:

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

Il sera réglé delete_aftersur falses'il n'est pas présent ou undefined. Vous pouvez utiliser des fonctionnalités ES6 comme celle-ci aujourd'hui avec des transpilers tels que Babel .

Consultez l'article MDN pour plus d'informations .


1
ECMAScript 6 Je suppose ... (j'aurais corrigé par moi-même mais je ne peux pas faire de modifications <6 caractères)
Zac

1
En attente de navigateur, obtenez ECMAScript 6
Adriano Resende

1
À quoi Babel transpilerait-il cela?
harryg


2
Voici le tableau de compatibilité pour ES6 kangax.github.io/compat-table/es6/#default_function_parameters Malheureusement cette syntaxe n'est pas encore prise en charge .
freemanoid

27

Valeurs des paramètres par défaut

Avec ES6, vous pouvez peut-être l'un des idiomes les plus courants en ce qui JavaScriptconcerne la définition d'une valeur par défaut pour un paramètre de fonction. La façon dont nous procédons depuis des années devrait sembler assez familière:

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

Ce modèle est le plus utilisé, mais il est dangereux lorsque nous transmettons des valeurs comme

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

Pourquoi? Parce que le 0 is falsy, et donc le x || 11 results in 11, pas le directement passé en 0. Pour résoudre ce problème, certaines personnes écriront plutôt la vérification plus verbalement comme ceci:

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

nous pouvons maintenant examiner une belle syntaxe utile ajoutée à partir de ES6pour rationaliser l'attribution des valeurs par défaut aux arguments manquants:

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 = 11dans une déclaration de fonction ressemble plus x !== undefined ? x : 11à l'idiome beaucoup plus courantx || 11

Expressions de valeur par défaut

Functionles valeurs par défaut peuvent être plus que de simples valeurs comme 31; ils peuvent être n'importe quelle expression valide, même un 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

Comme vous pouvez le voir, les expressions de valeur par défaut sont évaluées paresseusement, ce qui signifie qu'elles ne sont exécutées que si et quand elles sont nécessaires, c'est-à-dire lorsque l'argument d'un paramètre est omis ou n'est pas défini.

Une expression de valeur par défaut peut même être un appel d'expression de fonction en ligne - communément appelé expression de fonction immédiatement appelée (IIFE):

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

13

cette solution fonctionne pour moi dans js:

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

4
Que se passe-t-il si delete_afterest 0ou null? Cela ne fonctionnera pas correctement pour ces cas.
Dmitri Pavlutin

@StephanBijzitter, ce ne serait vrai que dans certains cas. Mais si vous souhaitez uniquement que les valeurs par défaut effacent les valeurs, cela n'a pas fonctionné, car 0 ou null! === false.
Rutrus

@Rutrus: Je ne comprends rien de ce que vous venez de dire.
Stephan Bijzitter

Et alors delete_after = delete_after === undefined ? false : delete_after?
aashah7

10

Utilisez simplement une comparaison explicite avec undefined.

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

10

Je recommanderais fortement une extrême prudence lors de l'utilisation des valeurs de paramètres par défaut en javascript. Il crée souvent des bugs lorsqu'ils sont utilisés conjointement avec des fonctions d'ordre supérieur comme forEach, mapet reduce. Par exemple, considérez cette ligne de code:

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

parseInt a un second paramètre optionnel function parseInt(s, [radix=10]) mais mappe les appels parseIntavec trois arguments: ( élément , index et tableau ).

Je vous suggère de séparer vos paramètres requis de vos arguments optionnels / par défaut. Si votre fonction prend 1,2 ou 3 paramètres requis pour lesquels aucune valeur par défaut n'a de sens, définissez-les comme des paramètres positionnels pour la fonction, tous les paramètres facultatifs doivent suivre en tant qu'attributs nommés d'un seul objet. Si votre fonction prend 4 ou plus, il est peut-être plus logique de fournir tous les arguments via les attributs d'un paramètre d'objet unique.

Dans votre cas, je vous suggère d'écrire votre fonction deleteFile comme ceci: ( édité selon instead les commentaires de ) ...

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

L'exécution de l'extrait ci-dessus illustre les dangers qui se cachent derrière les valeurs d'argument par défaut pour les paramètres inutilisés.


1
Cette "meilleure solution" est tout à fait illisible. Je recommanderais plutôt de vérifier le type de variable comme typeof deleteAfter === 'bool'et de lever l'exception sinon. De plus, en cas d'utilisation de méthodes telles que map / foreach, etc., utilisez-les avec prudence et enveloppez les fonctions appelées avec une fonction anonyme. ['1', '2', '3'].map((value) => {read_file(value);})
au lieu de

C'est un bon point. J'essayais d'éviter d'utiliser des bibliothèques dans mon extrait de code, mais cet idiome est assez compliqué en pur javascript. Personnellement, j'utiliserais la getméthode de lodash pour récupérer deleteAfter. Lancer une exception typeof 'deleteAfter' !== 'bool'peut également être une bonne mesure prudente. Je n'aime pas concevoir des méthodes qui obligent l'appelant à "faire preuve de prudence". La prudence incombe à la fonction et non à l'appelant. Le comportement final doit suivre le principe de la moindre surprise.
Doug Coburn le

Je suis d'accord, cette méthode ne doit pas être écrite de la façon dont l'appeler peut casser son comportement. Mais gardez à l'esprit que la fonction est comme le modèle et l'appelant est comme le contrôleur. Le modèle doit prendre en charge le traitement des données. La fonction (méthode) doit s'attendre à ce que les données puissent être transmises de manière incorrecte et les gérer. C'est pourquoi la vérification du type de paramètre plus la levée de l'exception est le meilleur moyen. Même si c'est plus complexe. Mais cela peut encore vous éviter de vous gratter la tête et de continuer à demander ... POURQUOI ÇA NE FONCTIONNE PAS?! et puis ... POURQUOI ÇA MARCHE?!
au lieu de


8

étant un développeur C ++ de longue date (débutant en développement Web :)), lorsque j'ai rencontré cette situation pour la première fois, j'ai fait le paramétrage dans la définition de la fonction, comme cela est mentionné dans la question, comme suit.

function myfunc(a,b=10)

Mais attention, cela ne fonctionne pas de manière cohérente sur tous les navigateurs. Pour moi, cela fonctionnait sur Chrome sur mon bureau, mais ne fonctionnait pas sur Chrome sur Android. Une option plus sûre, comme beaucoup l'ont mentionné ci-dessus est -

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

L'intention de cette réponse n'est pas de répéter les mêmes solutions, ce que d'autres ont déjà mentionné, mais d'informer que l'attribution des paramètres dans la définition de fonction peut fonctionner sur certains navigateurs, mais ne vous y fiez pas.


3
L'affectation dans la définition de fonction ne fonctionne pas non plus dans IE 11, qui est la version la plus récente d'IE pour Windows 8.1.
DiMono

1
Au cas où quelqu'un se function myfunc(a,b=10)poserait la question de la syntaxe ES6, il existe des liens vers des tableaux de compatibilité dans d'autres réponses.
gcampbell du

7

Pour toute personne intéressée à faire travailler le code dans Microsoft Edge, n'utilisez pas les valeurs par défaut dans les paramètres de fonction.

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

Dans cet exemple, Edge générera une erreur "Expecting ')'"

Pour contourner cette utilisation

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

Depuis le 08 août 2016, ce problème persiste


4

Selon la syntaxe

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

vous pouvez définir la valeur par défaut des paramètres formels. et également vérifier la valeur indéfinie en utilisant la fonction typeof .


4
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!!!

4

Utilisez ceci si vous souhaitez utiliser la dernière ECMA6syntaxe:

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

Il est appelé default function parameters. Il permet aux paramètres formels d'être initialisés avec des valeurs par défaut si aucune valeur ou non définie n'est transmise. REMARQUE : il ne fonctionnera pas avec Internet Explorer ou les navigateurs plus anciens.

Pour une compatibilité maximale possible, utilisez ceci:

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

Les deux fonctions ont exactement le même comportement que chacun de ces exemples reposent sur le fait que la variable de paramètre sera undefinedsi aucune valeur de paramètre n'a été passée lors de l'appel de cette fonction.


REMARQUE: comme @BlackBeard le dit, la fonction (param = valeur) NE fonctionnera PAS avec IE. Utilisez la version compatible.
MagicLAMP

4

ES6: Comme déjà mentionné dans la plupart des réponses, dans ES6, vous pouvez simplement initialiser un paramètre avec une valeur.


ES5: La plupart des réponses données ne sont pas assez bon pour moi parce qu'il ya des occasions où je peux avoir à transmettre des valeurs de Falsey telles que 0, nullet undefinedà une fonction. Pour déterminer si un paramètre n'est pas défini car c'est la valeur que j'ai transmise au lieu de non défini car il n'a pas été défini du tout, je fais ceci:

function foo (param1, param2) {
   param1 = arguments.length >= 1 ? param1 : "default1";
   param2 = arguments.length >= 2 ? param2 : "default2";
}

3

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

Ici foo () est une fonction qui a un paramètre nommé argValue. Si nous ne passons rien dans l'appel de fonction ici, alors la fonction throwIfNoValue () sera appelée et le résultat retourné sera assigné au seul argument argValue. C'est ainsi qu'un appel de fonction peut être utilisé comme paramètre par défaut. Ce qui rend le code plus simple et plus lisible.

Cet exemple a été tiré d'ici


3

Si vous utilisez, ES6+vous pouvez définir les paramètres par défaut de la manière suivante:

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

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

Si vous avez besoin de ES5syntaxe, vous pouvez le faire de la manière suivante:

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

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

Dans la syntaxe ci-dessus, l' ORopérateur est utilisé. L' ORopérateur renvoie toujours la première valeur si elle peut être convertie truesinon, elle renvoie la valeur de droite. Lorsque la fonction est appelée sans argument correspondant, la variable de paramètre ( bardans notre exemple) est définie undefinedpar le moteur JS. undefinedEst ensuite converti en faux et l' ORopérateur renvoie donc la valeur 0.


3

Oui, l'utilisation des paramètres par défaut est entièrement prise en charge dans ES6 :

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

ou

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

mais avant dans ES5, vous pouviez facilement faire ceci:

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

Ce qui signifie que si la valeur est là, utilisez la valeur, sinon, utilisez la deuxième valeur après l' ||opération qui fait la même chose ...

Remarque: il y a également une grande différence entre ceux-ci si vous passez une valeur à ES6, même la valeur est fausse, qui sera remplacée par une nouvelle valeur, quelque chose comme nullou ""... mais ES5 un seul sera remplacé si seule la valeur transmise est vrai, c'est parce que la façon de ||travailler ...


2

Si, pour une raison quelconque, vous n'êtes pas sous ES6 et êtes utilisé lodashici est une manière concise par défaut des paramètres de fonction via la _.defaultTométhode:

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>

Qui définira la valeur par défaut si la valeur actuelle est NaN , nulle ou non définie


1

Sons du futur

À l'avenir, vous pourrez "propager" un objet à un autre (actuellement à partir de 2019 NON pris en charge par Edge !) - démonstration comment l'utiliser pour de belles options par défaut indépendamment de l'ordre:

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

Référence MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

... en attendant, ce que Edge DOES prend en charge est Object.assign () (IE ne le fait pas, mais j'espère vraiment que nous pourrons laisser IE derrière :))

De même, vous pourriez faire

    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: En raison des commentaires concernant les constoptions - le problème avec l'utilisation d'options constantes dans le reste de la fonction n'est pas que vous ne pouvez pas le faire, c'est simplement que vous ne pouvez pas utiliser la variable constante dans sa propre déclaration - vous auriez pour ajuster la dénomination d'entrée à quelque chose comme

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
}

Le problème est que vous ne voulez jamais le faire normalement car cela réattribuera des options qui sont déjà définies, mais vous pouvez l'utiliser avec une autre var qui serait légitime.
frank-dspeed

test de fonction (options) {/ * Options est défini, il générera une erreur si vous utilisez const options = {} maintenant * /}
frank-dspeed

non pas global lorsque vous créez une fonction et que vous passez en tant qu'options de nom d'argument puis à l'intérieur des options de fonction est défini à l'intérieur de la fonction (opt) {} opt est défini vous ne pouvez pas utiliser const opt ​​à l'intérieur de cette fonction alors c'est mauvais parce que vous le faites réattribution des variables si vous le faites souvent et que votre schéma général ressemble à ceci, c'est un problème
frank-dspeed

@ google-frank-dspeed ah, tu veux dire que tu ne peux pas faire function(opt){ const opt = /*some merging*/; }? Cela ne fonctionnera certainement pas parce que vous utiliseriez une constvariable avant qu'elle ne soit déclarée - vous devrez ajuster -function test(input_opt){ const opt = { someKey: 'someDefaultValue', ...input_opt} }
jave.web

@ google-frank-dspeed de toute façon, plus de nouvelles personnes se poseront probablement des questions à ce sujet, j'ai donc ajouté le code de procédure à modifier :) alors merci de le signaler aux autres :)
jave.web

1

Juste pour montrer mes compétences aussi (lol), la fonction ci-dessus peut être écrite même sans avoir d'arguments nommés comme ci-dessous:

ES5 et supérieur

function foo() {
    a = typeof arguments[0] !== 'undefined' ? a : 42;
    b = typeof arguments[1] !== 'undefined' ? b : 'default_b';
    ...
}

ES6 et supérieur

function foo(...rest) {
    a = typeof rest[0] !== 'undefined' ? a : 42;
    b = typeof rest[1] !== 'undefined' ? b : 'default_b';
    ...
}

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

Le code suivant peut fonctionner dans cette situation, y compris ECMAScript 6 (ES6) ainsi que les versions antérieures.

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

car la valeur par défaut dans les langues fonctionne lorsque la valeur du paramètre de la fonction est ignorée lors de l'appel, en JavaScript, elle est affectée à undefined . Cette approche ne semble pas attrayante sur le plan du programme mais présente une compatibilité descendante .


0

Oui, c'est ce qu'on appelle un paramètre par défaut

Les paramètres de fonction par défaut permettent aux paramètres formels d'être initialisés avec des valeurs par défaut si aucune valeur ou indéfinie n'est transmise.

Syntaxe:

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

La description:

Par défaut, les paramètres des fonctions ne sont pas définis. Cependant, dans certaines situations, il peut être utile de définir une valeur par défaut différente. C'est là que les paramètres par défaut peuvent aider.

Dans le passé, la stratégie générale de définition des valeurs par défaut consistait à tester les valeurs des paramètres dans le corps de la fonction et à attribuer une valeur si elles n'étaient pas définies. Si aucune valeur n'est fournie dans l'appel, sa valeur serait indéfinie. Vous devez définir une vérification conditionnelle pour vous assurer que le paramètre n'est pas indéfini

Avec les paramètres par défaut dans ES2015, la vérification dans le corps de la fonction n'est plus nécessaire. Maintenant, vous pouvez simplement mettre une valeur par défaut dans la tête de fonction.

Exemple des différences:

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

Différents exemples de syntaxe:

Remplissage indéfini par rapport aux autres valeurs de fausseté:

Même si la valeur est définie explicitement lors de l'appel, la valeur de l'argument num est celle par défaut.

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)

Évalué au moment de l'appel:

L'argument par défaut est évalué au moment de l'appel, donc contrairement à d'autres langages, un nouvel objet est créé à chaque appel de la fonction.

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

Les paramètres par défaut sont disponibles pour les paramètres par défaut ultérieurs:

Les paramètres déjà rencontrés sont disponibles pour les paramètres par défaut ultérieurs

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

Fonctions définies à l'intérieur du corps de fonction:

Introduit dans Gecko 33 (Firefox 33 / Thunderbird 33 / SeaMonkey 2.30). Les fonctions déclarées dans le corps de la fonction ne peuvent pas être référencées dans les paramètres par défaut et lèvent une ReferenceError (actuellement une TypeError dans SpiderMonkey, voir bug 1022967). Les paramètres par défaut sont toujours exécutés en premier, les déclarations de fonction à l'intérieur du corps de la fonction sont évaluées ensuite.

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

Paramètres sans valeurs par défaut après les paramètres par défaut:

Avant Gecko 26 (Firefox 26 / Thunderbird 26 / SeaMonkey 2.23 / Firefox OS 1.2), le code suivant entraînait une SyntaxError. Cela a été corrigé dans le bogue 777060 et fonctionne comme prévu dans les versions ultérieures. Les paramètres sont toujours définis de gauche à droite, remplaçant les paramètres par défaut même s'il existe des paramètres ultérieurs sans valeurs par défaut.

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

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

Paramètre déstructuré avec affectation de valeur par défaut:

Vous pouvez utiliser l'affectation de valeur par défaut avec la notation d'affectation destructurante

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

f(); // 6

0

Une approche différente pour définir les paramètres par défaut consiste à utiliser la table d'objets des arguments, au lieu des arguments directement. Par exemple,

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

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

De cette façon, il est facile d'étendre les arguments et de ne pas vous soucier de la différence de longueur d'argument.


-1

La réponse est oui. En fait, de nombreuses langues prennent en charge les paramètres par défaut. Python est l'un d'entre eux:

def(a, enter="Hello"):
   print(a+enter)

Même s'il s'agit de code Python 3 en raison des parenthèses, les paramètres par défaut dans les fonctions fonctionnent également dans JS.

Par exemple, et dans votre cas:

function read_file(file, deleteAfter=false){
  console.log(deleteAfter);
}

read_file("test.txt");

Mais parfois, vous n'avez pas vraiment besoin de paramètres par défaut.

Vous pouvez simplement définir la variable juste après le début de la fonction, comme ceci:

function read_file(file){
  var deleteAfter = false;
  console.log(deleteAfter);
}

read_file("test.txt");

Dans mes deux exemples, cela renvoie la même chose. Mais parfois, ils pourraient en fait être utiles, comme dans des projets très avancés.

Donc, en conclusion, les valeurs des paramètres par défaut peuvent être utilisées dans JS. Mais c'est presque la même chose que de définir une variable juste après le début de la fonction. Cependant, ils sont parfois encore très utiles. Comme vous l'avez peut-être remarqué, les valeurs de paramètre par défaut prennent 1 ligne de code en moins que la manière standard qui définit le paramètre juste après le démarrage de la fonction.

EDIT: Et c'est super important! Cela ne fonctionnera pas dans IE. Voir documentation . Donc, avec IE, vous devez utiliser la méthode "définir une variable en haut de la fonction". Les paramètres par défaut ne fonctionneront pas dans IE.


En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.