五、函数封装及调用、参数及返回值、作用域、匿名函数、立即执行函数

devtools/2024/11/16 9:29:57/
htmledit_views">

1. 函数基本使用

html"><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}span {display: inline-block;width: 70px;border: 1px solid lightcoral;padding-left: 5px;}</style>
</head><body><!-- 函数: 是可以被重复使用的代码块作用：把具有相同或相似逻辑的代码“包裹”起来，有利于代码复用--><!-- alert(),parseInt()都是函数的调用 --><script>/* for (let j = 1; j < 10; j++) {for (let i = 1; i <= j; i++) {document.write(<span>${i}*${j}=${i * j}</span>)}document.write('<br>') //换行标签} */// 封装九九乘法表function jiujiu() {let strI = ''for (let i = 1; i <= 9; i++) {let strJ = ''for (let j = 1; j <= i; j++) {strJ += `<span>${j}×${i}=${j * i}</span>`}strI += `<p>${strJ}</p>`}document.write(strI)}// 调用函数jiujiu()jiujiu()</script>
</body></html>

2. 函数参数及返回值

html"><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// 声明函数时小括号里的叫形参 → 接收数据用function sum(a, b) {// 想要把函数内部的计算结果拿到函数外面使用，就需要返回值// 返回值 返回的位置是函数调用的位置// return退出当前函数 下方代码不执行// 函数可以没有 return，这种情况函数默认返回值为 undefinedreturn a + b}// 调用函数时小括号里的叫实参 → 真实数据// 若函数无返回值，输出函数调用得到的结果为undefinedconsole.log(sum(1, 2))</script>
</body></html>

3. 参数注意事项

html"><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>function fn(stuID, name, age) {console.log(stuID, name, age)/* console.log(typeof stuID)console.log(typeof name)console.log(typeof age)console.log('----------') */}fn(1, 'Tom', 18) // 1 'Tom' 18// 传入数据顺序错误，不报错fn('Tom', 1, 18) // Tom 1 18// 开发中尽量形参和实参个数保持统一// 如果形参过多 会自动填上undefinedfn(1, 'Tom') // 1 'Tom' undefined// 如果实参过多 那么多余的实参会被忽略fn(1, 'Tom', 18, 80) // 1 'Tom' 18</script>
</body></html>

4. 逻辑中断

html"><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// || 或 一真则真，左边true右边中断function sum(x, y) {// console.log((x || 0) + (y || 0))x = x || 0y = y || 0console.log(x + y)}sum() // 0sum(1) // 1sum(2, 2) // 4</script>
</body></html>

5. 默认参数

html"><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// 计算100+用户输入的数字// 默认值：只会在缺少实参传递或者实参是undefined才会被执行// 函数定义时，默认参数放到必须传参的形参后边function sum(x, y = 0) {console.log(x + y)}sum(100) // 100sum(100, 20) // 120</script>
</body></html>

6. 数组求和

html"><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// 函数封装-数组求和function arrSum(arr) {let sum = 0for (let i = 0; i < arr.length; i++) {sum += arr[i]}return sum}// console.log(arrSum([1, 2, 3, 4, 5])) // 15// 用户输入的数字做累加let arr = []for (i = 1; ; i++) {let num = +prompt(`请输入数字${i}输入666则退出输入`)if (num === 666) {break} else {arr.push(num)}}console.log(arrSum(arr))</script>
</body></html>

7. 任意数组最大最小值

html"><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- <script>//封装函数，求任意数组的最大值function getMax(arr) {let max = arr[0]for (let i = 1; i < arr.length; i++) {if (max < arr[i]) {max = arr[i]}}console.log(max)}getMax([1, 23, 34, 6, 7, 8])</script> --><!-- debugger通过代码打断点，看完执行流程需要手动注释代码--><!-- 1. 封装函数，求任意数组中的最大值并返回这个最大值2. 封装函数，求任意数组中的最小值并返回这个最小值--><script>// 最大值// arrMax(arr)中的arr为形参 使得这个函数的灵活性更高function arrMax(arr) {let max = arr[0]for (let i = 1; i < arr.length; i++) {max = max > arr[i] ? max : arr[i]}return max}console.log(arrMax([1, 2, 5, 8, 12, 35, 34]))// 最小值function arrMin(arr) {let min = arr[0]for (let i = 1; i < arr.length; i++) {min = min < arr[i] ? min : arr[i]}return min}console.log(arrMin([1, 2, 5, 8, 12, 35, 34]))</script>
</body></html>

8. 判断数组是否存在某个元素 some

html"><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- 封装函数，判断数组是否存在某个元素，如果有则返回true，否则返回false --><!-- ①：函数封装 some，传递两个参数：元素和数组②：可以设置一个初始变量 flag 为 false③：如果能找到，则修改 flag 值为 true，则中断循环，找不到则不修改 flag④：返回 flag--><script>function some(arr, num) {let flag = falsefor (let i = 0; i < arr.length; i++) {if (arr[i] === num) {flag = truebreak}}return flag}console.log(some([1, 2, 4, 7, 24, 47, 56], 100))console.log(some([1, 2, 4, 7, 24, 47, 56, 100], 100))</script>
</body></html>

