关闭

JavaScript 中的默认参数

时间: 2021-01-08阅读: 57标签: 参数

在 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,objectarray和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('前端web', '前端开发')

console.log(user) // {name: "前端web", 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

总结

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

原文:https://www.taniarascia.com/


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/10152

掌握JS函数中的几种参数形式

函数是一段结合在一起执行特定任务的代码,函数一般使用参数与外部进行交互。要编写简洁高效的JS代码,必须掌握函数参数。在本文中,会使用一些有趣的例子来解释 JS 必须有效地处理函数参数的所有特性。

Less参数混合

* 参数可以使用逗号或分号分隔。 (建议使用分号,因为逗号具有双重含义:可以将其解释为mixin参数分隔符或者是css列表分隔符);使用逗号作为mixin分隔符使不可能创建逗号分隔的列表作为参数。

URLSearchParams_js中快速构造和获取URL查询参数的方法

URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。URLSearchParams()是个构造函数,将返回一个可以操作查询字符串的对象。

jquery ajax error函数和及其参数详细说明

一般error函数返回的参数有三个: function(jqXHR jqXHR, String textStatus, String errorThrown)。常见调用代码如下:这里对这三个参数做详细说明。

js通过arguments来获取指定参数

通过访问arguments对象的length属性可以获取有多少个参数传递给了函数。在封装函数的时候,会携带不同的参数,我们想要获取指定的参数,可以通过 arguments[ ] 来拿到,arguments对象可以与命名参数一起使用。arguments的值要永远与对应命名参数的值保持同步

小程序获取当前路径和参数

currentPage is not defined;opyions is not defined;不细心的我少写了前两句,以为参数是可以直接引用的,注意this的使用,有时需要定义全局变量来调用

JS的形参与实参

参数是指由外部传入到函数中的变量,仅作为变量使用,但是该变量可以是任何内容,包括函数。被传入的参数作为私有变量使用,可以被覆盖掉。参数排列是严格按照参数的顺序填入的。JavaScript中函数的参数分为形参和实参。

vue-router动态路由设置参数可选

在日常工作中,我们需要将匹配到的所有路由,映射到一个组件上。如下代码想要达到的效果:不传page和id,则映射到user默认list页面,传page和id,根据page不同,显示不同的页面

vue路由传参页面刷新参数丢失问题解决方案

最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决;Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下:

用js获取url地址协议,参数,端口号,锚点等方法总汇

在前端开发中,经常会遇到获取URL的相关数据,下面将总结下使用JavaScript来获取url地址的协议,参数,端口号,锚点等方法。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!