在解释默认函数参数之前,重要的是要知道参数的默认值是什么。所以我们先回顾函数中实参和形参之间的区别。
在下面的代码中,我们创建一个函数,该函数返回一个给定数的立方:
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 } = option
真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲
详情关注公中号【编程进阶路】
s
// 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元素,并添加一个文本标签和类(如果存在的话)。
性能优化
1.webpack打包文件体积过大?(最终打包为一个js文件)
2.如何优化webpack构建的性能
3.移动端的性能优化
4.Vue的SPA 如何优化加载速度
5.移动端300ms延迟
6.页面的重构
所有的知识点都有详细的解答,我整理成了280页PDF《前端校招面试真题精编解析》。