JavaScript:函数

JavaScript:函数

    • 函数的作用
    • 函数的声明和调用
      • 函数声明
      • 函数调用
      • 函数重复声明
    • 函数传参
      • 传参语法
      • 参数默认值与参数数量问题
        • 传参数量过多
        • 传参数量太少
          • 参数默认值
    • 函数的返回值
    • 函数表达式
    • 匿名函数
    • 立即执行函数


函数的作用

在我们编程过程中,会出现一种情况,我们在多处需要用到同样的一串代码,那么此时将这样的一段代码重复写多次,就会十分冗余。此时我们就可以将其放到一个函数里面,在需要时,我们只需要引用这个函数,就相当于执行了函数内部的代码。
函数可以理解为一个特定的代码块容器,它可以完成特定的需求,并且可以重复使用。
如果还是不能理解,不妨继续看下去,用着用着就理解了。


函数的声明和调用

函数声明

函数的声明过程,其实就是将这样一串代码放到一个可以重复使用的盒子中的过程。
声明语法:

function 函数名() {函数体
}

函数声明有三个基本部分,分别是关键字function,函数名函数体
关键字:
这个关键字function用于告诉浏览器,此处后面的一段代码,正在声明一段函数。
函数名:
由于我们在编程时,往往不止把一段代码放到函数中,而是会需要多个函数,此时为了区分开不同的函数,我们要给每个函数取一个名字。
函数体:
函数体就是我们需要封装的代码,每当调用这个函数,我们函数体内的代码就会执行。
以下面的代码为例:

function sayHi() {document.write("hi!!");document.write("hi!!");document.write("hi!!!");
}

以上代码中,function是函数关键字,代表函数的声明;sayHi是函数名;三句document.write("hi!!");是函数体。
在后续调用函数时,就会执行三次document.write("hi!!");


函数调用

我们已经把代码放进了一个可以重复使用的函数中,那我们要如何使用这个函数?
这就涉及到函数的调用了:
调用语法:函数名()
函数的调用,只需要在函数名后面加一对小括号即可。
调用之后,函数内的代码就会执行一次,如果我们想要调用刚刚的sayHi函数,那么就是:sayHi();(此处末尾的引号可有可无)。

示例:
在这里插入图片描述
当我们想要重复调用,那就多写几次调用语句,比如我想要写九个”Hi!!!“,就调用三次函数:
在这里插入图片描述


函数重复声明

函数的重复声明是指,两个函数使用了同一个函数名,这就会导致浏览器无法搞清楚调用函数时调用哪一个,在很多其它编程语言中,会直接禁止两个函数用一个函数名的做法。但是在JavaScript中是允许的:
在JavaScript中,当两个函数使用了同一个函数名,会执行后一个函数的函数体。
示例:
在这里插入图片描述
在此,我声明了两个sayHi函数,第一个函数输出三个Hi,第二个函数输出一个Hi。
由于只输出一个Hi的函数在后面,不论在何处调用此函数,都只输出一个Hi了。


函数传参

函数的功能其实远远不止复用一段代码这么单调,它其实还可以在每次复用代码的时候,处理的数据不同。
比如我们刚刚的sayHi函数,我们是否可以来指定输出几次Hi呢?通过函数传参,我们可以实现这个功能。
传参的过程,其实就是给函数内部数据的过程,就好比如炒菜,给厨子西红柿和鸡蛋,就可以得到一盘西红柿炒蛋,我们也可以给厨子青椒和猪肉,得到青椒炒肉。
这里的函数就好比厨子,而食材就是我们的数据。

传参语法

function 函数名(参数) {函数体
}

相比于刚刚的基本结构,我们的参数需要放在括号里面,这就是我们给函数的参数,或者说是数据。这个参数在函数内部可以随意使用,接下来我们以刚刚的sayHi函数为例:

function sayHi(n) {for (let i = 0; i < n; i++){document.write("Hi!!!");}}

在我们的改版函数中,我们将输出Hi的语句放在了一个循环中,循环的次数由n来决定,而n是一个参数,是由外部传入的数据,我们想输出几次Hi,外部就传入数字几。
那么我们要怎么传入这个数据呢?我们只需要在调用的时候,把数据传进去,这个过程称为传参
传参语法:函数名(参数)
我们只需要在调用函数的时候,把我们对应的数据放在括号里面即可。
示例:
在这里插入图片描述
我们在调用函数时,传入了数字5,此时我们的Hi就输出了5次,这就是传参的作用。
函数的参数是可以有无数多个的,在面对多个参数,我们在声明时用逗号隔开每个参数,在调用时,也用逗号隔开每个传入的数据。
比如我们要用一个函数来实现加法:

function sum(x, y) {document.write(x + y);}

我们执行加法,需要两个数据,此处的两个数据xy,就要用逗号隔开。
如果我们想得到1 + 2的结果,传参语法就是:sum(1,2);用一个逗号将两个参数隔开。


