ES6函数参数默认值语法详解
本文详细介绍ES6中函数默认参数的语法与用法。通过对比ES5的手动检测方式,展示如何在函数头直接设置默认值。内容涵盖默认值在调用时求值的特性、避免共享可变状态,以及后续参数引用已定义参数的技巧,帮助开发者写出更简洁的代码。
ES6函数参数默认值语法详解
前言
在ES6标准下,若函数参数未传入值或显式传入undefined,允许通过默认参数语法为参数指定初始值。下文将展开具体说明。
语法
function [name]([param1[ = defaultValue1 ][, ..., paramN[ = defaultValueN ]]])
{
statements
}
描述
JavaScript中支持函数默认参数的定义。尽管并非所有场景都需要,但在特定情况下为参数设置不同的默认值往往十分有用。
在ES6之前,常见的做法是在函数体内检测参数是否为undefined,若是则手动赋值。例如在下面的例子中,若调用时未提供b的值,其值为undefined。此时计算a*b会返回NaN(非数字)。
function multiply(a, b) {
var b = (typeof b !== 'undefined') ? b : 1;
return a*b;
}
multiply(5); // 5
在ES6中,无需在函数体内进行额外检查,可直接在函数声明的头部设置默认值:
function multiply(a, b = 1) {
return a*b;
}
multiply(5); // 5
例子
通过未定义
在第二次函数调用中,即使第二个参数被显式设置为undefined(注意并非null),颜色参数仍会应用默认值。
function setBackgroundColor(element, color = 'rosybrown') {
element.style.backgroundColor = color;
}
setBackgroundColor(someDiv); // color set to 'rosybrown'
setBackgroundColor(someDiv, undefined); // color set to 'rosybrown' too
setBackgroundColor(someDiv, 'blue'); // color set to 'blue'
调用时求值
默认参数在函数调用时进行求值。因此,与Python不同,每次调用函数时都会创建一个新的对象,避免了共享可变状态的问题。
function append(value, array = []) {
array.push(value);
return array;
}
append(1); //[1]
append(2); //[2], not [1, 2]
甚至适用于函数和变量
function callSomething(thing = something()) { return thing }
function something(){
return "sth";
}
callSomething(); //sth
默认参数可以引用后续定义的默认参数。
已存在的参数也可以被后续的默认参数所引用:
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.")
总结
以上就是本文的全部内容,希望这些介绍能对您的学习或工作有所帮助。如有任何疑问,欢迎留言交流,感谢支持。
JavaScript闭包与类(Class)的区别及适用场景对比
2026-11-05 15:48:57
JavaScript入门要学ES6吗?let与箭头函数等新特性解析
2026-11-05 14:49:16
JavaScript 8种数据类型详解:基本类型与引用类型的区别
2026-11-05 14:25:15
怎么在JavaScript中使用async/await优化Ajax异步流程
2026-11-05 13:56:15
JavaScript replace回调函数实现动态正则替换逻辑
2026-11-05 13:52:13
