【 JS 】函数

生命如潮,不断奔向远方的海洋。每一个潮起潮落,都是奋斗的旋律;每一片浪花,都是梦想的飞扬。勇往直前,扬帆远航,生命的航程注定精彩非凡。 - 林肯

目标

理解封装的意义,能够通过函数的声明实现逻辑的封装,知道对象数据类型的特征,结合数学对象实现简单计算功能。

  • 理解函数的封装的特征
  • 掌握函数声明的语法
  • 理解什么是函数的返回值
  • 知道并能使用常见的内置函数

函数

理解函数的封装特性,掌握函数的语法规则

声明和调用

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

声明(定义)

声明(定义)一个完整函数包括关键字、函数名、形式参数、函数体、返回值5个部分

调用

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 声明和调用</title>
</head>
<body><script>// 声明(定义)了最简单的函数,既没有形式参数,也没有返回值function sayHi() {console.log('嗨~')}// 函数调用,这些函数体内的代码逻辑会被执行// 函数名()sayHi()// 可以重复被调用,多少次都可以sayHi()</script>
</body>
</html>

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

小案例: 小星星

<script>// 函数声明function sayHi() {// document.write('hai~')document.write(`*<br>`)document.write(`**<br>`)document.write(`***<br>`)document.write(`****<br>`)document.write(`*****<br>`)document.write(`******<br>`)document.write(`*******<br>`)document.write(`********<br>`)document.write(`*********<br>`)}// 函数调用sayHi()sayHi()sayHi()sayHi()sayHi()</script>

参数

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

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

  • 传入数据列表
  • 声明这个函数需要传入几个数据
  • 多个数据用逗号隔开
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 函数参数</title>
</head>
<body><script>// 声明(定义)一个功能为打招呼的函数// function sayHi() {//   console.log('嗨~')// }// 调用函数// sayHi()// 这个函数似乎没有什么价值,除非能够向不同的人打招呼// 这就需要借助参数来实现了function sayHi(name) {// 参数 name 可以被理解成是一个变量console.log(name)console.log('嗨~' + name)}// 调用 sayHi 函数,括号中多了 '小明'// 这时相当于为参数 name 赋值了sayHi('小明')// 结果为 小明// 再次调用 sayHi 函数,括号中多了 '小红'// 这时相当于为参数 name 赋值了sayHi('小红') // 结果为 小红</script>
</body>
</html>

总结:

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

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 函数参数</title>
</head>
<body><script>// 声明(定义)一个计算任意两数字和的函数// 形参 x 和 y 分别表示任意两个数字,它们是两个变量function count(x, y) {console.log(x + y);}// 调用函数,传入两个具体的数字做为实参// 此时 10 赋值给了形参 x// 此时 5  赋值给了形参 ycount(10, 5); // 结果为 15</script>
</body>
</html>

返回值

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 函数返回值</title>
</head>
<body><script>// 定义求和函数function count(a, b) {let s = a + b// s 即为 a + b 的结果// 通过 return 将 s 传递到外部return s}// 调用函数,如果一个函数有返回值// 那么可将这个返回值赋值给外部的任意变量let total = count(5, 12)</script>
</body>
</html>

总结:

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

作用域

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

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

全局作用域

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

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

局部作用域

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

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

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

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

匿名函数

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

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

函数表达式
// 声明
let fn = function() { console.log('函数表达式')
}
// 调用
fn()
立即执行函数
(function(){ xxx  })();
(function(){xxxx}());

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

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

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

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

相关文章

通过mybatis拦截器给sql执行加一个耗时监控

代码没什么内容&#xff0c;直接贴上来吧&#xff0c;其中costTimeUtil可以看我的另一篇博文&#xff1a;java实现一个不带次数变量的加权平均值算法-CSDN博客 Slf4j Intercepts({Signature(type StatementHandler.class,method "query",args {Statement.class, …

1Panel CloudFlare证书申请失败的解决方案