参数默认值与参数数量问题

如果我们传参的时候,传入的参数和函数需要的参数个数不一样会发生什么?
这分两种情况:

传参数量过多

当传入的参数数目大于函数需要的数目,那么函数在接收参数时,只接收前几个参数,后面超出的参数全部被忽略。
示例:
在这里插入图片描述
我们在对sum的加法传参时,sum只需要两个参数,但是我们传入了五个参数,此时函数只取前两个参数1,2而后面的三个参数全部被忽略了。

传参数量太少

当我们传入的参数数目太少了,此时就会启用参数的默认值,什么是默认值?我们先来讲解一下参数默认值:

参数默认值

参数是可以设置默认值的,当我们传入参数过少的时候,就会启用默认值。
设置默认值语法:

function 函数名(参数 = 默认值) {函数体
}

为参数设置默认值,只需要在声明参数的时候参数 = 默认值即可。
示例:
在这里插入图片描述
我们在现在为sum函数设置了x的默认值为3,y的默认值为5。我们后续调用sum函数时,一个参数也没有传入,此时参数就取默认值,完成了 3 + 5 = 8。

如果不设置默认值,参数的默认是就是undefined。
在这里插入图片描述

以上就为大家介绍完了参数的默认值。现在回到传参数目不足的问题上:
刚刚为大家演示的都是一个参数都不传的情况,如果我们传参传一半,又会咋样?
答案是,有几个能用的参数,就用几个参数,不够的参数取默认值。
示例:
在这里插入图片描述
我们在传参时,只传入了一个参数,而sum函数需要三个参数,此时传入的第一个参数,就代替了函数的第一个参数x,而后续的yz两个参数由于没有被传入参数,采取了默认值。于是输出9(传入的参数)2(y默认值)8(z默认值)。


函数的返回值

什么是函数的返回值?
我们刚刚以厨子做菜,解释了函数的参数问题,我们以同样的例子来讲解返回值。当厨子炒好了菜,就应该把菜端出来给客户吃,客户得到这盘菜的过程,就是函数返回的过程。

刚刚的sum函数,我们在将数据加完之后,能不能让函数的外部得到这个加好的值呢?是可以的,此时就需要用到return关键字。
返回语法:

function 函数名(参数 = 默认值) {函数体return 返回值;
}

函数的返回值,需要放在return关键字后面,这样,函数就会把return后面的数据返回给函数的外面。
我们来完善一下sum函数的返回值:

function sum(x, y, z) {let a = x + y + z;return a;}

我们将a作为返回值返回,而a就是xyz的和,这样我们就可以在函数外面得到三个数字的和了。
那么函数外面要如何得到这个返回的值嘞?
只需要用一个变量来接收即可:let b = sum(参数)这样b就可以得到这个返回值了。
实验一下:
在这里插入图片描述
可以看到,b最后的值就是4,5,6之和。


函数表达式

函数表达式是指,将一个函数的声明过程,赋值给一个变量。
比如这样:
在这里插入图片描述
在声明sum函数的同时,让a等于这个函数,注意我们之前在讲返回值的时候,变量赋值的是调用结果,而这里是赋值声明结果。以上一整段代码,就称为一个函数表达式。
使用函数表达式后,我们可以通过变量名称来调用函数:
在这里插入图片描述
这里我们成功通过a来调用了这个函数,那么我们再试试能不能通过函数原名sum来调用:
在这里插入图片描述
我们发现,函数原名sum居然不能用了,这个过程就好比一个函数的改名过程,当这个函数被赋值给了a,那么sum就不再是它的函数名了,a才是它的函数名。那原本这个函数名不就没有意义了吗?所以一般在使用函数表达式时,会使用匿名函数,接下来讲解匿名函数是什么:


匿名函数

我们至此,已经讲完了函数的主体结构的五大要素:关键字,函数名,参数,函数体,返回值:

function 函数名(参数 = 默认值) {函数体return 返回值;
}

前面已经讲解,返回值和参数都是可以省略的,除此之外,函数的名字也是可以省略,这样的函数称为匿名函数。语法如下:function () {},(此处同时省略了返回值和参数,便于讲解)。
尝试创建一个匿名函数:
在这里插入图片描述
发现:这个函数报错了,因为这个函数没有名字,创建了之后无法调用,这一大串代码毫无意义。所以我们此时就需要函数表达式来为其命名:
在这里插入图片描述
报错消失了,这个语法是正确的,匿名函数的使用一般都要搭配函数表达式来使用,或者将这个函数作为其它函数的参数,总之就是要保证这个函数虽然是匿名的,但是依然会被调用,那么这个函数就可以匿名


立即执行函数