9. 查找元素在数组中的索引 findIndex

html"><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- 封装函数，查找元素在数组中的索引l。如果找到该元素（第一个元素即可），则返回该元素的索引号，找不到该元素则返回-1思路：①：函数封装findlndex，传递两个参数：元素和数组②：可以设置一个初始变量 index 为-1③：如果能找到，则修改index值为当前索引号，则中断循环，找不到则不修改index④：返回index--><script>let names = ['小红', '小明', '大强']function findIndex(e1, arr = []) {let index = -1for (let i = 0; i < arr.length; i++) {if (arr[i] === e1) {index = ibreak}}return index}console.log(findIndex('小明', names))</script>
</body></html>

10. 作用域

html"><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- 作用域：变量或者值在代码中可用性的范围 --><!-- 作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。 --><!-- 1. 全局作用域 script 标签或者js文件 → 全局变量2. 局部作用域 函数作用域和块级作用域{} → 局部变量块级作用域{}（let const）--><!-- 注意：函数内部不声明直接赋值的变量当全局变量，不提倡函数内部的形参可以当做局部变量看--><script>let num = 10console.log('函数外', num)function fn() {// 先使用后调用 报错console.log('函数内', num)let num = 100}fn()// 作用域链（就近原则）/*在函数被执行时，会优先查找当前函数作用域中查找变量如果当前作用域查找不到则会逐级向上查找父级作用域直到全局作用域都找不到则提示错误，这个变量没有被定义过*/</script>
</body></html>

11. 匿名函数

11.1 函数表达式

html"><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- 有名函数 → 具名函数 --><!-- 匿名函数 function(){}两种使用方式：函数表达式、立即执行函数   --><script>/* 函数表达式：将匿名函数赋值给一个变量，并且通过变量名称进行调用函数表达式必须先定义，后使用*/let fn = function () {console.log('匿名函数')}fn()</script>
</body></html>

11.2 立即执行函数

html"><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- 立即执行函数，避免全局变量之间的污染注意：多个立即执行函数要用 ; 隔开，要不然会报错立即执行函数可以传参,立即执行函数可以添加函数名--><!-- JS写分号代表结束 --><script>// 1. (匿名函数)()(function () {console.log('(匿名函数)()')})();// 2. (匿名函数())(function () {console.log('(匿名函数())')}());</script>
</body></html>

12. 案例-手风琴

重要代码第85行

html"><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.container {display: flex;justify-content: space-around;flex-direction: column;align-items: center;height: 100vh;padding: 0 20px;}.one {width: 760px;height: 260px;border: 1px solid #000;}.two {width: 640px;height: 260px;border: 1px solid #000;}.box {display: flex;overflow: hidden;height: 260px;}.box>div {width: 120px;border: 1px solid #fff;transition: all 0.5s;}.box>div:hover {width: 400px;}</style>
</head><body><div class="container"><div class="one"><!-- <div class="box"><div><img src="./images/1.jpg" alt=""></div><div><img src="./images/2.jpg" alt=""></div><div><img src="./images/3.jpg" alt=""></div><div><img src="./images/4.jpg" alt=""></div><div><img src="./images/5.jpg" alt=""></div><div><img src="./images/6.jpg" alt=""></div><div><img src="./images/7.jpg" alt=""></div></div> --></div><div class="two"></div></div><script>let arr = ['./images/1.jpg','./images/2.jpg','./images/3.jpg','./images/4.jpg',]let arr2 = ['./images/5.jpg','./images/6.jpg','./images/7.jpg',]function getAccordion(array) {let str = ''for (let i = 0; i < array.length; i++) {str += `<div><img src="${array[i]}" alt=""></div>`}return `<div class="box">${str}</div>`}document.querySelector('.one').innerHTML = getAccordion(arr)document.querySelector('.two').innerHTML = getAccordion(arr2)</script>
</body></html>

13. 作业

13.1 封装 everyLessThan 函数

html"><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- 用于检测数组所有元素是否都满足小于某个数值--><script>// 1. everyLessThan 函数声明function everyLessThan(arr = [], num) {// 补充代码let elt = truefor (let i = 0; i < arr.length; i++) {if (arr[i] >= num) {elt = falsebreak}}return elt}// 2. everyLessThan 函数的调用console.log(everyLessThan([10, 20, 30], 25)) // falseconsole.log(everyLessThan([1, 2, 3], 5)) // true</script>
</body></html>

13.2 封装求和或平均值函数

html"><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- 函数可以传递 2 个参数，比如 sumOrAvage(arr, true)参数一： 接受实参传递过来的数组参数二:  布尔类型如果是true或者不传递参数 是求和操作如果传递过来的参数是 false 则是求平均值sumOrAvage 函数内，将计算的结果进行返回--><script>function sumOrAvage(arr = [], isSum) {let sum = 0for (let i = 0; i < arr.length; i++) {sum += arr[i]}if (isSum !== false) {return sum} else {return sum / arr.length}}// 第二个参数布尔值true，表示求和console.log(sumOrAvage([1, 2, 3], true)) // 6// 第二个参数不传，也是默认求和console.log(sumOrAvage([1, 2, 3])) // 6// 第二个参数布尔值false，表示求平均值console.log(sumOrAvage([1, 2, 3], false)) // 2</script>
</body></html>

