JavaScript-函数

学习目标：

  • 掌握函数

学习内容：

  1. 为什么需要函数
  2. 函数使用
  3. 函数传参
  4. 函数返回值
  5. 函数细节补充
  6. 函数作用域
  7. 匿名函数
  8. 案例

为什么需要函数：

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

函数使用：

  • 函数的声明语法
function 函数名（）{函数体
}
  • 函数的调用语法
//函数调用，这些函数体内的代码逻辑会被执行
函数名()

注意：声明（定义）的函数必须调用才会真正被执行，使用（）调用函数。
我们曾经使用的alert()，parseInt()这种名字后面跟小括号的本质都是函数的调用。

  • 函数体
    函数体是函数的构成部分，它负责将相同或相似代码“包裹”起来，直到函数调用时函数体内的代码才会被执行。函数的功能代码都要写在函数体当中。
 <title>函数-函数使用</title>
</head><body><script>//1.函数声明function sayHi() {console.log('hi~~') //函数体}//2.函数调用  函数不调用，自己不执行sayHi()</script></body>
  • 函数名命名规范
  1. 和变量命名基本一致。
  2. 尽量小驼峰式命名法。
  3. 前缀应该为动词。
  4. 命名建议：常用动词约定。
动词含义
can判读是否可执行某个动作
has判断是否含义某个值
is判断是否为某个值
get获取某个值
set设置某个值
load加载某些数据
  • 函数的复用代码和循环重复代码有什么不同？
  1. 循环代码写完即执行，不能很方便控制执行位置。
  2. 函数，随时调用，随时执行，可重复调用。
  • 案例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>函数-函数案例</title>
</head><body><script>//1.计算两个数的和// function getSum() {//   let num1 = +prompt('请输入第一个数：')//   let num2 = +prompt('请输入第二个数：')//   console.log(num1 + num2)// }// getSum()//2.计算1-100之间所有数的和function getSum() {let sum = 0for (let i = 1; i <= 100; i++) {// sum = sum + isum += i}console.log(sum)}getSum()</script></body></html>

函数传参：

  • 声明语法
function 函数名(参数列表){函数体}

参数列表：

  1. 传入数据列表。
  2. 声明这个函数需要传入几个数据。
  3. 多个数据用逗号隔开。
  • 调用语法
函数名（传递的参数列表)

调用函数时，需要传入几个数据就写几个，用逗号隔开。

  • 形参和实参
<title>函数-函数参数</title>
</head><body><script>// function getSum(end) {  //end = 50//   let sum = 0//   for (let i = 1; i <= end; i++) {//     sum += i//   }//   console.log(sum)// }// getSum(50) //1-50// getSum(100) //1-100function getSum(start, end) {  //end = 50  形参： 形式上的参数let sum = 0for (let i = start; i <= end; i++) {sum += i}console.log(sum)}getSum(1, 50) //1-50  调用的小括号里面  实参 ：实际的参数getSum(1, 100) //1-100</script></body>
  1. 形参：声明函数时写在函数名右边小括号里的叫形参。（形式上的参数）
  2. 实参：调用函数时写在函数名右边小括号里的叫实参。（实际上的参数）
  3. 形参可以理解为是在这个函数内声明的变量（比如start = 1)实参可以理解为是给这个变量赋值。
  4. 开发中尽量保持形参和实参个数一致。
  5. 我们曾经使用的alert('打印'),parseInt('11'),Number('11')本质上都是函数调用的传参。
  • 实参可以是变量
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>函数传参-实参可以是变量</title>
</head><body><script>//求n~m的累加和function getSum(n = 0, m = 0) {let sum = 0for (let i = n; i <= m; i++) {sum += i}console.log(sum)}let num1 = +prompt('请输入起始值：')let num2 = +prompt('请输入结束值：')//调用函数getSum(num1, num2)  //实参可以是变量</script></body></html>

  • 函数传递参数的好处
    可以极大的提高了函数的灵活性。

  • 默认参数值

 <title>练习-函数封装求和</title>
</head><body><script>//给参数默认值function getSum(x = 0, y = 0) {document.write(x + y)}getSum(1, 2)getSum() //0</script></body>

