私は常に次のように JavaScript でオプションのパラメーターを処理してきました。
function myFunc(requiredArg, optionalArg){
optionalArg = optionalArg || 'defaultValue';
// Do stuff
}
それを行うより良い方法はありますか？
そのように使用||すると失敗する場合はありますか?
Mark Biek
質問する
459349 次
28 に答える
1096
optionalArg が渡された場合、ロジックは失敗しますが、false と評価されます - 代替としてこれを試してください
if (typeof optionalArg === 'undefined') { optionalArg = 'default'; }
または別のイディオム:
optionalArg = (typeof optionalArg === 'undefined') ? 'default' : optionalArg;
意図を最もよく伝えるイディオムを使用してください。
于 2008-09-29T14:30:34.013 に答える
180
ECMAScript 2015（別名「ES6」）では、関数宣言でデフォルトの引数値を宣言できます。
function myFunc(requiredArg, optionalArg = 'defaultValue') {
// do stuff
}
MDNに関するこの記事でそれらについて詳しく説明します。
これは現在Firefoxでのみサポートされていますが、標準が完成したため、サポートが急速に向上することを期待してください。
編集（2019-06-12）：
現在、デフォルトのパラメータは最新のブラウザで広くサポートされています。Internet Explorer
のすべてのバージョンは、この機能をサポートしていません。ただし、Chrome、Firefox、およびEdgeは現在それをサポートしています。
于 2013-02-19T13:13:54.843 に答える
127
これが最も簡単で読みやすい方法だと思います。
if (typeof myVariable === 'undefined') { myVariable = 'default'; }
//use myVariable here
ポール・ディクソンの答え (私の謙虚な意見では) はこれより読みにくいですが、それは好みの問題です。
insin の答えははるかに高度ですが、大きな関数にははるかに便利です!
EDIT 11/17/2013 9:33pm: parametricと呼ばれる関数 (メソッド) の「オーバーロード」を容易にする Node.js 用のパッケージを作成しました。
于 2011-11-14T21:23:59.627 に答える
45
リテラルを入れる必要がある場合NULLは、いくつかの問題が発生する可能性があります。それとは別に、いいえ、あなたはおそらく正しい方向に進んでいると思います。
一部の人々が選択するもう1つの方法は、引数リストを反復処理する変数の連想配列を取得することです。少しきれいに見えますが、プロセス/メモリの負荷が少し（ごくわずか）多いと思います。
function myFunction (argArray) {
var defaults = {
'arg1' : "value 1",
'arg2' : "value 2",
'arg3' : "value 3",
'arg4' : "value 4"
}
for(var i in defaults)
if(typeof argArray[i] == "undefined")
argArray[i] = defaults[i];
// ...
}
于 2008-09-29T14:34:33.300 に答える
33
理想的には、オブジェクトを渡すようにリファクタリングし、それをデフォルトのオブジェクトとマージするので、引数が渡される順序は重要ではありません (以下のこの回答の 2 番目のセクションを参照してください)。
ただし、高速で信頼性が高く、使いやすく、かさばらないものが必要な場合は、これを試してください。
任意の数のデフォルト引数に対するクリーンで迅速な修正
- エレガントにスケーリング: 新しいデフォルトごとに最小限の追加コード
- どこにでも貼り付けることができます。必要な引数と変数の数を変更するだけです
- デフォルト値で引数に渡したい場合
undefined、このように、変数は として設定されundefinedます。このページの他のほとんどのオプションはundefined、デフォルト値に置き換えられます。
3 つのオプション引数 (2 つの必須引数) にデフォルトを提供する例を次に示します。
function myFunc( requiredA, requiredB, optionalA, optionalB, optionalC ) {
switch (arguments.length - 2) { // 2 is the number of required arguments
case 0: optionalA = 'Some default';
case 1: optionalB = 'Another default';
case 2: optionalC = 'Some other default';
// no breaks between cases: each case implies the next cases are also needed
}
}
簡単なデモ。これはroenving の answerに似ていますが、任意の数のデフォルト引数に対して簡単に拡張でき、更新も簡単で、 notを使用しargumentsFunction.argumentsます。
柔軟性を高めるためのオブジェクトの受け渡しとマージ
optionalC上記のコードは、デフォルト引数を行う多くの方法と同様に、引数を順不同で渡すことはできませんoptionalB。
そのための適切なオプションは、オブジェクトを渡してデフォルト オブジェクトとマージすることです。これは保守性にも優れています (コードを読みやすく保つように注意してください。そうすれば、将来の共同作業者は、渡されるオブジェクトの可能な内容について推測したままになることはありません)。
jQueryを使った例。jQuery を使用しない場合は、代わりにアンダースコアを使用する_.defaults(object, defaults)か、これらのオプションを参照できます。
function myFunc( args ) {
var defaults = {
optionalA: 'Some default',
optionalB: 'Another default',
optionalC: 'Some other default'
};
args = $.extend({}, defaults, args);
}
実際の動作の簡単な例を次に示します。
于 2012-02-20T15:36:26.000 に答える
19
そのために、いくつかの異なるスキームを使用できます。私は常にarguments.lengthをテストしてきました：
function myFunc(requiredArg, optionalArg){
optionalArg = myFunc.arguments.length<2 ? 'defaultValue' : optionalArg;
...
-- そうすることで、失敗する可能性はありませんが、あなたの方法が失敗する可能性があるかどうかはわかりません。今のところ、実際に失敗するシナリオを考え出すことはできません...
そして、Paul は 1 つの失敗シナリオを提供しました!-)
于 2008-09-29T14:33:31.447 に答える
13
Oli の回答と同様に、引数 Object とデフォルト値を定義する Object を使用します。ほんの少しの砂糖で...
/**
* Updates an object's properties with other objects' properties. All
* additional non-falsy arguments will have their properties copied to the
* destination object, in the order given.
*/
function extend(dest) {
for (var i = 1, l = arguments.length; i < l; i++) {
var src = arguments[i]
if (!src) {
continue
}
for (var property in src) {
if (src.hasOwnProperty(property)) {
dest[property] = src[property]
}
}
}
return dest
}
/**
* Inherit another function's prototype without invoking the function.
*/
function inherits(child, parent) {
var F = function() {}
F.prototype = parent.prototype
child.prototype = new F()
child.prototype.constructor = child
return child
}
...これはもう少し良くすることができます。
function Field(kwargs) {
kwargs = extend({
required: true, widget: null, label: null, initial: null,
helpText: null, errorMessages: null
}, kwargs)
this.required = kwargs.required
this.label = kwargs.label
this.initial = kwargs.initial
// ...and so on...
}
function CharField(kwargs) {
kwargs = extend({
maxLength: null, minLength: null
}, kwargs)
this.maxLength = kwargs.maxLength
this.minLength = kwargs.minLength
Field.call(this, kwargs)
}
inherits(CharField, Field)
この方法の何がいいの？
- 好きなだけ引数を省略できます - 1 つの引数の値のみをオーバーライドしたい場合は、
undefined5 つの引数があり、最後の引数のみをカスタマイズしたい場合など、いつ明示的に渡す必要はなく、その引数を指定するだけで済みます。 1つは、提案された他の方法のいくつかと関係があるためです。 - 別のオブジェクトから継承するオブジェクトのコンストラクター関数を使用する場合、継承元のオブジェクトのコンストラクターが必要とする引数を簡単に受け入れることができます。コンストラクター シグネチャでそれらの引数に名前を付ける必要がないためです。または、独自のデフォルトを提供することもできます (上で見たように、のコンストラクターを
CharField呼び出すときに、親 Object のコンストラクターにそれを行わせますField)。 - 継承階層の子オブジェクトは、親コンストラクターの引数を適切にカスタマイズして、独自の既定値を強制したり、特定の値が常に使用されるようにしたりできます。
于 2008-09-29T23:16:54.823 に答える
9
緩い型チェック
書きやすいのですが0、''、false、 、がデフォルト値に変換されてnullしまいundefined、期待通りの結果にならない場合があります。
function myFunc(requiredArg, optionalArg) {
optionalArg = optionalArg || 'defaultValue';
}
厳密な型チェック
長くなりますが、ほとんどの場合をカバーします。デフォルト値が誤って割り当てられる唯一のケースはundefined、パラメーターとして渡す場合です。
function myFunc(requiredArg, optionalArg) {
optionalArg = typeof optionalArg !== 'undefined' ? optionalArg : 'defaultValue';
}
引数変数のチェック
すべてのケースをキャッチしますが、書くのが最も不器用です。
function myFunc(requiredArg, optionalArg1, optionalArg2) {
optionalArg1 = arguments.length > 1 ? optionalArg1 : 'defaultValue';
optionalArg2 = arguments.length > 2 ? optionalArg2 : 'defaultValue';
}
ES6
残念ながら、現時点ではブラウザのサポートが非常に貧弱です
function myFunc(requiredArg, optionalArg = 'defaultValue') {
}
于 2015-05-15T13:46:57.200 に答える
8
デフォルトを広範囲に使用している場合、これははるかに読みやすいようです。
function usageExemple(a,b,c,d){
//defaults
a=defaultValue(a,1);
b=defaultValue(b,2);
c=defaultValue(c,4);
d=defaultValue(d,8);
var x = a+b+c+d;
return x;
}
この関数をグローバル escope で宣言するだけです。
function defaultValue(variable,defaultValue){
return(typeof variable!=='undefined')?(variable):(defaultValue);
}
使用パターンfruit = defaultValue(fruit,'Apple');
* PS 関数の名前を短い名前に変更できますが、javascript の予約語としてdefaultValue使用しないでください。default
于 2012-05-15T21:23:50.220 に答える
6
ES2015/ES6 を使用すると、Object.assignどちらを交換$.extend()または使用できるかを利用できます。_.defaults()
function myFunc(requiredArg, options = {}) {
const defaults = {
message: 'Hello',
color: 'red',
importance: 1
};
const settings = Object.assign({}, defaults, options);
// do stuff
}
このようなデフォルト引数を使用することもできます
function myFunc(requiredArg, { message: 'Hello', color: 'red', importance: 1 } = {}) {
// do stuff
}
于 2016-02-01T11:09:53.710 に答える
3
Underscoreライブラリを使用している場合(使用する必要があります。すばらしいライブラリです):
_.defaults(optionalArg, 'defaultValue');
于 2014-09-22T23:59:46.110 に答える
2
ここに記載されているいくつかのオプションを試し、パフォーマンスをテストしました。現時点では、logicalor が最速のようです。これは時間の経過とともに変更される可能性がありますが (JavaScript エンジンのバージョンが異なります)。
これらは私の結果です (Microsoft Edge 20.10240.16384.0):
Function executed Operations/sec Statistics
TypeofFunction('test'); 92,169,505 ±1.55% 9% slower
SwitchFuntion('test'); 2,904,685 ±2.91% 97% slower
ObjectFunction({param1: 'test'}); 924,753 ±1.71% 99% slower
LogicalOrFunction('test'); 101,205,173 ±0.92% fastest
TypeofFunction2('test'); 35,636,836 ±0.59% 65% slower
このパフォーマンス テストは、http: //jsperf.com/optional-parameters-typeof-vs-switch/2で簡単に再現できます。
これはテストのコードです：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
Benchmark.prototype.setup = function() {
function TypeofFunction(param1, optParam1, optParam2, optParam3) {
optParam1 = (typeof optParam1 === "undefined") ? "Some default" : optParam1;
optParam2 = (typeof optParam2 === "undefined") ? "Another default" : optParam2;
optParam3 = (typeof optParam3 === "undefined") ? "Some other default" : optParam3;
}
function TypeofFunction2(param1, optParam1, optParam2, optParam3) {
optParam1 = defaultValue(optParam1, "Some default");
optParam2 = defaultValue(optParam2, "Another default");
optParam3 = defaultValue(optParam3, "Some other default");
}
function defaultValue(variable, defaultValue) {
return (typeof variable !== 'undefined') ? (variable) : (defaultValue);
}
function SwitchFuntion(param1, optParam1, optParam2, optParam3) {
switch (arguments.length - 1) { // <-- 1 is number of required arguments
case 0:
optParam1 = 'Some default';
case 1:
optParam2 = 'Another default';
case 2:
optParam3 = 'Some other default';
}
}
function ObjectFunction(args) {
var defaults = {
optParam1: 'Some default',
optParam2: 'Another default',
optParam3: 'Some other default'
}
args = $.extend({}, defaults, args);
}
function LogicalOrFunction(param1, optParam1, optParam2, optParam3) {
optParam1 || (optParam1 = 'Some default');
optParam2 || (optParam1 = 'Another default');
optParam3 || (optParam1 = 'Some other default');
}
};
</script>
于 2014-06-19T11:25:54.337 に答える
2
プロジェクト中に、オプションのパラメーターと設定を繰り返しすぎていることに気づいたので、型チェックを処理してデフォルト値を割り当てるクラスを作成しました。これにより、きれいで読みやすいコードが得られます。例を見て、これがうまくいくかどうか教えてください。
var myCar = new Car('VW', {gearbox:'automatic', options:['radio', 'airbags 2x']});
var myOtherCar = new Car('Toyota');
function Car(brand, settings) {
this.brand = brand;
// readable and adjustable code
settings = DefaultValue.object(settings, {});
this.wheels = DefaultValue.number(settings.wheels, 4);
this.hasBreaks = DefaultValue.bool(settings.hasBreaks, true);
this.gearbox = DefaultValue.string(settings.gearbox, 'manual');
this.options = DefaultValue.array(settings.options, []);
// instead of doing this the hard way
settings = settings || {};
this.wheels = (!isNaN(settings.wheels)) ? settings.wheels : 4;
this.hasBreaks = (typeof settings.hasBreaks !== 'undefined') ? (settings.hasBreaks === true) : true;
this.gearbox = (typeof settings.gearbox === 'string') ? settings.gearbox : 'manual';
this.options = (typeof settings.options !== 'undefined' && Array.isArray(settings.options)) ? settings.options : [];
}
このクラスの使用:
(function(ns) {
var DefaultValue = {
object: function(input, defaultValue) {
if (typeof defaultValue !== 'object') throw new Error('invalid defaultValue type');
return (typeof input !== 'undefined') ? input : defaultValue;
},
bool: function(input, defaultValue) {
if (typeof defaultValue !== 'boolean') throw new Error('invalid defaultValue type');
return (typeof input !== 'undefined') ? (input === true) : defaultValue;
},
number: function(input, defaultValue) {
if (isNaN(defaultValue)) throw new Error('invalid defaultValue type');
return (typeof input !== 'undefined' && !isNaN(input)) ? parseFloat(input) : defaultValue;
},
// wrap the input in an array if it is not undefined and not an array, for your convenience
array: function(input, defaultValue) {
if (typeof defaultValue === 'undefined') throw new Error('invalid defaultValue type');
return (typeof input !== 'undefined') ? (Array.isArray(input) ? input : [input]) : defaultValue;
},
string: function(input, defaultValue) {
if (typeof defaultValue !== 'string') throw new Error('invalid defaultValue type');
return (typeof input === 'string') ? input : defaultValue;
},
};
ns.DefaultValue = DefaultValue;
}(this));
于 2016-03-23T10:52:48.300 に答える
2
この質問にたどり着き、 EcmaScript 2015 でデフォルトのパラメーターを検索したため、言及しただけです...
ES6 では、デフォルト パラメータを実行できます。
function doSomething(optionalParam = "defaultValue"){
console.log(optionalParam);//not required to check for falsy values
}
doSomething(); //"defaultValue"
doSomething("myvalue"); //"myvalue"
于 2015-10-09T14:19:21.863 に答える
2
user568458 が指摘したように、null または false が渡された場合、提供されたソリューションは失敗するため、未定義のテストは不要であり、可能な限り堅牢ではありません。API のユーザーは、false または null によってメソッドがそのパラメーターを回避するよう強制されると考えるかもしれません。
function PaulDixonSolution(required, optionalArg){
optionalArg = (typeof optionalArg === "undefined") ? "defaultValue" : optionalArg;
console.log(optionalArg);
};
PaulDixonSolution("required");
PaulDixonSolution("required", "provided");
PaulDixonSolution("required", null);
PaulDixonSolution("required", false);
結果は次のとおりです。
defaultValue
provided
null
false
これらの最後の2つは潜在的に悪いです。代わりに試してください：
function bulletproof(required, optionalArg){
optionalArg = optionalArg ? optionalArg : "defaultValue";;
console.log(optionalArg);
};
bulletproof("required");
bulletproof("required", "provided");
bulletproof("required", null);
bulletproof("required", false);
結果は次のとおりです。
defaultValue
provided
defaultValue
defaultValue
これが最適ではない唯一のシナリオは、ブール値または意図的な null を意図したオプションのパラメーターが実際にある場合です。
于 2013-09-27T05:15:30.203 に答える
1
これは私が最終的に得たものです：
function WhoLikesCake(options) {
options = options || {};
var defaultOptions = {
a : options.a || "Huh?",
b : options.b || "I don't like cake."
}
console.log('a: ' + defaultOptions.b + ' - b: ' + defaultOptions.b);
// Do more stuff here ...
}
このように呼び出されます：
WhoLikesCake({ b : "I do" });
于 2013-11-29T21:04:58.937 に答える
1
これが私の解決策です。これにより、任意のパラメーターを残すことができます。オプションのパラメーターの順序は重要ではなく、カスタム検証を追加できます。
function YourFunction(optionalArguments) {
//var scope = this;
//set the defaults
var _value1 = 'defaultValue1';
var _value2 = 'defaultValue2';
var _value3 = null;
var _value4 = false;
//check the optional arguments if they are set to override defaults...
if (typeof optionalArguments !== 'undefined') {
if (typeof optionalArguments.param1 !== 'undefined')
_value1 = optionalArguments.param1;
if (typeof optionalArguments.param2 !== 'undefined')
_value2 = optionalArguments.param2;
if (typeof optionalArguments.param3 !== 'undefined')
_value3 = optionalArguments.param3;
if (typeof optionalArguments.param4 !== 'undefined')
//use custom parameter validation if needed, in this case for javascript boolean
_value4 = (optionalArguments.param4 === true || optionalArguments.param4 === 'true');
}
console.log('value summary of function call:');
console.log('value1: ' + _value1);
console.log('value2: ' + _value2);
console.log('value3: ' + _value3);
console.log('value4: ' + _value4);
console.log('');
}
//call your function in any way you want. You can leave parameters. Order is not important. Here some examples:
YourFunction({
param1: 'yourGivenValue1',
param2: 'yourGivenValue2',
param3: 'yourGivenValue3',
param4: true,
});
//order is not important
YourFunction({
param4: false,
param1: 'yourGivenValue1',
param2: 'yourGivenValue2',
});
//uses all default values
YourFunction();
//keeps value4 false, because not a valid value is given
YourFunction({
param4: 'not a valid bool'
});
于 2016-04-11T13:51:11.817 に答える
1
皆さん -
これらのソリューションやその他のソリューションを調べた後、元は W3Schools のコード スニペットをベースとして使用して、いくつかのソリューションを試しました。以下で何が機能するかを見つけることができます。コメントアウトされた各項目も同様に機能し、個々のコメントを削除するだけで簡単に試すことができます。明確にするために、定義されていないのは「目の色」パラメーターです。
function person(firstname, lastname, age, eyecolor)
{
this.firstname = firstname;
this.lastname = lastname;
this.age = age;
this.eyecolor = eyecolor;
// if(null==eyecolor)
// this.eyecolor = "unknown1";
//if(typeof(eyecolor)==='undefined')
// this.eyecolor = "unknown2";
// if(!eyecolor)
// this.eyecolor = "unknown3";
this.eyecolor = this.eyecolor || "unknown4";
}
var myFather = new person("John", "Doe", 60);
var myMother = new person("Sally", "Rally", 48, "green");
var elem = document.getElementById("demo");
elem.innerHTML = "My father " +
myFather.firstname + " " +
myFather.lastname + " is " +
myFather.age + " with " +
myFather.eyecolor + " eyes.<br/>" +
"My mother " +
myMother.firstname + " " +
myMother.lastname + " is " +
myMother.age + " with " +
myMother.eyecolor + " eyes.";
于 2014-04-13T20:53:23.117 に答える
0
私が間違っている場合は私を訂正してください、しかしこれは最も簡単な方法のようです（とにかく、1つの引数のために）：
function myFunction(Required,Optional)
{
if (arguments.length<2) Optional = "Default";
//Your code
}
于 2013-02-21T02:03:10.320 に答える
0
これらは typeof オペレーターのバージョンよりも短いです。
function foo(a, b) {
a !== undefined || (a = 'defaultA');
if(b === undefined) b = 'defaultB';
...
}
于 2013-11-07T18:05:53.480 に答える
-1
デフォルトを使用することを決定する前に、提供された引数のすべての偽のタイプを処理する最も安全な方法は、呼び出された関数でオプションの引数の存在\存在を確認することです。
宣言されている可能性があるという事実に関係なく、引数が欠落している場合でも作成されない引数オブジェクトメンバーの作成に依存して、次のように関数を記述できます。
function myFunc(requiredArg, optionalArg){
optionalArg = 1 in arguments ? optionalArg : 'defaultValue';
//do stuff
}
この動作を利用する: 関数がそのプロシージャで必要な特定の値を取得することを確認する必要があるときはいつでも、引数リストの欠損値を任意かつ明示的に安全にチェックできます。
次のデモ コードでは、0 false などの偽の引数値で失敗する可能性があるかどうか、または期待どおりに動作するかどうかを判断できるように、意図的に型なしおよび値なしの undefined をデフォルト値として配置します。
function argCheck( arg1, arg2, arg3 ){
arg1 = 0 in arguments || undefined;
arg2 = 1 in arguments || false;
arg3 = 2 in arguments || 0;
var arg4 = 3 in arguments || null;
console.log( arg1, arg2, arg3, arg4 )
}
ここで、いくつかの偽の引数値をチェックして、それらの存在が正しく検出され、trueと評価されるかどうかを確認します。
argCheck( "", 0, false, null );
>> true true true true
つまり、期待される引数値の認識に失敗しなかったということです。ここでは、すべての引数が欠落しているチェックがあります。アルゴリズムによれば、それらがfalsyであってもデフォルト値を取得する必要があります。
argCheck( );
>> undefined false 0 null
ご覧のとおり、引数arg1、arg2、arg3、および宣言されていないarg4は、順序どおりに正確なデフォルト値を返しています。これで機能することが確認できたので、最初の例のようにifまたは3 項条件を使用して実際にそれらを使用できる関数を書き直すことができます。
複数のオプションの引数を持つ関数では、ループスルーにより、少し節約できたかもしれません。しかし、値が指定されていない場合、引数名は初期化されないため、プログラムでデフォルト値を記述したとしても、名前でアクセスすることはできなくなり、 arguments[index]によってのみアクセスできます。
しかし、特定のコーディング状況では完全に受け入れられるかもしれないこの不便さは別として、複数の任意の数の引数のデフォルトについて、別の説明されていない問題があります。次のような構文で、値を指定せずに以前はできたかもしれないように、引数をスキップできなくなったため、これはバグと見なす必要があります。
argCheck("a",,22,{});
投げるから！これにより、引数を目的のデフォルト値の特定の偽の型に置き換えることができなくなります。引数オブジェクトは配列のようなオブジェクトであり、ネイティブまたはデフォルトでこの構文と規則をそのままサポートすることが期待されているため、これはばかげています!
この近視眼的な決定のために、次のような関数を書くことはもはや望めません:
function argCheck( ) {
var _default = [undefined, 0, false, null ],
_arg = arguments;
for( var x in _default ) {
x in _arg ? 1 : _arg[x] = _default[x];
}
console.log( _arg[0],_arg[1],_arg[2],_arg[3] );
}
その場合、目的の型の各デフォルト値を引数行に書き込み、少なくとも args.index によってそれらにアクセスできるようになります。
たとえば、この関数呼び出しは次のようになります。
argCheck();
>>undefined 0 false null
引数値のデフォルト配列で定義されているとおりです。ただし、次のことは引き続き可能です。
argCheck({})
>>Object { } 0 false null
argCheck({}, [])
>>Object { } Array [ ] false null
しかし、残念ながらそうではありません:
argCheck("a",,,22);
>>SyntaxError: expected expression, got ','
そうでなければログに記録されます：
>>a 0 false 22
しかし、それはより良い世界です！ただし、元の質問については、一番上の関数で問題ありません。例えば：
function argCheck( arg, opt ) {
1 in arguments ? 1 : opt = "default";
console.log( arg, opt );
}
ps:書き込み中に、引数の入力で選択したデフォルトの型を保持しないことをお詫びします。
于 2016-10-29T03:44:18.487 に答える
-2
function foo(requiredArg){
if(arguments.length>1) var optionalArg = arguments[1];
}
于 2014-04-09T02:03:42.667 に答える