深入 JavaScript 中的默认参数！

阳光穿透心脏的1/2处 2022-10-28 10:21 182阅读 0赞

> 译者：前端小智  
> 作者：Tania Rascia  
> 来源：flatlogic.com

> **点赞再看**，微信搜索\*\*【[大迁世界][Link 1]】**,B站关注**【[前端小智][Link 2]】\*\*这个没有大厂背景，但有着一股向上积极心态人。本文 `GitHub` https://github.com/qq449245884/xiaozhi 上已经收录，文章的已分类，也整理了很多我的文档，和教程资料。

最近开源了一个 Vue 组件，还不够完善，欢迎大家来一起完善它，也希望大家能给个 star 支持一下，谢谢各位了。

**github 地址：[https://github.com/qq449245884/vue-okr-tree][https_github.com_qq449245884_vue-okr-tree]**

我是小智，今天，我们来讲讲默认参数。

在 ES6 中，JS引入了默认函数参数。如果未向函数调用提供实参，则允许开发人员用默认值初始化函数。以这种方式初始化函数参数将使函数更容易阅读，更不易出错，并为函数提供默认行为。这也帮助我们避免由于传入未定义的参数和解构不存在的对象而产生的错误。

在本文中，我们将学习一下形参和实参之间的区别，了解如何在函数中使用默认形参，了解支持默认形参的其他方法，并了解哪些类型的值和表达式可以用作默认形参。

## 实参和形参 ##

在解释默认函数参数之前，重要的是要知道参数的默认值是什么。所以我们先回顾函数中实参和形参之间的区别。

在下面的代码中，我们创建一个函数，该函数返回一个给定数的立方：

function cube(x) {
      return x * x * x
    }

此示例中的`x`变量是一个参数-传递给函数的命名变量，参数必须始终包含在变量中。接着，我们来调用一下这个函数：

cube(10) // 1000

在这种情况下，`10`是一个参数—调用时传递给函数的值。 通常，值也可以用变量，如：

const number = 10
    
    cube(number) // 1000

如果没有将参数传递该函数，函数将隐式地使用`undefined`作为默认值：

cube() // NaN

在本例中，`cube()`试图计算`undefined * undefined * undefined`的值，结果是`NaN`。

这种自动的行为有时会造成问题。在某些情况下，我们希望参数具有一个值，即使没有向函数传递参数。这就是默认参数特性派上用场的地方。

## 默认参数语法 ##

如果没有默认参数，我们就需要显式检查`undefined`的值才能设置默认值，如以下示例所示：

function cube(x) {
      if (typeof x === 'undefined') {
        x = 5
      }
    
      return x * x * x
    }
    
    cube()

相反，使用默认参数可以用更少的代码实现相同的目标。 可以通过使用等式赋值运算符（`=`）为多维数据集中的参数设置默认值，如下所示：

function cube(x = 5) {
      return x * x * x
    }

现在，在不带参数的情况下调用多维数据集函数时，它将为`x`赋`5`并返回计算而不是`NaN`：

传递参数时，它仍将按预期运行，而忽略默认值：

cube(2)  // 8

需要注意的一个地方，默认参数值还将覆盖作为函数的参数传递的`undefined` ，如下所示：

cube(undefined)  // 125

这里是使用默认参数 `5` 来计算的，显示的传递 `undefined` 会被忽略。

## 默认参数数据类型 ##

任何原始值或对象都可以用作默认参数值。 首先，使用 **number**, **string**, **boolean**,**object**， **array**和`null` 作为默认值来设置参数。

const defaultNumber = (number = 42) => console.log(number)
    const defaultString = (string = 'Shark') => console.log(string)
    const defaultBoolean = (boolean = true) => console.log(boolean)
    const defaultObject = (object = { id: 7 }) => console.log(object)
    const defaultArray = (array = [1, 2, 3]) => console.log(array)
    const defaultNull = (nullValue = null) => console.log(nullValue)

在不带参数的情况下调用这些函数时，它们都将使用默认值：

defaultNumber()  // 42
    defaultString()  // "Shark"
    defaultBoolean() // true
    defaultObject()  // {id: 7}
    defaultArray()   // (3) [1, 2, 3]
    defaultNull()    // null

注意，在默认参数中创建的任何对象都将在每次调用函数时创建。默认参数的一个常见用例是使用这种行为从对象中获取值。如果我们试图从一个不存在的对象中解构或访问一个值，它将抛出一个错误。但是，如果默认参数是一个空对象，那么它只会给出`undefined` 的值，而不会抛出错误。

function settings(options = {}) {
      const { theme, debug } = options
    
      // Do something with settings
    }

这样避免因解构不存在的对象而导致的错误。

现在我们已经看到了默认参数如何与不同的数据类型一起工作，下面我们来看看多个默认参数如何协同工作。

## 使用多个默认参数 ##

首先，声明一个带有多个默认参数的`sum()`函数

function sum(a = 1, b = 2) {
      return a + b
    }
    
    sum() // 3

此外，参数中使用的值可以在任何后续的默认参数中使用，从左到右。例如，这个`createUser`函数创建了一个用户对象`userObj`作为第三个参数，函数本身所做的就是返回`userObj`和前两个参数

function createUser(name, rank, userObj = { name, rank }) {
      return userObj
    }
    
    // Create user
    const user = createUser('前端小智', '前端开发')
    
    console.log(user) // {name: "前端小智", rank: "前端开发"}

通常建议将所有默认参数放在参数列表的末尾，以便可以轻松保留可选值。 如果首先使用默认参数，则必须显式传递`undefined`才能使用默认值。

function defaultFirst(a = 1, b) {
      return a + b
    }

当调用这个函数时，必须调用带有两个参数的`defaultFirst()`:

efaultFirst(undefined, 2)  // 3

实战中的事例，下面是一个函数，它的作用是创建一个DOM元素，并添加一个文本标签和类(如果存在的话)。

function createNewElement(tag, text, classNames = []) {
      const el = document.createElement(tag)
      el.textContent = text
    
      classNames.forEach((className) => {
        el.classList.add(className)
      })
    
      return el
    }
    
    const greeting = createNewElement('p', 'Hello!', ['greeting', 'active'])

此时 `greeting` 的值为

<p class="greeting active">Hello!</p>

如果将`classNames`数组保留在函数调用之外，则该数组仍将起作用。

const greeting2 = createNewElement('p', 'Hello!')
    
    console.log(greeting2) // p>Hello!</p>

## 函数调用作为默认参数 ##

除了原始类型和对象外，调用函数的结果可以用作默认参数。

在下面代码中，创建一个返回随机数的函数，然后将结果用作多维数据集函数中的默认参数值：

function getRandomNumber() {
      return Math.floor(Math.random() * 10)
    }
    
    
    function cube(x = getRandomNumber()) {
      return x * x * x
    }

现在每次调用 `cube` 结果可能都会不一样：

cube()  // 512
    cube()  // 64

在以下示例中，将一个随机数分配给`x`，该随机数用作我们创建函数中的参数。 然后，`y`参数将计算数字的立方根，并检查`x`和`y`是否相等：

function doesXEqualY(x = getRandomNumber(), y = Math.cbrt(cube(x))) {
      return x === y
    }
    
    doesXEqualY() // true

默认参数甚至可以是函数定义，如本例所示，它将参数定义为内部函数并返回参数的函数调用:

function outer(
      parameter = function inner() {
        return 100
      }
    ) {
      return parameter()
    }
    
    // Invoke outer function
    outer() // 100

## 总结 ##

在本文中，我们了解了什么是默认函数参数以及如何使用它们。现在，我们可以使用默认参数来帮助保持函数的整洁和易于阅读。还可以预先将空对象和数组分配给参数，以便在处理从对象中检索值或遍历数组等情况时减少复杂性和代码行数。

我是小智 ，我们下期见！

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

**编辑中可能存在的bug没法实时知道，事后为了解决这些bug,花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 [Fundebug][]。**

原文：https://www.taniarascia.com/default-parameters-javascript/

## 交流 ##

文章每周持续更新，可以微信搜索 **【大迁世界 】** 第一时间阅读，回复 **【福利】** 有多份前端视频等着你，本文 GitHub [https://github.com/qq449245884/xiaozhi][https_github.com_qq449245884_xiaozhi] 已经收录，欢迎Star。

[Link 1]: https://mp.weixin.qq.com/s/sY9ufGGKfcdaAQ7KJQs3HA
[Link 2]: https://space.bilibili.com/31089477
[https_github.com_qq449245884_vue-okr-tree]: https://github.com/qq449245884/vue-okr-tree
[Fundebug]: https://www.fundebug.com/?utm_source=xiaozhi
[https_github.com_qq449245884_xiaozhi]: https://github.com/qq449245884/xiaozhi