【函数】JavaScript 全栈体系(七)
创始人
2025-05-29 11:08:21
0

JavaScript 基础

第十三章 函数

一、为什么需要函数

函数:

  • function,是被设计为执行特定任务的代码块

说明:

  • 函数可以把具有相同或相似逻辑的代码“包裹”起来,通过函数调用执行这些被“包裹”的代码逻辑,这么做的优势是有利于 精简代码方便复用。
  • 比如我们前面使用的 alert() 、 prompt() 和 console.log() 都是一些 js 函数,只不过已经封装好了,我们直接使用的 。

二、函数使用

函数可以把具有相同或相似逻辑的代码“包裹”起来,通过函数调用执行这些被“包裹”的代码逻辑,这么做的优势是有利于精简代码方便复用。

1. 声明(定义)

声明(定义)一个完整函数包括关键字、函数名、形式参数、函数体、返回值5个部分
在这里插入图片描述

2. 函数名命名规范

  • 和变量命名基本一致
  • 尽量小驼峰式命名法
  • 前缀应该为动词
  • 命名建议:常用动词约定

3. 调用

声明(定义)的函数必须调用才会真正被执行,使用 () 调用函数。


Document


注:函数名的命名规则与变量是一致的,并且尽量保证函数名的语义。

4. 案例

需求:

  1. 封装一个函数,计算两个数的和
  2. 封装一个函数,计算1-100之间所有数的和

Document


三、函数传参

通过向函数传递参数,可以让函数更加灵活多变,参数可以理解成是一个变量。

声明(定义)一个功能为打招呼的函数

  • 传入数据列表
  • 声明这个函数需要传入几个数据
  • 多个数据用逗号隔开

Document


总结:

  1. 声明(定义)函数时的形参没有数量限制,当有多个形参时使用 , 分隔
  2. 调用函数传递的实参要与形参的顺序一致

1. 形参和实参

形参:声明函数时写在函数名右边小括号里的叫形参(形式上的参数)

实参:调用函数时写在函数名右边小括号里的叫实参(实际上的参数)

形参可以理解为是在这个函数内声明的变量(比如 num1 = 10)实参可以理解为是给这个变量赋值

开发中尽量保持形参和实参个数一致


Document


2. 案例:函数封装求和

  • 需求:采取函数封装的形式:输入2个数,计算两者的和,打印到页面中

Document



Document


四、返回值

函数的本质是封装(包裹),函数体内的逻辑执行完毕后,函数外部如何获得函数内部的执行结果呢?要想获得函数内部逻辑的执行结果,需要通过 return 这个关键字,将内部执行结果传递到函数外部,这个被传递到外部的结果就是返回值。


Document


总结:

  1. 在函数体中使用return 关键字能将内部的执行结果交给函数外部使用
  2. 函数内部只能出现1 次 return,并且 return 下一行代码不会再被执行,所以return 后面的数据不要换行写
  3. return会立即结束当前函数
  4. 函数可以没有return,这种情况默认返回值为 undefined

Document

五、函数细节补充

两个相同的函数后面的会覆盖前面的函数
在Javascript中 实参的个数和形参的个数可以不一致

  • 如果形参过多 会自动填上undefined (了解即可)
  • 如果实参过多 那么多余的实参会被忽略 (函数内部有一个arguments,里面装着所有的实参)

函数一旦碰到return就不会在往下执行了 函数的结束用return


Document


1. 逻辑中断

开发中,还会见到以下的写法:
在这里插入图片描述

  • 短路:只存在于 && 和 || 中,当满足一定条件会让右边代码不执行
  • 原因:通过左边能得到整个式子的结果,因此没必要再判断右边
  • 运算结果:无论 && 还是 || ,运算结果都是最后被执行的表达式值,一般用在变量赋值

2. 转换为Boolean型

2.1 显式转换:

‘’、0、undefined、null、false、NaN 转换为布尔值后都是false, 其余则为 true

请添加图片描述

2.2 隐式转换:
  • 有字符串的加法 “” + 1 ,结果是 “1”
  • 减法 - (像大多数数学运算一样)只能用于数字,它会使空字符串 “” 转换为 0
  • null 经过数字转换之后会变为 0
  • undefined 经过数字转换之后会变为 NaN

请添加图片描述


Document


六、作用域

通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。

作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突。

1. 全局作用域

作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件

处于全局作用域内的变量,称为全局变量

2. 局部作用域

作用于函数内的代码环境,就是局部作用域。 因为跟函数有关系,所以也称为函数作用域。

处于局部作用域内的变量称为局部变量

如果函数内部,变量没有声明,直接赋值,也当全局变量看,但是强烈不推荐

但是有一种情况,函数内部的形参可以看做是局部变量。


Document


七、匿名函数

函数可以分为具名函数和匿名函数

匿名函数:没有名字的函数,无法直接使用。

1. 函数表达式

// 声明
let fn = function() { console.log('函数表达式')
}
// 调用
fn()

Document


2. 立即执行函数

场景介绍: 避免全局变量之间的污染

(function(){ xxx  })();
(function(){xxxx}());

注意: 多个立即执行函数要用 ; 隔开,要不然会报错

无需调用,立即执行,其实本质已经调用了

多个立即执行函数之间用分号隔开

第十四章 综合案例:转换时间

需求: 用户输入秒数,可以自动转换为时分秒

在这里插入图片描述
分析:
①: 用户输入总秒数 (注意默认值)
②:计算时分秒(封装函数) 里面包含数字补0
③:打印输出

计算公式:计算时分秒
小时: h = parseInt(总秒数 / 60 / 60 % 24)
分钟: m = parseInt(总秒数 / 60 % 60 )
秒数: s = parseInt(总秒数 % 60)


Document


相关内容

热门资讯

监控摄像头接入GB28181平... 流程简介将监控摄像头的视频在网站和APP中直播,要解决的几个问题是:1&...
Windows10添加群晖磁盘... 在使用群晖NAS时,我们需要通过本地映射的方式把NAS映射成本地的一块磁盘使用。 通过...
protocol buffer... 目录 目录 什么是protocol buffer 1.protobuf 1.1安装  1.2使用...
Fluent中创建监测点 1 概述某些仿真问题,需要创建监测点,用于获取空间定点的数据࿰...
educoder数据结构与算法...                                                   ...
MySQL下载和安装(Wind... 前言:刚换了一台电脑,里面所有东西都需要重新配置,习惯了所...
MFC文件操作  MFC提供了一个文件操作的基类CFile,这个类提供了一个没有缓存的二进制格式的磁盘...
在Word、WPS中插入AxM... 引言 我最近需要写一些文章,在排版时发现AxMath插入的公式竟然会导致行间距异常&#...
有效的括号 一、题目 给定一个只包括 '(',')','{','}'...
【Ctfer训练计划】——(三... 作者名:Demo不是emo  主页面链接:主页传送门 创作初心ÿ...