2024年 前端JavaScript入门到精通 第四天 笔记

4.1 函数的基本使用以及封装练习

4.2 函数的参数以及默认参数

函数的灵魂!!!

4.3 函数封装数组求和案例

4.4 函数返回值return

4.5 函数返回值细节以及上午总结

4.6 函数返回值案例-求最大值和最

4.7 函数复习以及断点进入函数

4.8 作用域

4.9 变量的访问原则

4.10 匿名函数之函数表达式

4.11 匿名函数之立即执行函数

4.12 综合家例-封装计算时间函数

4.13 逻辑中断

4.14 转换为布尔型以及作业

客观题

PC端地址:https://ks.wjx.top/vm/mC2UvoL.aspx#

主观题

练习题1:

请看以下代码,并说出执行的流程~~~

function printfInput(content) { 
    // 将用户输入的内容, 在页面中显示
    document.write(content)
}
let constr = prompt('请输入内容')
printfInput(constr)

练习题2:

目标:求和函数封装练习

要求:

  1. 封装函数, 名字为sum
  2. 功能: 根据传入的两个数,求和并且返回求和的结果(函数必须有return返回值)

练习题3:

目的:  封装函数, 复习函数的基本写法。

需求:实现两个数的值交换(函数版本)

分析:

  1. 函数名为 changeNum()
  2. 调用函数时,  changeNum(1,2)
  3. 经过函数内部处理后,输出  第一个值的结果是2 第二个值的结果是1
  4. 可以多调用两次

练习题4:

目的: 复习函数的声明与调用

题目:封装余额函数

要求:

  1. 运行程序后, 浏览器显示输入确认框(prompt)
  2. 第一个输入确认框提示输入银行卡余额
  3. 第二个输入确认框提示输入当月食宿消费金额
  4. 第三个输入确认框提示输入当月生活消费金额
  5. 输入完毕后,在页面中显示银行卡剩余金额
  6. 提示: 所有功能代码封装在函数内部(函数需要把余额返回)

练习题5:

目标: 封装一个函数,可以求任意数组的和 或 平均值

要求:

  • 函数可以传递2个参数,比如  handleData(arr, true)      handleData 处理数据的意思
    • 参数一: 接受实参传递过来的数组
    • 参数二:    布尔类型  如果是true或者不传递参数 是求和操作,   如果传递过来的参数是 false 则是求平均值

拓展题1

需求:  封装 some 函数查看数组是否存在某个元素  。

  • 要传递2个参数 元素、数组
  • 如果数组存在元素则返回true,如果没有存在元素就返回 false

例如检测 香蕉  是否存在于  数组['苹果', '香蕉', '橘子', '荔枝', '梨子']中, 返回结果是 true

格式如下:

 function some(ele, arr = []) {
	// 里面写业务逻辑
 }
let re = some('荔枝', ['苹果', '香蕉', '橘子', '荔枝', '梨子'])
console.log(re) // true
let re1 = some('榴莲', ['苹果', '香蕉', '橘子', '荔枝', '梨子'])
console.log(re1) // false

拓展题2

需求:  封装 findeIndex 函数返回查找元素在数组中的索引号。

  • 要传递2个参数 元素、数组
  • 如果找到,则返回查找元素在数组中的索引号,如果查找不到,则返回 -1

例如检测 香蕉    数组['苹果', '香蕉', '橘子', '荔枝', '梨子']中, 返回结果是  1

格式如下:

 <script>
    // 封装函数返回元素的下标  [1, 5, 10, 22, 8, 7]
    // 1. 封装函数 findIndex,传递2个参数 元素、数组
    function findIndex(ele, arr = []) {
     	// 里面写业务逻辑
    }
    let index1 = findIndex(10, [1, 5, 10, 22, 8, 7])
    console.log(index1) // 2
    let index2 = findIndex(8, [1, 5, 10, 22, 8, 7])
    console.log(index2) // 4
    let index3 = findIndex(88, [1, 5, 10, 22, 8, 7])
    console.log(index3) // -1
  </script>

排错题

排错题1

<!-- bug:请你找到代码返回NaN的原因,并进行修改 -->
<body>
  <script>
    // 请返回一个数字型的结果 可以使用默认参数或者逻辑中断都可以
    function fn(x, y) {
      console.log(x + y)
    }
    fn(1)
  </script>
</body>

排错题2

