js中如何使用可选函数参数

js是网络的核心技术之一。大多数网站都使用它,并且所有现代网络浏览器都支持它,而不需要插件。在本文中,我们将讨论不同的提示和技巧,它们将帮助您进行日常 JavaScript 开发。

在 JavaScript 编码中,您经常需要将函数参数设置为可选。当您使用 JavaScript 函数时,有两种类型的参数:强制参数和可选参数。在强制参数的情况下,您必须传递这些参数,否则 JavaScript 会引发错误。但是,对于可选参数,如果您不传递它们,它们将被初始化为默认值。

以下我们将讨论 JavaScript 中可选函数参数的基础知识以及如何使用它们。

如何在 ES5 及之前版本中使用可选函数参数

在本节中,我们将讨论一个即使在旧版浏览器上也能工作的解决方案。这在 JavaScript ES5 时代之前一直被频繁使用,当时没有内置支持可以使函数参数成为可选。

让我们通过以下示例来了解它的工作原理。

function getFullImagePath(imagePath, imageBaseUrl) {imageBaseUrl = imageBaseUrl || 'https://code.tutsplus.com/’;var fullImagePath = imageBaseUrl + imagePath;return fullImagePath;
}

 在上面的示例中,getFullImagePath 函数采用两个参数:imagePathimageBaseUrl。我们希望将第二个 imageBaseUrl 参数设为可选,因此如果您想使用默认参数值,可以跳过传递它。为了使其可选,我们使用了以下语句。

imageBaseUrl = imageBaseUrl || 'https://code.tutsplus.com/';

 

基本上,我们检查 imageBaseUrl 变量是否已定义。如果它被定义并且计算结果为 TRUE,我们假设第二个参数可用,并且我们将使用它。另一方面,如果 imageBaseUrl 参数未定义或计算结果为 FALSE,我们将使用 https://code.tutsplus.com/ 值作为该参数的默认值。重要的是,可选参数应始终出现在参数列表的末尾。

请注意,此方法不适用于数值,因为它将覆盖值 0。同样,如果您希望能够将 0null 传递到函数中,则必须显式检查参数是否未定义。

function getFullImagePath(imagePath, imageBaseUrl) {imageBaseUrl = (typeof imageBaseUrl === 'undefined') ? 'https://code.tutsplus.com/' : imageBaseUrl;var fullImagePath = imageBaseUrl + imagePath;return fullImagePath;
}

 

在本例中,我们明确检查了 imageBaseUrl 参数的值是否为 undefined 来决定它是否是可选参数。这是确定参数是否可选的更简单的方法。

这就是在不支持 ES6+ 版本的浏览器中使函数参数可选的方法。在下一节中,我们将在现代浏览器的背景下讨论它。

如何在 JavaScript ES6 中使用可选函数参数

在本节中,我们将讨论可以在支持 ES6 版本 JavaScript 的现代浏览器中使用的方法。让我们通过以下示例来了解它是如何工作的。我们将用 ES6 版本重写上一节中讨论的示例。

function getFullImagePath(imagePath, imageBaseUrl = 'https://code.tutsplus.com/') {var fullImagePath = imageBaseUrl + imagePath;return fullImagePath;
}

 

如果您使用过其他编程语言,那么您可能会熟悉上述定义可选函数参数的方法。在这种情况下,可选参数在函数声明语句本身中被分配默认值。

此外,您还可以有多个可选参数,如以下代码片段所示,只要您在参数列表的末尾定义它们即可。

function foo(a, b=0, c=10) {//...
}

 

如您所见,JavaScript ES6 语法比旧方法更简单、更容易编写。

结论

今天,我们讨论了如何在 JavaScript 中使用可选函数参数,以及几个实际示例。

以下是 JavaScript 中可选函数参数编码的不同方法的比较:

