我一直在处理JavaScript中的可选参数，如下所示：
function myFunc(requiredArg, optionalArg){
optionalArg = optionalArg || 'defaultValue';
// Do stuff
}
有更好的方法吗？
这样使用||会失败吗？
当前回答
与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)
这种方法有什么好处？
您可以根据需要省略任意多个参数-如果您只想重写一个参数的值，则可以只提供该参数，而不必显式传递undefined。例如，如果有5个参数，并且您只想自定义最后一个参数，则必须使用其他建议的方法。当为从另一个继承的对象使用构造函数Function时，很容易接受所继承对象的构造函数所需的任何参数，因为您不必在构造函数签名中命名这些参数，或者甚至提供自己的默认值（让父对象的构造函数为您实现，正如上面CharField调用Field的构造函数时所看到的那样）。继承层次结构中的子对象可以根据需要为其父构造函数自定义参数，强制使用自己的默认值或确保始终使用某个值。
其他回答
我不知道为什么@Paul的回复被否决，但对null的验证是一个不错的选择。也许一个更肯定的例子会更有意义：
在JavaScript中，缺少的参数就像未初始化的声明变量（仅vara1；）。相等运算符将undefined转换为null，因此这对于值类型和对象都非常有效，这就是CoffeeScript处理可选参数的方式。
function overLoad(p1){
alert(p1 == null); // Caution, don't use the strict comparison: === won't work.
alert(typeof p1 === 'undefined');
}
overLoad(); // true, true
overLoad(undefined); // true, true. Yes, undefined is treated as null for equality operator.
overLoad(10); // false, false
function overLoad(p1){
if (p1 == null) p1 = 'default value goes here...';
//...
}
不过，有人担心，最好的语义是typeof variable==“undefined”稍微好一点。我不会为这一点辩护，因为这是底层API如何实现函数的问题；它不应该引起API用户的兴趣。
我还应该补充一点，这是物理上确保遗漏任何参数的唯一方法，使用in运算符，不幸的是，它无法处理参数名称，因此必须传递参数索引。
function foo(a, b) {
// Both a and b will evaluate to undefined when used in an expression
alert(a); // undefined
alert(b); // undefined
alert("0" in arguments); // true
alert("1" in arguments); // false
}
foo (undefined);
如果传递了optionalArg，但计算结果为false，则逻辑将失败-请尝试此选项
if (typeof optionalArg === 'undefined') { optionalArg = 'default'; }
或者另一个成语：
optionalArg = (typeof optionalArg === 'undefined') ? 'default' : optionalArg;
使用哪种成语最能传达你的意图！
与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)
这种方法有什么好处？
您可以根据需要省略任意多个参数-如果您只想重写一个参数的值，则可以只提供该参数，而不必显式传递undefined。例如，如果有5个参数，并且您只想自定义最后一个参数，则必须使用其他建议的方法。当为从另一个继承的对象使用构造函数Function时，很容易接受所继承对象的构造函数所需的任何参数，因为您不必在构造函数签名中命名这些参数，或者甚至提供自己的默认值（让父对象的构造函数为您实现，正如上面CharField调用Field的构造函数时所看到的那样）。继承层次结构中的子对象可以根据需要为其父构造函数自定义参数，强制使用自己的默认值或确保始终使用某个值。
我尝试了这里提到的一些选项，并对它们进行了性能测试。此时此刻，逻辑学家似乎是最快的。尽管这会随着时间的推移而改变（不同的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>
对undefined的测试是不必要的，也不像可能的那样健壮，因为正如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
最后两个可能很糟糕。相反，请尝试：
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
唯一一个不理想的情况是，当您实际拥有布尔值或故意为空的可选参数时。
推荐文章
- 如何删除和清除所有的本地存储数据
- 如何从给定的html字符串中删除前导和尾随空白?
- 如何为KnockoutJS调试模板绑定错误?
- 将一个二进制的NodeJS Buffer转换为JavaScript的ArrayBuffer
- 检测浏览器标签是否有焦点
- JavaScript在数组中
- 如何从JavaScript中使用正则表达式的字符串中剥离所有标点符号?
- 如何修改标签文本?
- 如何获得十六进制颜色值而不是RGB值?
- 字符串strip() JavaScript?
- 如何将一个标题转换为jQuery的URL段塞?
- 获取对象的第一个索引
- 我如何用javascript编程点击链接?
- JavaScript:客户端验证与服务器端验证
- React钩子:从回调中访问最新状态