<!-- bug:请你找到下面代码的2处错误,并进行修改过来-->
<body>
  <script>
    // 任意数组求和案例
    function getsumArr(arr) {
      let sum = 0
      for (let i = 0; i < arr.legnth; i++) {
        sum + arr[i]
      }
      return sum
    }
    console.log(getsumArr([10, 20, 30, 40]))
  </script>
</body>

-----底部---

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

5个精美的wordpress中文企业主题模板

元宇宙WordPress主题模板 简洁大气的元宇宙 Metaverse WordPress主题模板&#xff0c;适合元宇宙行业的企业官网使用。 https://www.jianzhanpress.com/?p3292 职业技术培训WordPress主题模板 简洁大气的职业技术培训WordPress主题&#xff0c;适合用于搭建教育培训公司官方…

政安晨:【示例演绎机器学习】(三)—— 神经网络的多分类问题示例 (新闻分类)

政安晨的个人主页&#xff1a;政安晨 欢迎 &#x1f44d;点赞✍评论⭐收藏 收录专栏: 政安晨的机器学习笔记 希望政安晨的博客能够对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让小伙伴们一起学习、交流进步&#xff0c;不论是学业还是工…

简单几步通过DD工具把云服务器系统Linux改为windows

简单几部通过DD安装其他系统&#xff0c;当服务器的web控制台没有我们要装的系统&#xff0c;就需要通过DD&#xff08;Linux磁盘&#xff09;工具来更改系统&#xff0c;&#xff08;已知支持KVM系统&#xff09; 本文如何简单的更换系统&#xff0c;不通过web控制台来更换&a…

蓝桥 算法训练 粘木棍(C++)

问题描述 有N根木棍&#xff0c;需要将其粘贴成M个长木棍&#xff0c;使得最长的和最短的的差距最小。 输入格式 第一行两个整数N,M。   一行N个整数&#xff0c;表示木棍的长度。 输出格式 一行一个整数&#xff0c;表示最小的差距 样例输入 3 2 10 20 40 样例输出 10…

Excel面试题及答案(1)

1.辅助列添加,快速填充方式填充隔行的编号;定位条件定位到空值后,右击---插入整行 2.利用通配符计算A3:A9含有车间的单元格个数(保留计算公式)。 3.利用身份证号提取 “性别”、“年月日”、“年龄” 性别:利用mid()方法,添加了一列辅助列,根据提取身份证后面第2位…

十八、图像像素类型转换和归一化操作

项目功能实现&#xff1a;对一张图像进行类型转换和归一化操作 按照之前的博文结构来&#xff0c;这里就不在赘述了 一、头文件 norm.h #pragma once#include<opencv2/opencv.hpp>using namespace cv;class NORM { public:void norm(Mat& image); };#pragma once二…

大语言模型的开山之作—探秘GPT系列:GPT-1-GPT2-GPT-3的进化之路

模型模型参数创新点评价GPT1预训练微调&#xff0c; 创新点在于Task-specific input transformations。GPT215亿参数预训练PromptPredict&#xff0c; 创新点在于Zero-shotZero-shot新颖度拉满&#xff0c;但模型性能拉胯GPT31750亿参数预训练PromptPredict&#xff0c; 创新点…

洛谷P3371【模板】单源最短路径(弱化版)(RE版本和AC版本都有,这篇解析很长但受益匪浅)

解释一下什么叫邻接矩阵&#xff1a; 假设有以下无向图&#xff1a; 1/ \2---3/ \ / \4---5---6对应的邻接矩阵为&#xff1a; 1 2 3 4 5 6 1 0 1 1 0 0 0 2 1 0 1 1 1 0 3 1 1 0 0 1 1 4 0 1 0 0 1 0 5 0 1 1 1 0 1 6 0 0 1 0 1 0 …

SpringCloud全家桶---常用微服务组件(1)

注册中心: *作用: 服务管理 Eureka(不推荐)[读音: 优瑞卡] Nacos(推荐) Zookeeper [读音: 如k波] Consul [读音:康寿] **注册中心的核心功能原理(nacos)** 服务注册: 当服务启动时,会通过rest接口请求的方式向Nacos注册自己的服务 服务心跳: NacosClient 会维护一个定时心跳持…

【Python笔记-设计模式】原型模式

一、说明 原型模式是一种创建型设计模式&#xff0c; 用于创建重复的对象&#xff0c;同时又能保证性能。 使一个原型实例指定了要创建的对象的种类&#xff0c;并且通过拷贝这个原型来创建新的对象。 (一) 解决问题 主要解决了对象的创建与复制过程中的性能问题。主要针对…