在升级1Panel后&#xff0c;使用 CloudFlare DNS验证时&#xff0c;会提示 [*.biliwind.com] [*.biliwind.com] acme: error presenting token: cloudflare: failed to find zone biliwind.com.: ListZonesContext command failed: Invalid request headers (6003) 为解决此问…

系统分析师-21年-论文试题

系统分析师-21年-论文试题 更多软考知识请访问 https://ruankao.blog.csdn.net/ 题目任选其一 摘要字数在400字以内&#xff0c;可以分条叙述&#xff0c;但不允许有图、表、流程图。 正文字数为2000字至300字&#xff0c;文中可以分条叙述&#xff0c;但不要全部用分条叙述…

2023年全球软件开发大会(QCon广州站2023):核心内容与学习收获(附大会核心PPT下载)

在全球化的科技浪潮中&#xff0c;软件开发行业日新月异&#xff0c;持续推动着社会经济的飞速发展。本次峰会以“引领未来&#xff0c;探索无限可能”为主题&#xff0c;聚焦软件开发领域的最新技术、最佳实践和创新思想。来自世界各地的顶级专家、企业领袖和开发者齐聚一堂&a…

防范[myers@airmail.cc].mkp攻击:解密[myers@airmail.cc].mkp勒索病毒的方法

引言&#xff1a; 随着科技的迅猛发展&#xff0c;网络安全问题日益突出&#xff0c;而勒索病毒也成为当前互联网威胁中的一大焦点。其中&#xff0c;[datastorecyberfear.com].mkp [hendersoncock.li].mkp [hudsonLcock.li].mkp[myersairmail.cc].mkp勒索病毒以其强大的加密能…

LeetCode第523题 - 连续的子数组和

题目 给定一个包含非负数的数组和一个目标整数 k&#xff0c;编写一个函数来判断该数组是否含有连续的子数组&#xff0c;其大小至少为 2&#xff0c;总和为 k 的倍数&#xff0c;即总和为 n*k&#xff0c;其中 n 也是一个整数。 示例 1: 输入: [23,2,4,6,7], k 6 输出: True …

什么是防抖和节流?有什么区别?如何实现?

文章目录 一、是什么定义代码实现节流防抖 二、区别三、应用场景 一、是什么 本质上是优化高频率执行代码的一种手段 如&#xff1a;浏览器的 resize、scroll、keypress、mousemove 等事件在触发时&#xff0c;会不断地调用绑定在事件上的回调函数&#xff0c;极大地浪费资源…

gitee 轻量级pr怎么操作

Gitee 轻量级 PR&#xff08;Gitee Pull Request Lite&#xff09;是一种无须 Fork 仓库&#xff0c;即可快速向某个特定仓库创建并提交一个合并请求&#xff08;Pull Request&#xff09;的功能。只需在 Web 端完成代码贡献&#xff0c;就能一键向开源仓库提出 PR 请求&#x…

与供应商无关的 SOAR 在克服孤立的安全挑战中的作用

孤立安全是指不同的安全工具和流程独立运行&#xff0c;它们之间没有有效的通信或数据共享的情况。这种分散的方法在许多组织中很常见&#xff0c;通常是由于随着时间的推移逐渐采用安全解决方案&#xff0c;每个解决方案都根据其特定功能进行选择&#xff0c;而不考虑整体集成…

大模型-迭代优化文本概括

迭代优化 在编写 Prompt 以使用 LLM 开发应用程序时&#xff0c;首先要有关于要完成的任务的想法&#xff0c;可以尝试编写第一个 Prompt&#xff0c;满足上一章说过的两个原则&#xff1a;清晰明确&#xff0c;并且给系统足够的时间思考。然后运行它并查看结果。如果第一次效…

【hcie-cloud】【23】容器编排【k8s】【Kubernetes常用工作负载、Kubernetes调度器简介、Helm简介、缩略词】【下】

