ES6 的默认参数使用技巧

阅读时长 4 分钟读完

1. 简介

ES6 是 JavaScript 的下一个重要版本,它引入了许多新的语法特性,其中一个重要的特性是默认参数。默认参数是指当函数被调用时,如果参数没有被传递或者值为 undefined,那么默认值将被使用。

默认参数使用简单,但是要注意一些技巧,合理使用默认参数可以使代码更加优雅和易读。

2. 默认参数基础

在 ES6 之前,为了实现默认参数,我们通常会这样写代码:

这段代码中,我们使用了 || 运算符为每个参数设置了默认值。如果参数没有被传递或者值为 falsy,那么默认值将被使用。

在 ES6 中,我们可以直接在函数参数中定义默认值。例如:

这段代码与上面的代码实现的功能是一样的。

3. 默认参数的值计算

默认参数的值可以是任意的表达式,而且默认参数的值是在函数被调用时计算的,而不是在函数定义时。

例如,我们可以使用一个函数作为默认值:

-- -------------------- ---- -------
-------- ------------------- -
  ------ -------------------- -- --
-

-------- ----- - ------------ ------------- - --- - - ------------ ------------- - --- -
  -------------- ---
-

------ -- - -

这段代码中,我们定义了一个函数 getDefault,它返回 options.defaultValue 或者 0。然后在函数 foo 中使用 getDefault 函数作为默认值计算表达式,如果 getDefault 返回 undefined,那么默认值 0 将被使用。

4. 保留参数名

在函数参数中使用默认值时,我们可以使用参数名,例如:

但是在某些情况下,我们需要保留参数名,例如:

在这个例子中,只有 y 的默认值被定义了,x 没有默认值。如果我们想给 x 传递 undefined,那么我们必须通过 foo(undefined, 2) 的方式来明确指定 x 的值为 undefined,否则 x 的值将是默认值 0。

为了解决这个问题,我们可以使用占位符 _ 来保留参数名:

在这个例子中,我们为 y 使用了占位符 _,保留了参数名,同时定义了默认值。

5. 默认参数的使用指南

默认参数可以使代码更加简洁和易读,但是过度使用默认参数会导致代码难以理解和维护。因此,我们应该合理使用默认参数,遵循以下几个指南:

  • 只有在某个参数经常被省略或为特定值时,我们才应该考虑使用默认参数。
  • 默认参数的值应该尽量简单,避免过于复杂的表达式。
  • 如果使用占位符 _, 应该确保它只被使用一次,否则会对代码的可读性产生负面影响。

6. 总结

默认参数是 ES6 中一个非常实用的特性,它可以简化函数的调用,并可以使代码更加易读和优雅。在使用默认参数时,我们应该注意一些技巧,遵循基本的使用指南,从而写出高质量的代码。

7. 示例代码

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/65b1fe10add4f0e0ffb2d53a

纠错
反馈