13.3 待办任务-二次开发题

html"><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./css/index.css">
</head><body><div class="main"><h3>待办任务</h3><!-- 新增任务按钮 --><a href="html" title=javascript>javascript:;" onclick="add()" class="icon">+</a><ul><!-- <li><p>xxxxxx</p><a class="close" href="html" title=javascript>javascript:;" onclick="del()">×</a></li> --></ul></div><script>let arr = ['学习html" title=javascript>javascript', '学习Vue', '学习React']// 新增功能function add() {arr.push(prompt('请输入你的待办任务'))fn()}// 删除功能function del(index) {arr.splice(index, 1)// console.log(index)// console.log(arr)fn()}// 渲染function fn() {let str = ''for (let i = 0; i < arr.length; i++) {str += `<li><p>${arr[i]}</p><a class="close" href="html" title=javascript>javascript:;" onclick="del(${i})">×</a></li>`}document.querySelector('.main ul').innerHTML = str}fn()</script>
</body></html>

http://www.ppmy.cn/devtools/134393.html

相关文章

单片机智能家居火灾环境安全检测

单片机智能家居火灾环境安全检测

目录 前言 一、本设计主要实现哪些很“开门”功能&#xff1f; 二、电路设计原理图 电路图采用Altium Designer进行设计&#xff1a; 三、实物设计图 四、程序源代码设计 五、获取资料内容 前言 在现代社会&#xff0c;火灾安全始终是人们关注的重点问题。随着科技的不…
阅读更多...
比特大陆/算能科技嵌入式面试题及参考答案

比特大陆/算能科技嵌入式面试题及参考答案

请描述 ubuntu 系统启动的过程。 当按下计算机电源按钮后，计算机硬件开始自检，这个过程是由 BIOS（或 UEFI）来执行的。BIOS 会检查硬件设备是否正常工作，如内存、硬盘等。之后，BIOS 会按照预设的启动顺序查找可引导的设备。 一旦找到包含 Ubuntu 系统的存储设备（如硬盘）…
阅读更多...
【Rust设计模式之新类型模式】

【Rust设计模式之新类型模式】

Rust设计模式之新类型模式 前言代码总结 前言 类型驱动一节中有提及过新类型模式&#xff0c;新类型模式是类型驱动的一种方式&#xff0c;主要是通过新类型的封装让使用者不用考虑原来类型的细节&#xff0c;也保证了privacy&#xff0c;从而避免不必要的bug&#xff0c;如开…
阅读更多...
Ubuntu22.04.2 k8s部署

Ubuntu22.04.2 k8s部署

k8s介绍 简单介绍 通俗易懂的解释&#xff1a; Kubernetes&#xff08;也被称为 K8s&#xff09;就像是一个大管家&#xff0c;帮你管理你的云计算服务。想象一下&#xff0c;你有很多个小程序&#xff08;我们称之为“容器”&#xff09;&#xff0c;每个都在做不同的事情&…
阅读更多...
java 根据 pdf 模板带图片文字生成pdf文件

java 根据 pdf 模板带图片文字生成pdf文件

在现代应用开发中，自动生成包含动态内容的 PDF 文档在电子发票、合同生成、表单填充等场景中有着广泛的应用。本文将介绍如何使用 iText 库动态填充 PDF 模板字段，并在指定位置插入签名和公章图片。 项目需求 假设我们有一个 PDF 模板文件，包含表单字段，如用户姓名、地址…
阅读更多...
C#从入门到放弃

C#从入门到放弃

C#和.NET的区别 C# C#是一个编程语言 .NET .NET是一个在window下创建程序的框架 .NET框架不仅局限于C#,它还可以支持很多语言 .NET包括了2个组件&#xff0c;一个叫CLR(通用语言运行时)&#xff0c;另一个是用来构建程序的类库 CLR 用C写一个程序&#xff0c;在一台8688的机器…
阅读更多...
如何利用必盈接口在 C#中完成股票量化程序

如何利用必盈接口在 C#中完成股票量化程序

一、引言 在股票市场中&#xff0c;量化交易越来越受到关注。通过利用必盈接口&#xff0c;我们可以在 C#环境下构建股票量化程序&#xff0c;获取丰富的股票数据来支持交易策略的设计与执行。以下将详细介绍利用必盈接口在 C#中实现股票量化程序的步骤。 二、必盈接口概述 必盈…
阅读更多...
模型减肥秘籍：模型压缩技术 模型剪枝

模型减肥秘籍：模型压缩技术 模型剪枝

教程链接&#xff1a;模型减肥秘籍&#xff1a;模型压缩技术-课程详情 | Datawhale 相应的教程代码&#xff1a;datawhalechina/awesome-compression: 模型压缩的小白入门教程 模型剪枝介绍 模型剪枝是模型压缩中一种重要的技术&#xff0c;其基本思想是将模型中不重要的权重…
阅读更多...
最新文章

Copyright @ 2022~2023