说明：这个默认值只会在缺少实参参数传递时才会被执行，所以有参数会优先执行传递过来的实参，否则默认为undefined。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>练习-函数封装-求学生总分</title>
</head><body><script>//1.封装函数//给一个参数的默认值function getArrSum(arr = []) {// console.log(arr)let sum = 0for (let i = 0; i < arr.length; i++) {sum += arr[i]}console.log(sum)}getArrSum([1, 2, 3, 4, 5])getArrSum([11, 22, 33])getArrSum()</script></body></html>

函数返回值：

  • 有返回值函数的概念：
  1. 当调用某个函数，这个函数会返回一个结果出来。
  2. 这就是有返回值的函数。
let num = +prompt('请输入一个数')
  1. 当然有些函数，则没有返回值。
alert('你好，我是雪碧')
  1. 所以要根据需求，来设定需不需要返回值。
  • 当函数需要返回数据出去时，用return关键字。
  • 语法
return 数据

<title>函数-函数的返回值</title>
</head><body><script>//函数的返回值// function fn() {//   return 20// }// //相当于执行了  fn()是调用者  fn() = 20// // console.log(fn())// let re = fn()// console.log(re)//求和函数的写法function getTotalPrice(x, y) {return x + y//return 后面的代码不会被执行}let sum = getTotalPrice(1, 2)console.log(sum)console.log(sum)</script>
  • 细节
  1. 在函数体中使用return关键字能将内部的执行结果交给函数外部使用。
  2. return 后面代码不会再被执行，会立即结束当前函数，所以return后面的数据不要换行写。
  3. reurn函数可以没有return，这种情况函数默认返回值为underfined。
  • 为什么要让函数有返回值
    1.函数执行后得到结果，结果时调用者想要拿到的（一句话，函数内部不需要输出结果，而是返回结果）。
    2. 对执行结果的扩展性更高，可以让其他的程序使用这个结果。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>练习-函数返回值练习</title>
</head><body><script>//1.求任意2个数中的最大值，并返回// function getMax(x, y) {//   return x > y ? x : y// }// let max = getMax(1, 2)// console.log(max)//2.求任意数组中的最大值并返回这个最大值function getArrValue(arr = []) {//(1)先准备一个max变量存放数组的第一个值let max = arr[0]let min = arr[0]//(2)遍历比较for (let i = 1; i < arr.length; i++) {//最大值if (max < arr[i]) {max = arr[i]}//最小值if (min > arr[i]) {min = arr[i]}}//(3)返回值  返回的是数组return [max, min]}let newArr = getArrValue([1, 3, 5, 7, 9])console.log(`数组的最大值是：${newArr[0]}`)console.log(`数组的最小值是：${newArr[1]}`)</script></body></html>

函数细节补充：

  • 两个相同的函数后面的会覆盖前面的函数。
  • 再JavaScript中实参的个数和形参的个数可以不一致。
  1. 如果形参过多，会自动填上undefined（了解即可）。
  2. 如果实参过多，那么多余的实参会被忽略（函数内部有一个arguments，里面装着所有的实参）。
  • 函数一旦碰到return就不会在往下执行了，函数的结束用return。

函数作用域：

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

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

在这里插入图片描述

  • 在JavaScript中，根据作用域的不同，变量可以分为：
    在这里插入图片描述
<title>函数作用域</title>
</head><body><script>let num = 10 //1. 全局变量console.log(num)function fn() {console.log(num)}fn()//2.局部变量function fun() {let str = 'pink'}console.log(str) //错误</script></body>
  • 变量的特殊情况
    如果函数内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐。
    但是有一种情况，函数内部的形参可以看做是局部变量。
 <title>变量的特殊情况</title>
