Définir une valeur de paramètre par défaut pour une fonction JavaScript
Je voudrais qu'une fonction JavaScript ait des arguments optionnels sur lesquels je définis une valeur par défaut, qui sont utilisés si la valeur n'est pas définie. En 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
}
À partir de ES6/ES2015, les paramètres par défaut sont spécifiés dans la 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 d'initialiser les paramètres formels avec les valeurs par défaut si no value ou undefined est passé.
Vous pouvez également simuler les 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
···
}
Pre ES2015,
Il y a beaucoup de façons, mais c'est ma méthode préférée - elle vous permet de transmettre tout ce que vous voulez, y compris false ou null. (typeof null == "object")
function foo(a, b) {
a = typeof a !== 'undefined' ? a : 42;
b = typeof b !== 'undefined' ? b : 'default_b';
...
}
function read_file(file, delete_after) {
delete_after = delete_after || "my default here";
//rest of code
}
Ceci attribue à delete_after la valeur de delete_after s'il ne s'agit pas d'une valeur falsey, sinon il attribue la chaîne "my default here". Pour plus de détails, consultez l'enquête sur la langue de Doug Crockford et consultez la section Opérateurs .
Cette approche ne fonctionne pas si vous souhaitez transmettre une valeur falsey, à savoir false, null, undefined, 0 ou "". Si vous souhaitez que les valeurs falsey soient transmises, vous devez utiliser la méthode dans Réponse de Tom Ritter .
Lorsque vous utilisez plusieurs paramètres dans une fonction, il est souvent utile de permettre au consommateur de transmettre les arguments de paramètre dans un objet, puis merge ces valeurs avec un objet contenant 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" });
Je trouve que quelque chose de simple comme celui-ci 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');
}
Dans ECMAScript 6, vous pourrez réellement écrire exactement ce que vous avez:
function read_file(file, delete_after = false) {
// Code
}
Ceci définira delete_after sur false s'il n'est pas présent ou undefined. Vous pouvez utiliser les fonctionnalités ES6 telles que celle-ci aujourd'hui avec des transpileurs tels que Babel .
Valeurs de paramètre par défaut
Avec ES6, vous pouvez peut-être faire l’un des expressions les plus courantes dans JavaScript concerne 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 nous paraître 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 est dangereux lorsque nous passons 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, et non le directement transmis à 0. Pour résoudre ce problème, certaines personnes écriront le contrôle de manière plus détaillée 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 syntaxe utile de Nice ajoutée à partir de ES6 pour simplifier l'affectation 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 = 11 dans une déclaration de fonction ressemble plus à x !== undefined ? x : 11 que l'idiome beaucoup plus commun x || 11
Expressions de valeur par défaut
Function Les valeurs par défaut peuvent être plus que de simples valeurs telles que 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 constater, 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 non défini.
Une expression de valeur par défaut peut même être un appel d'expression de fonction en ligne, couramment appelé expression de fonction immédiatement appelée (IIFE):
function foo( x =
(function(v){ return v + 11; })( 31 )
) {
console.log( x );
}
foo(); // 42
cette solution est un travail pour moi en js:
function read_file(file, delete_after) {
delete_after = delete_after || false;
// Code
}
Il suffit d’utiliser une comparaison explicite avec undefined.
function read_file(file, delete_after)
{
if(delete_after === undefined) { delete_after = false; }
}
en tant que développeur C++ de longue date (débutant au développement Web :)), lorsque je suis tombé sur cette situation pour la première fois, j'ai effectué l'assignation de paramètre dans la définition de la fonction, comme indiqué dans la question, comme suit.
function myfunc(a,b=10)
Mais attention, cela ne fonctionne pas de manière uniforme sur tous les navigateurs. Pour moi, cela fonctionnait sur le chrome sur mon ordinateur de bureau, mais pas sur le chrome sur Android . 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’affectation de paramètres dans la définition de la fonction peut fonctionner sur certains navigateurs, mais ne vous en fiez pas.
En tant que mise à jour ... avec ECMAScript 6, vous pouvez ENFIN définir les valeurs par défaut dans les déclarations de paramètres de fonction, comme suit:
function f (x, y = 7, z = 42) {
return x + y + z
}
f(1) === 50
Comme référencé par - http://es6-features.org/#DefaultParameterValues
Je recommanderais vivement une extrême prudence lors de l'utilisation des valeurs de paramètre par défaut en javascript. Il crée souvent des bogues lorsqu'il est utilisé en conjonction avec des fonctions d'ordre supérieur telles que forEach, map et reduce. Par exemple, considérons cette ligne de code:
['1', '2', '3'].map(parseInt); // [1, NaN, NaN]
parseInt a un deuxième paramètre facultatif function parseInt(s, [radix=10]) mais les appels de mappage parseInt avec trois arguments: (element, index et array).
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 obligatoires pour lesquels aucune valeur par défaut n'a de sens, définissez-les comme des paramètres de position dans 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érerais d’écrire votre fonction deleteFile comme ceci: (édité parinstead 's 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);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.
Si vous souhaitez que votre code fonctionne dans Microsoft Edge, n'utilisez pas les paramètres par défaut des paramètres de la fonction.
function read_file(file, delete_after = false) {
#code
}
Dans cet exemple, Edge émettra une erreur "En attente") ""
Pour contourner cet usage
function read_file(file, delete_after) {
if(delete_after == undefined)
{
delete_after = false;
}
#code
}
À partir du 08 août 2016, c'est toujours un problème
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 me suffisent pas, car il arrive parfois que je doive passer des valeurs de Falsey telles que 0, null et undefined à une fonction. Pour déterminer si un paramètre est indéfini parce que c'est la valeur que j'ai passée au lieu d'indéfini car je n'ai pas du tout été défini, procédez comme suit:
function foo (param1, param2) {
param1 = arguments.length >= 1 ? param1 : "default1";
param2 = arguments.length >= 2 ? param2 : "default2";
}
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!!!
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 non définie en utilisant typeof function.
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 transmettons rien dans l'appel de fonction ici, la fonction throwIfNoValue () sera appelée et le résultat renvoyé sera affecté au seul argument argValue. Voici comment un appel de fonction peut être utilisé comme paramètre par défaut. Ce qui rend le code plus simple et lisible.
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 parameterSi vous avez besoin de la syntaxe ES5, 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 parameterDans la syntaxe ci-dessus, l'opérateur OR est utilisé. L'opérateur OR renvoie toujours la première valeur si cela peut être converti en true sinon il retourne la valeur righthandside. Lorsque la fonction est appelée sans argument correspondant, la variable de paramètre (bar dans notre exemple) est définie sur undefined par le moteur JS. undefined Est ensuite converti en false et l'opérateur OR renvoie donc la valeur 0.
Si, pour une raison quelconque, vous êtes pas sur ES6 et que utilisez avec lodash , voici un moyen concis de définir les paramètres de fonction par défaut via _.defaultTo
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>Ce qui définira la valeur par défaut si la valeur actuelle est NaN, null ou undefined
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 pouvez facilement le faire:
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 existe également une grande différence entre ceux-ci si vous transmettez une valeur à ES6 même si la valeur est falsy, elle sera remplacée par une nouvelle valeur, quelque chose comme null ou ""... mais ES5 un seul sera remplacé si seule la valeur transmise est véridique, c’est parce que || fonctionne ...
def read_file(file, delete_after = false)
# code
end
Le code suivant peut fonctionner dans cette situation, y compris ECMAScript 6 (ES6) ainsi que des 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');comme 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 attribuée à non défini. Cette approche n’a pas l’air attrayant sur le plan des programmes, mais elle a compatibilité ascendante.
Une approche différente pour définir les paramètres par défaut consiste à utiliser directement une mappe d'objets de arguments, au lieu d'arguments. 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 sans se soucier de l'inadéquation de la longueur des arguments.
Oui, on parle de paramètre par défaut.
Les paramètres de fonction par défaut permettent d'initialiser des paramètres formels avec des valeurs par défaut si aucune valeur ou indéfini n'est transmise.
Syntaxe:
function [name]([param1[ = defaultValue1 ][, ..., paramN[ = defaultValueN ]]]) {
statements
}
La description:
Les paramètres des fonctions sont définis par défaut sur Non défini. Toutefois, dans certains cas, 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.
Auparavant, la stratégie générale pour définir les valeurs par défaut consistait à tester les valeurs des paramètres dans le corps de la fonction et à affecter 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 la fonction.
Exemple de 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:
Padding undefined vs 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. Ainsi, contrairement à d'autres langages, un nouvel objet est créé chaque fois que la fonction est appelée.
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 dans le corps de la 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 émettent une erreur ReferenceError (actuellement une erreur TypeError dans SpiderMonkey, voir le bogue 1022967). Les paramètres par défaut sont toujours d'abord exécutés, les déclarations de fonction à l'intérieur du corps de la fonction sont évaluées par la suite.
// 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 erreur de syntaxe. Ce problème 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 et écrasent les paramètres par défaut même s'il existe des paramètres ultérieurs sans paramètres par défaut.
function f(x = 1, y) {
return [x, y];
}
f(); // [1, undefined]
f(2); // [2, undefined]
Paramètre détruit avec attribution de valeur par défaut:
Vous pouvez utiliser l’affectation de valeur par défaut avec la notation d’affectation de déstructuration.
function f([x, y] = [1, 2], {z: z} = {z: 3}) {
return x + y + z;
}
f(); // 6