【stm32】hal库-双通道ADC采集

【stm32】hal库-双通道ADC采集 CubeMX图形化配置 程序编写 /* USER CODE BEGIN PV */ #define BATCH_DATA_LEN 1 uint32_t dmaDataBuffer[BATCH_DATA_LEN]; /* USER CODE END PV *//* USER CODE BEGIN 2 */lcd_init();lcd_show_str(10, 10, 24, "Demo14_4:ADC1 ADC2 S…

SpringCloud(15)之SpringCloud Gateway

一、Spring Cloud Gateway介绍 Spring Cloud Gateway 是Spring Cloud团队的一个全新项目&#xff0c;基于Spring 5.0、SpringBoot2.0、 Project Reactor 等技术开发的网关。旨在为微服务架构提供一种简单有效统一的API路由管理方式。 Spring Cloud Gateway 作为SpringCloud生态…

文件上传---->生僻字解析漏洞

现在的现实生活中&#xff0c;存在文件上传的点&#xff0c;基本上都是白名单判断&#xff08;很少黑名单了&#xff09; 对于白名单&#xff0c;我们有截断&#xff0c;图片马&#xff0c;二次渲染&#xff0c;服务器解析漏洞这些&#xff0c;于是今天我就来补充一种在upload…

银河麒麟桌面版操作系统修改主机名

1图形化方式修改 1.1在计算机图标上右键&#xff0c;选择属性 1.2修改 1.2.1点击修改计算机名 选择玩属性后会自动跳转到关于中&#xff0c;在计算机名中点击修改图标本质就是设置里面的系统下的关于&#xff0c;我们右键计算机选择属性就直接跳转过来了 1.2.2修改系统名字 …

【Spring】SpringBoot 日志文件

目 录 一.日志有什么用&#xff1f;二.日志怎么用&#xff1f;三.自定义日志打印四.日志持久化五.日志级别六.更简单的日志输出—lombok 日志的主要掌握内容&#xff1a; 输出自定义日志信息 将日志持久化 通过设置日志的级别来筛选和控制日志的内容 一.日志有什么用&#…

YOLOv8改进 | Conv篇 | 利用YOLOv9的GELAN模块替换C2f结构(附轻量化版本 + 高效涨点版本 + 结构图)

一、本文介绍 本文给大家带来的改进机制是利用2024/02/21号最新发布的YOLOv9其中提出的GELAN模块来改进YOLOv8中的C2f,GELAN融合了CSPNet和ELAN机制同时其中利用到了RepConv在获取更多有效特征的同时在推理时专用单分支结构从而不影响推理速度,同时本文的内容提供了两种版本…

集合框架之List集合

目录 ​编辑 一、什么是UML 二、集合框架 三、List集合 1.特点 2.遍历方式 3.删除 4.优化 四、迭代器原理 五、泛型 六、装拆箱 七、ArrayList、LinkedList和Vector的区别 ArrayList和Vector的区别 LinkedList和Vector的区别 一、什么是UML UML&#xff08;Unif…

Flask——基于python完整实现客户端和服务器后端流式请求及响应

文章目录 本地客户端Flask服务器后端客户端/服务器端流式接收[打字机]效果 看了很多相关博客&#xff0c;但是都没有本地客户端和服务器后端的完整代码示例&#xff0c;有的也只说了如何流式获取后端结果&#xff0c;基本没有讲两端如何同时实现流式输入输出&#xff0c;特此整…

Nginx基础入门

一、Nginx的优势 nginx是一个高性能的HTTP和反向代理服务器&#xff0c;也是一个SMTP&#xff08;邮局&#xff09;服务器。 Nginx的web优势&#xff1a;IO多路复用&#xff0c;时分多路复用&#xff0c;频分多路复用 高并发&#xff0c;IO多路复用&#xff0c;epoll&#xf…

备战蓝桥杯---基础算法刷题1

最近在忙学校官网上的题&#xff0c;就借此记录分享一下有价值的题&#xff1a; 1.注意枚举角度 如果我们就对于不同的k常规的枚举&#xff0c;复杂度直接炸了。 于是我们考虑换一个角度&#xff0c;我们不妨从1开始枚举因子&#xff0c;我们记录下他的倍数的个数sum个&#…