方法注释
arg = arg ||默认值ES6之前的常见习惯用法,但 0null 将被默认值覆盖。
arg = (typeof arg === '未定义') ?默认值:argES6之前实现可选参数最简单的方式。
函数某事(arg=defaultValue) { }适用于 ES6 和较新版本的 JavaScript 的最佳方法。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/66692.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python实现MQTT协议(发布者,订阅者,topic)

python实现MQTT协议 一、简介 1.1 概述 本文章针对物联网MQTT协议完成python实现 1.2 环境 Apache-apollo创建brokerPython实现发布者和订阅者 1.3 内容 MQTT协议架构说明 : 利用仿真服务体会 MQTT协议 针对MQTT协议进行测试 任务1:MQTT协议应…

理解React页面渲染原理,如何优化React性能?

React JSX转换成真实DOM过程 当使用React编写应用程序时,可以使用JSX语法来描述用户界面的结构。JSX是一种类似于HTML的语法,但实际上它是一种JavaScript的扩展,用于定义React元素。React元素描述了我们想要在界面上看到的内容和结构。 在运…

maven搭建spring项目

前提 安装jdk 安装maven 安装eclipse 创建maven项目 搭建spring项目 pom.xml <dependency><groupId>org.springframework</groupId><artifactId>spring-context</artifactId><version>5.0.4.RELEASE</version> </dependency&…

【java 入侵 C# 之路】1-入门

感谢 https://www.cnblogs.com/mww-NOTCOPY/p/12213373.html 百度百科 jvm对应clr java se runtime对应 .net framework&#xff0c; jdk对应 .net framework sdk&#xff0c; java对应C# .NET 是开发者平台&#xff0c;它包含开发环境、技术框架、社区论坛、服务支持等&…

学习pytorch8 土堆说卷积操作

土堆说卷积操作 官网debug torch版本只有nn 没有nn.functional代码执行结果 B站小土堆视频学习笔记 官网 https://pytorch.org/docs/stable/nn.html#convolution-layers 常用torch.nn, nn是对nn.functional的封装&#xff0c;使函数更易用。 卷积核从输入图像左上角&#xf…

Lambda表达式第二版

1、Lambda概述 Lambda表达式是JDK8开始后的一种新语法形式作用&#xff1a;简化匿名内部类的代码写法注意&#xff1a;Lambda表达式只能简化函数式 接口 的匿名内部类的写法形式 1.1、什么是函数式接口&#xff1f; 首先必须是接口、其次接口中有且仅有一个抽象方法的形式通常我…

Bito使用手册

第一步&#xff1a;输入网站 https://alpha.bito.co/bitoai/ 第二步&#xff1a;填写邮箱 第三步&#xff1a;登录邮箱&#xff0c;获取验证码 第四步&#xff1a;填写验证码 第五步&#xff1a;完成

【LeetCode-中等题】994. 腐烂的橘子

文章目录 题目方法一&#xff1a;bfs层序遍历 题目 该题值推荐用bfs&#xff0c;因为是一层一层的感染&#xff0c;而不是一条线走到底的那种&#xff0c;所以深度优先搜索不适合 方法一&#xff1a;bfs层序遍历 广度优先搜索&#xff0c;就是从起点出发&#xff0c;每次都尝…

我的Vim学习笔记(不定期更新)

2023年9月3日&#xff0c;周日上午 学到了啥就写啥&#xff0c;不定期更新 目录 字体 文件 标签页 分屏 调用系统命令 字体 设置字体大小 :set guifont字体:h字体大小 例如&#xff0c;:set guifontMonospace:h20 查询当前使用的字体和字体大小 :set guifont? 查看…

UG\NX CAM二次开发 查询工序所在的几何组TAG UF_OPER_ask_geom_group

