深刻 JavaScript 中的默认参数！

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

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

最近开源了一个 Vue 组件，还不够完善，欢迎你们来一块儿完善它，也但愿你们能给个 star 支持一下，谢谢各位了。javascript

github 地址：https://github.com/qq44924588...前端

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

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

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

实参和形参

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

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

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

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

cube(10) // 1000

在这种状况下，10是一个参数—调用时传递给函数的值。一般，值也能够用变量，如：dom

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/d...

交流

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

本文同步分享在博客“前端小智”（SegmentFault）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。