JavaScript(ES6/ES7)中的 函数默认参数(Function Default Parameters)用法详解

· 约 5 分钟读完

函数默认参数是JavaScript新增语法中的一种,它可以使得函数在调用时不传任何参数时,可以给函数参数设置默认值。在日常的开发中,有时候我们需要对函数的参数进行默认值(如函数库里对函数的兼容处理),以便于开发者更方便地使用函数。接下来我们将详细探讨JavaScript(ES6/ES7)中的函数默认参数用法。

基本用法

当函数参数没有传入任何值时,函数参数会自动默认为undefined值。在使用函数的默认参数之前,我们先来看一下传统的默认参数用法:

在这个函数内部,我们使用逻辑或(||)运算符来判断参数是否传递并且给它赋默认值。虽然这种方式在实际开发中是可以使用的,但是它存在许多问题:

  1. 当传入一个0或者NaN,会被认为是没有传入参数,而使用默认值。
  2. 当传入空字符串或被认为是false的值时,也会使用默认值。

因此,在使用函数的默认参数之前,我们建议使用ES6/ES7中的函数默认参数,这样不仅代码更加简洁,也不易出问题。

不过在使用函数默认参数时,需要特别注意一点:只有默认值后面的参数才可以使用默认值,即不传入参数时默认值会从左往右依次赋值。

如果我们只传入一个参数,则使用默认值的时候undefined值会被赋成默认值,因此函数内部的计算会出错:

在实际开发中,我们可以使用函数默认值帮助我们更快更安全地编写代码。如下述例子:

以上代码使用函数默认参数来实现请求操作。如果我们没有传递参数和方法,则url和params会配合默认值被提交给服务器。

这种方式还有一个优点就是你可以在函数执行之前轻松地检查函数的参数是否正确。如果客户没有提供正确的参数,你就可以抛出一个自定义的错误信息,让它更易于调试。

结合解构使用

解构是ES6/ES7中的另一个特性,它可以将对象或数组打散,存储在单独的变量中。这样的编程方式更加简洁,清晰。在使用解构时我们也可以设置默认参数值。具体实现如下:

在这个例子中,我们首先将参数(常规传参或对象解构)设置成空对象,然后为其设置默认值。当调用该函数时,我们可以传递一个对象,或我们可以以这种方式调用该函数:

在调用时,传入一个参数对象,再在该对象中设置所需的参数。

这种方法还适用于数组解构:

在这个例子中,我们将参数设置为空数组,并为函数的两个元素设置了默认值。当调用该函数时,我们可以穿一个数组,或者使用默认值:

默认参数和arguments对象

我们可能会发现,在使用函数默认值时,它可能会影响你对函数的“arguments对象”的思维方式。因为在使用默认参数时,我们将函数内的参数统一放置进“中央”参数数组中,并且底部所有参数的类型工作方式都是自然而然的。

如果我们要自定义一个执行特定操作的函数,但该函数具备多个参数 (至少2个),同时在某些情况下该函数需要能够通过调用“剩余参数”方式,以引用数组或对象的形式进行参数传递。在这种情况下,我们将不得不采用“剩余操作符”允许我们引用函数参数中的所有参数。在下述例子中,我们可以看到当我们使用默认参数时,带有“剩余操作符”时的参数传递:

在该例子中,我们使用了三个参数传递,但是额外传递的参数都使用了箭头函数中的“参数剩余”操作符。

小结

默认参数是JavaScript(ES6/ES7)的一种新语法,通过设置函数的默认参数,我们可以轻松地编写出简洁、清晰且易读的JavaScript代码。这种用法的好处在于既可以代码更加简洁,也能更加方便地编写代码。在实际开发中,我们还可以将默认参数和解构语法结合使用,在更少的代码量下,实现更多的业务需求。

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