文章作者:代工 来源网站:NX CAM二次开发专栏 简介: UG\NX CAM二次开发 查询工序所在的几何组TAG UF_OPER_ask_geom_group 效果: 代码: void MyClass::do_it() { int count=0;tag_t * objects;UF_UI_ONT_ask_selected_nodes(&count, &objects);for (in…

linux 下安装配置nexus

一、安装包获取方式 方式一 1、直接把下载好的安装包上传到服务器中 方式二 2、通过wget安装Nexus压缩包 ①、可以使用以下命令进行安装Nexus的最新版本 wget https://download.sonatype.com/nexus/3/latest-unix.tar.gz②、也可以点击官网复制想要下载的Nexus压缩包进行安装…

【Linux系列】离线安装openjdk17的rpm包

首发博客地址 首发博客地址[1] 系列文章地址[2] 视频地址[3] 准备 RPM 包 请从官网下载&#xff1a;https://www.oracle.com/java/technologies/downloads/#java17[4] 如需不限速下载&#xff0c;请关注【程序员朱永胜】并回复 1020 获取。 安装 yum localinstall jdk-17_linux…

C++智能指针之weak_ptr(保姆级教学)

目录 C智能指针之weak_ptr 概述 作用 本文涉及的所有程序 使用说明 weak_ptr的常规操作 lock(); use_count(); expired(); reset(); shared_ptr & weak_ptr 尺寸 智能指针结构框架 常见使用问题 shared_ptr多次引用同一数据&#xff0c;会导致两次释放同一内…

没有使用sniffer dongle在windows抓包蓝牙方法分享

网上很多文章都是介绍买一个sniffer dongle来抓蓝牙数据,嫌麻烦又费钱,目前找到一个好方法,不需要sniffer就可以抓蓝牙数据过程,现分享如下: (1)在我资源附件找到相关安装包或者查看如下链接 https://learn.microsoft.com/zh-cn/windows-hardware/drivers/bluetooth/testing-bt…

【WebRTC---源码篇】(二:二)视频源VideoSourceBase

作用 这个类继承自VideoSourceInterface<webrtc::VideoFrame>模板类,并且可以处理webrtc::VideoFrame class VideoSourceBase : public VideoSourceInterface<webrtc::VideoFrame> 重要成员变量 struct SinkPair {SinkPair(VideoSinkInterface<webrtc::Vid…

【Python】批量下载页面资源

【背景】 有一些非常不错的资源网站,比如一些MP3资源网站。资源很丰富,但是每一个资源都不大,一个一个下载费时费力,想用Python快速实现可复用的批量下载程序。 【思路】 获得包含资源链接的静态页面,用beautifulsoup分析页面,获得所有MP3资源的实际地址,然后下载。…

安卓逆向 - Frida反调试绕过

本文仅供学习交流&#xff0c;只提供关键思路不会给出完整代码&#xff0c;严禁用于非法用途&#xff0c;谢绝转载&#xff0c;若有侵权请联系我删除&#xff01; 本文案例 app&#xff1a;5Lqs5LicYXBwMTEuMy4y 一、引言&#xff1a; Frida是非常优秀的一款 Hook框架&#…

MATLAB/Python编程:绘图属性的确定

注1:本文系“MATLAB/Python的编程教程”系列之一,致力于使用Python和Matlab实现特定的功能。本次要实现的功能是:绘图属性(字体、大小、坐标范围等)的确定。 文章目录 MATLAB/Python编程:绘图属性的确定Python 中的绘图安装matplotlib创建一个简单的图形设置字体与大小查看…

PlotlyJs 指定画布的宽度并页面居中

可以通过CSS样式来实现指定画布的宽度并使其在页面居中。具体方法如下&#xff1a; 在HTML文件中定义一个div&#xff0c;用来包含PlotlyJs画布。如下所示&#xff1a; <div id"plotly-div"></div>在CSS样式中指定该div的宽度和居中方式。如下所示&…

uni-app:允许字符间能自动换行(英文字符、数字等)

<template><view class"container"><!-- 这里是你的文本内容 -->{{ multilineText }}</view> </template><style> .container {word-break: break-all; } </style>例如&#xff1a; <template><view class"…