我们先前的所有函数,在声明的时候,都是不会发生调用的,只有后续对其调用,函数才会执行。JavaScript在此提供了两种语法,让函数在声明的同时就立刻执行一次:
语法:(function 函数名(){ })();(function 函数名(){ }());
我们来解析一下这个语法:
首先,两个语法中都有相同的部分:function 函数名(){ },这就是一个函数的声明过程。
先解析前者:我们刚刚已经拆分出了函数声明,那么前者的语法就可以被简化为:(函数声明)(),这个语法先将函数声明放在一个小括号中,在后面再追加了一对小括号,看到后面这对小括号,不知你是否能联想到一般的函数调用过程函数名(),就是在函数名末尾追加一个小括号?此处就是把前面的整个函数声明过程用小括号括起来,当作了函数名,然后对其调用。于是函数在声明时就会立即执行一次。
对于后者:其就可以拆分为:(函数声明());其实原理大概是一致的,这里就不额外解析了,因为在实战中,这种方法可读性没有前者好,不常使用。

实验其功能:
在这里插入图片描述
在上面这个立即执行函数中,红色框内是函数声明,满足(函数声明)()结构,于是它立刻执行了一次,完成了1+2+3 = 6的加法过程。
那么我们是否可以对立即执行函数传参呢?也是可以的,我们在一般函数调用过程,参数是这样的:函数名(参数)。对比于立即执行函数,那么就应该这样传参:(函数声明)(参数)
再实验一次:
在这里插入图片描述
可以看到,这个立即执行函数完成了传入参数4 + 5 + 6 = 15的过程。

那么立即执行函数的函数名可以省略吗?
这也是可以的,我们先前在讲解匿名函数的时候,提到了匿名函数的准则:要保证这个函数虽然是匿名的,但是依然会被调用,那么这个函数就可以匿名
此处我们将函数匿名后,会立刻调用一次,所以该函数是可以匿名的:
示例:
在这里插入图片描述
可以看到,我们删掉函数的名字,使其称为匿名函数后,它依然可以正常执行。


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

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

相关文章

[软件] Image2LCD v4.0

介绍 通过打开图片, 可以提取图片的像素特征, 生成.c文件, 或者二进制文件等, 提供人们根据需要选择. 16位真彩色 每一个像素点需要用16位来表示, 分别是RGB, R: 5位 G: 6位, B: 5位, 共两个字节. 配置 tftLCD180显示屏, 官方给的参考代码, 需要如下所示设置.

【Spring Security】认证密码加密Token令牌CSRF的使用详解

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是Java方文山&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的专栏《Spring Security》。&#x1f3af;&#x1f3af; …

频谱论文:RadioUNet:使用卷积神经网络的快速无线电地图估计

#频谱# R. Levie, . Yapar, G. Kutyniok and G. Caire, "RadioUNet: Fast Radio Map Estimation With Convolutional Neural Networks," in IEEE Transactions on Wireless Communications, vol. 20, no. 6, pp. 4001-4015, June 2021, doi: 10.1109/TWC.2021.305497…

【hadoop】解决浏览器不能访问Hadoop的50070、8088等端口?!

【hadoop】解决浏览器不能访问Hadoop的50070、8088等端口&#xff1f;&#xff01;&#x1f60e; 前言&#x1f64c;【hadoop】解决浏览器不能访问Hadoop的50070、8088等端口&#xff1f;&#xff01;查看自己的配置文件&#xff1a;最终成功访问如图所示&#xff1a; 总结撒花…

10 个顶级免费 Android 数据恢复软件可帮助恢复已删除的文件

不小心删除了手机上的一些重要数据或文件&#xff1f;这很不幸&#xff0c;但不要悲伤或放弃希望&#xff0c;因为仍有机会恢复它们。 10 个顶级免费 Android 数据恢复软件 虽然 Android 手机没有像 Windows 那样的回收站可以自动存储您删除的数据&#xff0c;但是有很多功能强…

【Java中的负数取绝对值结果为什么不一定是正数?】

Java中的负数取绝对值结果为什么不一定是正数&#xff1f; ✅典型解析✅扩展知识仓✅整型的取值范围✅超出范围怎么办 ✅典型解析 假如&#xff0c;我们要用Math.abs对一个nteger取绝对值的时候&#xff0c;如果用如下方式: Math .abs(orderId.hashCode());得到的结果可能是个负…

在Java Web开发中,Servlet功能与jsp功能可以相互转换吗

在Java Web开发中&#xff0c;Servlet和JSP是两种常用的Web组件&#xff0c;它们可以相互协作&#xff0c;也可以相互转换。 具体来说&#xff0c;Servlet可以实现所有JSP的功能&#xff0c;而JSP也可以调用Servlet中的方法。Servlet可以通过Java代码生成HTML页面&#xff0c;而…

一键转换,将HTML智能转换为PDF,轻松解决文档转换需求

