深入 JavaScript 中的默认参数！

}

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 的值为

Hello!

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

const greeting2 = createNewElement(‘p’, ‘Hello!’)

console.log(greeting2) // p>Hello!

函数调用作为默认参数

---

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

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

function getRandomNumber() {

return Math.floor(Math.random() * 10)

}

function cube(x = getRandomNumber()) {

return x * x * x

}

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

最后

喜欢的话别忘了关注、点赞哦~