</head><body><script>function fn() {num = 10  //全局变量来看  强烈不允许}fn()console.log(num)function fun(x, y) {//形参可以看做是函数的局部变量console.log(x)}fun(1, 2)console.log(x)  //错误的</script></body>
  • 变量分访问原则
  1. 只要是代码，就至少有一个作用域。
  2. 写在函数内部的局部作用域。
  3. 如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域。
  4. 访问原则：在能够访问到的情况下先局部，局部没有再找全局。
  5. 变量的访问原则： 采取就近原则的方式来查找变量最终的值。

匿名函数：

在这里插入图片描述

  • 概念
    没有名字的函数，无法直接使用。

  • 匿名函数-函数表达式
    将匿名函数赋值给一个变量，并且通过变量名称进行调用，我们将这个称为函数表达式。

let fn = function(){//函数体
} 
//调用
fn() // 函数名

其中函数的形参和实参使用跟具名函数一致。

 <title>匿名函数-函数表达式</title>
</head><body><script>//1.函数表达式let fn = function (x, y) {// console.log('我是函数表达式')console.log(x + y)}fn(1, 2)//函数表达式和具名函数的不同   function fn(){}//1.具名函数的调用可以写到任何位置//2.函数表达式，必须先声明函数表达式，后调用// function fun(){//   console.log()// }// fun()</script></body>
  • 匿名函数-立即执行函数
    作用：防止变量污染。
 <title>匿名函数-立即执行函数</title>
</head><body><script>// (function () {//   let num = 20// })();// (function(){//   let num = 20// })();//1.第一种写法(function (x, y) {console.log(x + y)})(1, 2);//2.第二种写法(function (x, y) {console.log(x + y)}(1, 3));</script></body>
  1. 立即执行函数无需调用，立即执行，其实本质已经调用了。
  2. 多个立即执行函数之间用分号隔开。

案例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>案例-转换时间案例</title>
</head><body><script>//1.用户输入let second = +prompt('请输入秒数：')//2.封装函数function getTime(t) {// console.log(t) //总的秒数//3.转换// 小时 ： h = parseInt(总秒数 / 60 % 24)// 分钟： m = parseInt(总秒数 / 50 % 60)// 秒数： s = parseInt(总秒数 % 60)let h = parseInt(t / 60 % 24)let m = parseInt(t / 50 % 60)let s = parseInt(t % 60)h = h < 10 ? '0' + h : hm = m < 10 ? '0' + m : ms = s < 10 ? '0' + s : s// console.log(h, m, s)return `转换完毕之后是${h}小时${m}分${s}秒`}let str = getTime(second)console.log(str)</script></body></html>

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

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

旅游网站（携程旅行网页学习 vue3+element）

旅游网站（携程旅行网页学习 vue3+element）

旅游网站 1. 创建项目 在你要创建项目的路径下打开vscode&#xff0c;新建终端&#xff0c;然后输入vue ui,进入Vue项目管理器。选择“创建”&#xff0c;确定项目路径&#xff0c;并点击“在此创建新项目”。在项目文件夹中输入项目名称&#xff0c;点击下一步&#xff1b;选…
阅读更多...
【V8引擎】 V8引擎如何运行JS的

【V8引擎】 V8引擎如何运行JS的

文章目录 概要什么是V8引擎为什么需要V8引擎比较常见的javascript引起有哪些呢&#xff1f;V8引擎是如何工作的&#xff08;V8引擎的解析过程&#xff09;V8引擎的做了哪些优化 概要 本篇文章主要是讲V8引擎如何运行JS&#xff0c;对运行JS做了哪些优化 什么是V8引擎 V8 是一…
阅读更多...
深入理解计算机系统 家庭作业6.34

深入理解计算机系统 家庭作业6.34

第一步先求(S,E,B,m) 题目说共C32个字节,块大小B为16个字节,那就是分为两组:0,1.然后每组存4个int 每个4字节 CB*E*S .B16 ,直接映射的E就是1,所以S2 m为啥等于7? 通过写出两个数组所有的地址可以得出m7. 得出高速缓存的参数:(S,E,B,m)(2,1,16,7),注意图6-26每个参数的定义…
阅读更多...
Python 植物大战僵尸游戏【含Python源码 MX_012期】

Python 植物大战僵尸游戏【含Python源码 MX_012期】

简介&#xff1a; "植物大战僵尸"&#xff08;Plants vs. Zombies&#xff09;是一款由PopCap Games开发的流行塔防游戏&#xff0c;最初于2009年发布。游戏的概念是在僵尸入侵的情境下&#xff0c;玩家通过种植不同种类的植物来保护他们的房屋免受僵尸的侵袭。在游…
阅读更多...
DTU在城市智慧供热上的应用：引领供热行业的智能化革新

DTU在城市智慧供热上的应用：引领供热行业的智能化革新

随着城市化的快速推进和人们对舒适生活需求的日益增长&#xff0c;供热系统作为城市基础设施的重要组成部分&#xff0c;其智能化、高效化的发展已成为必然趋势。在这一进程中&#xff0c;DTU&#xff08;Data Transfer Unit&#xff0c;数据传输单元&#xff09;以其独特的优势…
阅读更多...
计算机组成原理学习 Part 1

计算机组成原理学习 Part 1

计算机系统 组成 计算机系统 { 硬件 计算机的实体&#xff0c;如主机、外设等 软件 由具有各类特殊功能的信息&#xff08;程序&#xff09;组成 计算机系统 \begin{cases} 硬件 &\text 计算机的实体&#xff0c;如主机、外设等\\ 软件 &\text 由具有各类特殊功能的信…
阅读更多...
CCAA质量管理【学习笔记】​​ 备考知识点笔记（二）

CCAA质量管理【学习笔记】​​ 备考知识点笔记（二）

第三节 GB/T19001-2016 标准正文 本节为ISO9001:2015 标准条款的正文内容&#xff0c;各条款中的术语参照上节内容理解时&#xff0c;会很轻松。本节不再一一对各条款讲解。 引 言 0.1 总 则 采用质量管理体系是组织的一项战略决策&#xff0c;能够帮助其提高整体绩效…
阅读更多...
FANUC机器人SRVO-454和SRVO-455故障报警处理总结

FANUC机器人SRVO-454和SRVO-455故障报警处理总结

FANUC机器人SRVO-454和SRVO-455故障报警处理总结 公司内的一台FANUC机器人（型号：M-900iB；控制柜型号：R-30iB）正常运转过程中突然报警： SRVO-455 CPU看门狗（G:1 A:2），按Reset键无法消除该报警； 查看SRVO-455故障报警的具体内容，如下图所示： 由于现场没有备用的伺服放…
阅读更多...
服务器如何有效解决源IP暴露问题

服务器如何有效解决源IP暴露问题

在现代互联网环境中&#xff0c;服务器的安全性至关重要。源IP暴露不仅增加了服务器遭受DDoS攻击、恶意扫描和数据泄露的风险&#xff0c;还可能影响业务的正常运行。本文将探讨如何利用技术手段&#xff0c;尤其是CDN和防火墙策略&#xff0c;来有效地解决服务器源IP暴露的问题…
阅读更多...
[Java基本语法] 数组及其应用

[Java基本语法] 数组及其应用

&#x1f338;个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 &#x1f3f5;️热门专栏:&#x1f355; Collection与数据结构 (92平均质量分)https://blog.csdn.net/2301_80050796/category_12621348.html?spm1001.2014.3001.5482 &#x1f9c0;线程与…
阅读更多...
Linux环境下安装mysql5.7

Linux环境下安装mysql5.7

1. 环境准备 Linux操作系统&#xff1a;CentOS Linux release 7.9.2009 (Core) mysql版本&#xff1a;mysql-5.7.28-1.el7.x86_64.rpm-bundle.tar mysql5.7版本包资源&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/15BqpcaGMU1XXuPd2T8oTQQ 提取码&#xff1a;2mgy 1…
阅读更多...
Ollama+Open WebUI本地部署Llama3 8b（附踩坑细节）

Ollama+Open WebUI本地部署Llama3 8b（附踩坑细节）

先展示一下最终结果&#xff0c;如下图所示&#xff1a; 1. 添加环境变量 在下载 ollama 之前&#xff0c;先去配置环境变量&#xff0c;确保模型下载到我们想要的地方 win10 和 win11 输入path或者环境变量&#xff1a; 增加系统环境变量 变量名不可更改&#xff0c;必须是O…
阅读更多...
增材制造引领模具创新之路

增材制造引领模具创新之路

随着科技的快速发展和制造业的不断转型升级&#xff0c;增材制造&#xff08;也称为3D打印&#xff09;技术正逐渐展现出其在模具智造中的巨大潜力和优势。增材制造以其独特的加工方式和设计理念&#xff0c;为模具行业带来了革命性的变革&#xff0c;为传统制造业注入了新的活…
阅读更多...
植物大战僵尸杂交版 v2.0.88 mac版 Plants vs. Zombies 杂交版下载

植物大战僵尸杂交版 v2.0.88 mac版 Plants vs. Zombies 杂交版下载

特别注意&#xff1a;该游戏最低系统要求为macOS Sonoma 14.X&#xff0c;低于此系统版本的请勿下载&#xff01; 游戏介绍 植物大战僵尸杂交版是由B站UP主“潜艇伟伟迷”制作的一款结合了《植物大战僵尸》原有元素与创新玩法的游戏。这款游戏以其独特的“杂交”植物概念在B站…
阅读更多...
java第二十三课 —— 继承

java第二十三课 —— 继承

面向对象的三大特征 继承 继承可以解决代码复用&#xff0c;让我们的编程更加靠近人类思维&#xff0c;当多个类存在相同的属性&#xff08;变量&#xff09;和方法时&#xff0c;可以从这些类中抽象出父类&#xff0c;在父类中定义这些相同的属性和方法&#xff0c;所有的子…
阅读更多...
镭速如何做到数据同步文件及文件夹的ACL属性？

镭速如何做到数据同步文件及文件夹的ACL属性？

数据文件同步时&#xff0c;除了要同步文件的内容&#xff0c;还要对文件的属性做同步。权限属性作为一个重要的文件属性&#xff0c;是属性同步的重中之重&#xff0c;控制着不同用户与用户组对文件和文件夹的访问权限。不同的操作系统有着自己不同的权限控制机制&#xff0c;…
阅读更多...
PDF标准详解（三）—— PDF坐标系统和坐标变换

PDF标准详解（三）—— PDF坐标系统和坐标变换

之前我们了解了PDF文档的基本结构&#xff0c;并且展示了一个简单的hello world。这个hello world 虽然只在页面中显示一个hello world 文字&#xff0c;但是包含的内容却是不少。这次我们仍然以它为切入点&#xff0c;来了解PDF的坐标系统以及坐标变换的相关知识 图形学中二维…
阅读更多...
如果给电商系统颜值搞排名，我觉得淘宝千牛系统是天花板了。

如果给电商系统颜值搞排名，我觉得淘宝千牛系统是天花板了。

淘宝的商家操作界面-千牛系统经过多年的迭代&#xff0c;无论从颜值上、功能上还是用户体验上都是行业天花板的存在&#xff0c;我截图软件上的一些图给大家分享下。
阅读更多...
C++ //CCF-CSP计算机软件能力认证 202406-1 矩阵重塑（其一）

C++ //CCF-CSP计算机软件能力认证 202406-1 矩阵重塑（其一）

CCF-CSP计算机软件能力认证 202406-1 矩阵重塑&#xff08;其一&#xff09; 题目背景 矩阵&#xff08;二维&#xff09;的重塑&#xff08;reshape&#xff09;操作是指改变矩阵的行数和列数&#xff0c;同时保持矩阵中元素的总数不变。 题目描述 矩阵的重塑操作可以具体…
阅读更多...
秋招突击——第三弹——Java的SSN框架快速入门——SpringMVC

秋招突击——第三弹——Java的SSN框架快速入门——SpringMVC

文章目录 说明SpringMVC简介入门案例入门案例的工作流程配置环境的问题步骤总结注释学习开发模式Severlet容器类配置入门案例工作流程分析Bean加载控制 Postman工具请求 请求和响应请求映射路径请求参数普通参数设置过滤器&#xff0c;对输入进行处理 Json数据传递参数注释学习…
阅读更多...
最新文章

Copyright @ 2022~2023