1. 简介
ES6 是 JavaScript 的下一个重要版本,它引入了许多新的语法特性,其中一个重要的特性是默认参数。默认参数是指当函数被调用时,如果参数没有被传递或者值为 undefined,那么默认值将被使用。
默认参数使用简单,但是要注意一些技巧,合理使用默认参数可以使代码更加优雅和易读。
2. 默认参数基础
在 ES6 之前,为了实现默认参数,我们通常会这样写代码:
function foo(x, y) { x = x || 0; y = y || 0; console.log(x, y); } foo(); // 0 0 foo(1, 2); // 1 2
这段代码中,我们使用了 || 运算符为每个参数设置了默认值。如果参数没有被传递或者值为 falsy,那么默认值将被使用。
在 ES6 中,我们可以直接在函数参数中定义默认值。例如:
function foo(x = 0, y = 0) { console.log(x, y); } foo(); // 0 0 foo(1, 2); // 1 2
这段代码与上面的代码实现的功能是一样的。
3. 默认参数的值计算
默认参数的值可以是任意的表达式,而且默认参数的值是在函数被调用时计算的,而不是在函数定义时。
例如,我们可以使用一个函数作为默认值:
-- -------------------- ---- ------- -------- ------------------- - ------ -------------------- -- -- - -------- ----- - ------------ ------------- - --- - - ------------ ------------- - --- - -------------- --- - ------ -- - -
这段代码中,我们定义了一个函数 getDefault,它返回 options.defaultValue 或者 0。然后在函数 foo 中使用 getDefault 函数作为默认值计算表达式,如果 getDefault 返回 undefined,那么默认值 0 将被使用。
4. 保留参数名
在函数参数中使用默认值时,我们可以使用参数名,例如:
function foo(x = 0, y = 0) { console.log(x, y); } foo(); // 0 0 foo(1); // 1 0 foo(1, 2) // 1 2
但是在某些情况下,我们需要保留参数名,例如:
function foo(x, y = 0) { console.log(x, y); } foo(1); // 1 0 foo(undefined, 2); // undefined 2
在这个例子中,只有 y 的默认值被定义了,x 没有默认值。如果我们想给 x 传递 undefined,那么我们必须通过 foo(undefined, 2) 的方式来明确指定 x 的值为 undefined,否则 x 的值将是默认值 0。
为了解决这个问题,我们可以使用占位符 _ 来保留参数名:
function foo(x, _ = 0) { console.log(x, _); } foo(1); // 1 0 foo(undefined, 2); // undefined 2
在这个例子中,我们为 y 使用了占位符 _,保留了参数名,同时定义了默认值。
5. 默认参数的使用指南
默认参数可以使代码更加简洁和易读,但是过度使用默认参数会导致代码难以理解和维护。因此,我们应该合理使用默认参数,遵循以下几个指南:
- 只有在某个参数经常被省略或为特定值时,我们才应该考虑使用默认参数。
- 默认参数的值应该尽量简单,避免过于复杂的表达式。
- 如果使用占位符 _, 应该确保它只被使用一次,否则会对代码的可读性产生负面影响。
6. 总结
默认参数是 ES6 中一个非常实用的特性,它可以简化函数的调用,并可以使代码更加易读和优雅。在使用默认参数时,我们应该注意一些技巧,遵循基本的使用指南,从而写出高质量的代码。
7. 示例代码
function createPerson(firstName, lastName, age = 18, gender = 'female') { console.log(`firstName=${firstName}, lastName=${lastName}, age=${age}, gender=${gender}`); } createPerson('张', '三'); // firstName=张, lastName=三, age=18, gender=female createPerson('李', '四', 20); // firstName=李, lastName=四, age=20, gender=female createPerson('王', '五', 30, 'male'); // firstName=王, lastName=五, age=30, gender=male
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/65b1fe10add4f0e0ffb2d53a