JavaScript 中的默认参数
实参和形参
在解释默认函数参数之前,重要的是要知道参数的默认值是什么。所以我们先回顾函数中实参和形参之间的区别。
在下面的代码中,我们创建一个函数,该函数返回一个给定数的立方:
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
}
这样避免因解构不存在的对象而导致的错误。
现在我们已经看到了默认参数如何与不同的数据类型一起工作,下面我们来看看多个默认参数如何协同工作。
http://www.ssnd.com.cn 化妆品OEM代加工
使用多个默认参数
首先,声明一个带有多个默认参数的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.cnblogs.com/Qooo/p/15012914.html
- Dubbo(五) Dubbo入门demo——helloworld
- Dubbo(四) Dubbo-Admin项目 Dubbo管理台
- volley请求原理
- Dubbo(三) 安装Zookeeper 单机-集群
- ASP.NET MVC Preview生命周期分析
- Dubbo(二) 认识Zookeeper
- Kafka源码系列之使用要点总结及重要错误解决
- Kafka源码系列之实现自己的kafka监控
- Kafka源码系列之副本同步机制及isr列表更新
- Kafka源码系列之topic创建分区分配及leader选举
- Kafka源码系列之如何删除topic
- Kafka源码系列之kafka如何实现高性能读写的
- Kafka源码系列之分组消费的再平衡策略
- Kafka源码系列之Consumer高级API性能分析
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PHP实现数组向任意位置插入,删除,替换数据操作示例
- 实例讲解Python 迭代器与生成器
- opencv 图像轮廓的实现示例
- 基于python实现可视化生成二维码工具
- Python word实现读取及导出代码解析
- Python项目跨域问题解决方案
- keras的load_model实现加载含有参数的自定义模型
- opencv 图像加法与图像融合的实现代码
- PHP图像处理技术实例总结【绘图、水印、验证码、图像压缩】
- python如何实现读取并显示图片(不需要图形界面)
- PHP文件操作实例总结【文件上传、下载、分页】
- Django中Aggregation聚合的基本使用方法
- ThinkPHP3.2.3框架实现执行原生SQL语句的方法示例
- PHP反射实际应用示例
- 解决Keras使用GPU资源耗尽的问题