在数字时代&#xff0c;HTML网页是我们获取信息的主要来源之一。然而&#xff0c;有时候我们可能需要将网页内容以PDF格式保存&#xff0c;以便于离线阅读、打印或分享。这时&#xff0c;将HTML转换为PDF就变得尤为重要。 首先&#xff0c;我们要进入首助编辑高手主页面&#x…

[CVPR-23] Instant Volumetric Head Avatars

[paper | code | proj] 本文提出INSTA。INSTA是一种backward mapping方法。该方法基于NeRF建立标准空间&#xff0c;形变空间&#xff08;任意表情&#xff09;通过映射回标准空间&#xff0c;实现渲染。为实现形变空间中任意点向标准空间的映射&#xff0c;对形变空间中的任意…

C++ Qt开发:TabWidget实现多窗体功能

Qt 是一个跨平台C图形界面开发库&#xff0c;利用Qt可以快速开发跨平台窗体应用程序&#xff0c;在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置&#xff0c;实现图形化开发极大的方便了开发效率&#xff0c;本章将重点介绍TabWidget标签组件的常用方法及灵活运用。 Q…

MVVM响应式

聚沙成塔每天进步一点点 本文内容 ⭐ 专栏简介MVVM响应式1. 什么是MVVM模式?2. Vue中的响应式数据3. 数据绑定与视图更新⭐ 写在最后⭐ 专栏简介 Vue学习之旅的奇妙世界 欢迎大家来到 Vue 技能树参考资料专栏!创建这个专栏的初衷是为了帮助大家更好地应对 Vue.js 技能树的学习…

IspSrver-DNS

2023年全国网络系统管理赛项真题 模块B-Windows解析 题目 安装DNS服务器,根据题目创建必要正向区域和反向区域的DNS解析。把当前机器作为互联网根域服务器,创建test1.com~test100.com,并在所有正向区域中创建一条A记录,解析到本机地址。配置步骤 安装DNS服务器,根据题目创…

3842充电器电路图大全

3842充电器电路图&#xff08;一&#xff09; UC3842组成的充电器电路 图1中C1、V1&#xff5e;V4、C2组成滤波整流电路&#xff0c;变压器T为高频变压器&#xff0c;V5、R2、C11组成功率开关管V7的保护电路&#xff0c;NF为供给IC电源的绕组。单端输出IC为UC3842&#xff0c;…

Nacos-服务发现与配置管理v1.0

Nacos - 服务发现和配置管理 教学目标 1&#xff09;能够理解微服务架构的特点 2&#xff09;能够理解服务发现的流程 3&#xff09;能够说出Nacos的功能 4&#xff09;掌握Nacos的安装方法 5&#xff09;掌握RESTful服务发现开发方法 6&#xff09;掌握Dubbo服务发现开…

ICC2:Less than minimum edge length和Concave convex edge enclosure

我正在「拾陆楼」和朋友们讨论有趣的话题,你⼀起来吧? 拾陆楼知识星球入口 首先,要介绍一下这两种drc Less than minimum edge length对应的tf rule如下: 而Concave convex edge enclosure对应图示和tf 规则如下,可

信息论安全与概率论

目录 一. Markov不等式 二. 选择引理 三. Chebyshev不等式 四. Chernov上限 4.1 变量大于 4.2 变量小于 信息论安全中会用到很多概率论相关的上界&#xff0c;本文章将梳理几个论文中常用的定理&#xff0c;重点关注如何理解这些定理以及怎么用。 一. Markov不等式 假定…

仙女麻麻看过来~你想要的穿搭我都有

精选优质匈牙利白鸭绒填充绒朵大而蓬松&#xff0c;毫无异味整件格充绒工艺不跑绒 更加的保暖舒适版型优秀显瘦不臃肿 黑色经典好穿又好看&#xff01;

获取请求体中json数据并解析到实体对象

目录 相关依赖 前端代码 后端代码 测试结果 相关依赖 <dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.83</version> </dependency> <dependency><groupId>comm…

【HarmonyOS开发】ArkUI实现下拉刷新/上拉加载

列表下拉刷新、上拉加载更多&#xff0c;不管在web时代还是鸿蒙应用都是一个非常常用的功能&#xff0c;基于ArkUI中TS扩展的声明式开发范式实现一个下拉刷新&#xff0c;上拉加载。 上拉加载、下拉刷新 如果数据量过大&#xff0c;可以使用LazyForEach代替ForEach 高阶组件-…

Seata1.4.2分布式事务搭建部署【Spring cloud Alibaba】

包下载 https://github.com/apache/incubator-seata/releases下载并上传到服务器 //解压 tar -zxvf seata-server-1.4.2.tar.gz创建Seata的数据库及表&#xff0c;地址&#xff1a;https://github.com/seata/seata/tree/develop/script/server 根据数据类型复制相应的sql&…