文章目录 单机容器面临的问题、Kubernetes介绍与安装、Kubernetes对象的基本操作、Kubernetes YAML文件编写基础Kubernetes常用工作负载Kubernetes常用工作负载简介创建一个无状态nginx集群无状态工作负载Deployment说明无状态工作负载Deployment常见操作创建一个有状态的MySQL…

04 Redis之命令(Hash型Value命令+List型Value命令+Set型Value命令+有序集合ZSET型Value命令)

3.4 Hash型Value命令 Hash 表就是一个映射表 Map&#xff0c;也是由键-值对构成&#xff0c;为了与整体的 key 进行区分&#xff0c;这里的键称为 field&#xff0c;值称为 value。注意&#xff0c;Redis 的 Hash 表中的 field-value 对均为 String 类型。 3.4.1 hset  格…

第一个hello驱动

Linux驱动程序的分类 字符设备驱动、块设备驱动和网络设备驱动。 Linux驱动程序运行方式 把驱动程序编译进内核里面&#xff0c;这样内核启动后就会自动运行驱动程序了&#xff1b;把驱动程序编译成以.ko为后缀的模块文件&#xff0c;然后在Linux启动后&#xff0c;我们自己…

微信小程序(二十一)css变量-定义页面主题色

注释很详细&#xff0c;直接上代码 上一篇 新增内容&#xff1a; 1.使用css变量 2.消除按钮白块影响 3.修改图标样式 源码&#xff1a; npmTest.json {"navigationStyle": "custom","usingComponents": {//引入vant组件"van-nav-bar"…

Pg分区表配置与实现

数据库加速查询的方法&#xff0c;包括添加索引&#xff0c;调整数据库引擎的参数&#xff0c;将日志目录放单独的磁盘分区等。实际应用中&#xff0c;历史数据会随着时间推移逐渐增多&#xff0c;且重要性逐渐降低&#xff0c;但又不能轻易删除。此时可考虑将该表按某个时间字…

[libwebsockets]lighttpd+libwebsockets支持ws和wss配置方法说明

libwebsockets介绍 libwebsockets是一款轻量级用来开发服务器和客户端的C库。它不仅支持ws,wss还同时支持http与https,可以轻轻松松结合openssl等库来实现ssl加密。 官方参考链接: https://libwebsockets.org/ lighttpd版本 lighttpd/1.4.59 (ssl) - a light and fast w…

Linux多线程——线程池

本章Gitee仓库&#xff1a;线程池、单例模式 文章目录 1. 池化技术简述2. 线程池3. 单例模式3.1 单例模式特点3.2 饿汉方式和懒汉方式3.3 单例模式线程安全 1. 池化技术简述 C中的STL&#xff0c;当空间不够时&#xff0c;会自动扩容&#xff0c;这个并不是我们需要多少&#…

sqli-labs闯关

目录 1.安装靶场2.了解几个sql常用知识2.1联合查询union用法2.2MySQL中的通配符&#xff1a;2.3常用函数2.4数据分组 3.mysql中重要的数据库和表4.开始闯关4.1 Less-14.1.1 首先进行一次常规的注入4.1.2 深入解析 1.安装靶场 1.首先推荐使用github下载靶场源码 https://githu…

Matlab处理excel数据

我们新建个excel文档&#xff0c;用Matlab读取里面的内容&#xff0c;计算和判断里面的计算结果是否正确&#xff0c;并打印到另一个文档当中。 新建文档 新建输入文档&#xff0c;文件名TestExcel 编写脚本 [num,txt] xlsread(TestExcel.xlsx); SNcode num(:,1);%从序号中…

《微信小程序开发从入门到实战》学习九十六

7.2 基础内容组件 7.2.4 progress组件 progress组件的示例代码如下&#xff1a; <progress percent"20" show-info /> 7.3 表单组件 表单组件是用于收集信息的组件。第三章介绍了许多表单组件&#xff0c;包括form、input、textarea、picker、switch、butt…