探索JavaScript函数---基础篇

目录

函数

声明和调用

声明(定义)

调用

参数

形参和实参

形参(Formal Arguments)

实参(Actual Arguments)

形参与实参的关系

返回值

作用域

全局作用域

局部作用域

匿名函数

函数表达式

立即执行函数


函数

一般来说,一个函数是可以通过外部代码调用的一个“子程序”(或在递归的情况下由内部函数调用)。像程序本身一样,一个函数由称为函数体的一系列语句组成。值可以传递给一个函数,函数将返回一个值。在 JavaScript 中,函数是头等 (first-class)对象,因为它们可以像任何其他对象一样具有属性和方法,可以像其他数据类型一样被赋值给变量、作为参数传递给其他函数,甚至作为其他函数的返回值。它们与其他对象的区别在于函数可以被调用。简而言之,它们是Function对象。                                                                                                                 ​​​​​​​                                                                ​​​​​​​——MDN 

声明和调用

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

声明(定义)

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

调用

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

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

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

参数

参数是在函数名后的圆括号内定义的,多个参数之间用逗号分隔。

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

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

  • 传入数据列表

  • 声明这个函数需要传入几个数据

  • 多个数据用逗号隔开

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

总结:

  1. 声明(定义)函数时的形参没有数量限制,当有多个形参时使用   , 分隔

  2. 调用函数传递的实参要与形参的顺序一致

形参和实参

形参(Formal Arguments)

形参是在定义函数时,在函数名后的括号内指定的占位符变量。它们代表函数期望接收的值,但并不实际包含值。形参的作用是告诉调用者这个函数需要哪些信息才能执行其任务。例如:


function addNumbers(a, b) {
    return a + b;
}

在这个例子中,a 和 b 是形参,它们代表了将来调用该函数时需要提供的两个数值。

实参(Actual Arguments)

实参是当函数被调用时,实际传递给函数的具体值。这些值用来替换函数定义中的形参。继续上面的例子,当我们调用 addNumbers 函数时,传递的值就是实参:

let result = addNumbers(5, 3);

这里,5 和 3 就是实参,它们分别对应并赋值给形参 a 和 b,函数执行后返回它们的和。

形参与实参的关系
  • 匹配:实参的数量和类型应当与函数定义中的形参相匹配。如果数量不匹配,JavaScript 在严格模式下会抛出错误;如果不使用严格模式,则可能会导致意外的行为或错误。
  • 传递方式:JavaScript 中,实参向形参的传递是基于值的传递。对于原始类型(如数字、字符串、布尔值),传递的是值的副本;而对于引用类型(如对象、数组),传递的是引用的副本,这意味着函数内部可以修改对象的属性或数组的内容,影响到外部。
  • 默认参数:ES6 引入了默认参数功能,允许在定义函数时为形参指定默认值。如果调用函数时没有提供对应的实参,就使用默认值。
function greet(name = "User") {
    console.log(`Hello, ${name}!`);
}

greet(); // 输出 "Hello, User!"
greet("Alice"); // 输出 "Hello, Alice!"

eg:

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

返回值

return语句用于从函数中退出并返回一个值给调用者。如果函数体中没有return语句,或者return后面没有值,那么函数默认返回undefined

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>函数返回值</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

作用域

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

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

全局作用域
  • 定义:在代码的最外层定义的变量或函数拥有全局作用域,这意味着它们在整个代码中任何地方都是可访问的。
  • 特点:全局变量会一直存在,直至页面关闭,可能导致内存泄漏。尽量避免非必要地使用全局变量,因为它们容易引起命名冲突。
let globalVar = "I'm global!";
function test() {
    console.log(globalVar); // 访问全局变量
}
test(); // 输出 "I'm global!"
局部作用域
  • 定义:在函数内部定义的变量拥有局部作用域,只能在该函数内部访问。
  • 特点:每次函数调用时都会创建新的局部作用域,变量在函数执行结束后会被销毁,有助于资源管理。
function test() {
    let localVar = "I'm local!";
    console.log(localVar); // 访问局部变量
}
test(); // 输出 "I'm local!"
console.log(localVar); // 错误,localVar在此不可访问

注意:

  • 如果函数内部,变量没有声明,直接赋值,也当全局变量看,但是强烈不推荐,这种行为经常导致意料之外的错误和全局变量的污染。
  • 函数的形参(形式参数)在函数定义时自动被视为局部变量。

匿名函数

匿名函数,顾名思义,是没有名字的函数。在JavaScript中,匿名函数是一种非常灵活且常用的特性,常用于需要一次性使用的简短函数逻辑场景,或是作为其他函数的参数传递给高阶函数。

函数表达式

函数表达式将函数定义赋值给一个变量、对象的属性或作为参数传递给其他函数。它可以是命名的也可以是匿名的。

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

函数表达式在赋值操作完成之前不能被调用,因为它们属于普通变量的赋值,遵循变量声明的规则。 

立即执行函数

立即执行函数(IIFE,Immediately Invoked Function Expression),即立即调用的函数表达式,也就是说,声明函数的同时立即调用这个函数。

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

//eg:
(function() {
    console.log("这是一个匿名函数,并且立即被执行了!");
})();

注意:

  • 无需调用,立即执行,其实本质已经调用了
  • 多个立即执行函数之间用分号隔开

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

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

相关文章

无限可能LangChain——开启大模型世界

什么是大语言模型&#xff1f; 大语言模型是一种人工智能模型&#xff0c;通常使用深度学习技术&#xff08;如神经网络&#xff09;来理解和生成人类语言。这些模型拥有非常多的参数&#xff0c;可以达到数十亿甚至更多&#xff0c;使得它们能够处理高度复杂的语言模式。 我…

【网络安全】Web安全基础 - 第二节:前置基础知识- HTTP协议,握手协议,Cookie及Session

本章节主要介绍一些基础知识 d(^_^o) HTTP协议 什么是HTTP 超文本传输协议&#xff08;HyperText Transfer Protocol&#xff09;是一种用于分布式、协作式和超媒体信息系统的应用层协议。 HTTP是一个基于请求与响应&#xff0c;无状态的&#xff0c;应用层协议&#xff0c;…

30 分钟内掌握 Mainnet、Testnet 和 Devnet。Devnet是什么??

在区块链技术领域&#xff0c;Mainnet、Testnet 和 Devnet 等术语经常被使用&#xff0c;但也经常被误解。 这三种环境在区块链应用的开发和部署中起着至关重要的作用&#xff0c;但它们的区别和目的却常常被混淆。 让我们踏上探索之旅&#xff0c;揭开 Mainnet、Testnet 和 De…

HTML5+CSS3回顾总结

一、HTML5新特性 1.语义化标签 <header> 头部标签<nav> 导航标签<article> 内容标签<section> 定义文档某个区域<aside> 侧边栏标签<footer> 尾部标签 2.多媒体标签 2.1视频标签vedio 》常规写法&#xff08;尽量都使用mp4&#xff0…

google的chromedriver最新版下载地址

Chrome for Testing availability (googlechromelabs.github.io) 复制对应的地址跳转进去即可下载&#xff0c;下载前先看下自己google浏览器版本&#xff0c;找到对应的版本号去下载&#xff0c;把解压缩的exe放到google浏览器目录下。

3D软件开发的相关技术

3D开发涉及到广泛的技术和工具&#xff0c;涵盖了多个领域&#xff0c;包括计算机图形学、编程、设计、物理模拟等。以下是3D开发中常用的技术和工具&#xff0c;掌握这些技术需要广泛的知识和实践&#xff0c;项目的成功依赖于对这些技术的有效整合和应用。北京木奇移动技术有…

写大型C工程makefile构建~

正文 最开始学习linux应用开发编写的时候&#xff0c;估计大部分伙伴们都是在一个目录里面编译整个工程&#xff0c;主要是linux通常没有非常合适的集成开发环境。 以前单目录的方式实在太过捡漏&#xff0c;在linux环境中进行C代码工程开发很多时候需要编写一个相对比较通用的…

海康 面阵相机命名规则

海康 面阵相机命名规则 https://www.v-club.com/vCollage/vCollageDetail/516?subjectIdRMse6nPiyo

Nginx(openresty) 开启gzip压缩功能 提高web网站传输速度

1 开启nginx gzip压缩后&#xff0c;网页的图片&#xff0c;css、js等静态资源的大小会减少&#xff0c;节约带宽&#xff0c;提高传输效率&#xff0c;给用户快的体验,给用户更好的体验. 2 安装 #centos 8.5 yum install gzip 3 配置 #建议统一配置在http段 vim /usr/loca…

汇舟问卷:兼职做国外问卷三小时挣200

在繁忙的都市生活中&#xff0c;许多人为了生计而日夜奔波。对于大多数人来说&#xff0c;白天的工作已经足够充实&#xff0c;但依然有很多人选择在下班时间&#xff0c;多做些什么&#xff0c;为自己带来一份额外​的收入。 目前下班做的兼职工作不是跑滴滴&#xff0c;就是…

发表《Science Advances》!量子近似优化算法实现再突破

内容来源&#xff1a;量子前哨&#xff08;ID&#xff1a;Qforepost&#xff09; 文丨慕一/娴睿 排版丨沛贤 深度好文&#xff1a;1500字丨6分钟阅读 摘要&#xff1a;摩根大通、美国能源部&#xff08;DOE&#xff09;阿贡国家实验室和 Quantinuum 的研究人员证明了量子近似…

NetApp财季报告亮点:全闪存阵列需求强劲,云计算收入增长放缓但AI领域前景乐观

在最新的财季报告中&#xff0c;NetApp的收入因全闪存阵列的强劲需求而显著增长。截至2024年4月26日的2024财年第四季度&#xff0c;NetApp的收入连续第三个季度上升&#xff0c;达到了16.7亿美元&#xff0c;较前一年同期增长6%&#xff0c;超出公司指导中值。净利润为2.91亿美…

MySQL-事务日志

事务的隔离性由 锁机制 实现 事务的原子性、一致性、隔离性 由事务的 redo日志 和 undo 日志来保证 redo log 称为 重做日志&#xff0c;提供再写入操作&#xff0c;恢复提交事务修改的页操作&#xff0c;用来保证事务的持久性。undo log 称为 回滚日志&#xff0c;回滚行记录…

揭秘c语言作用域

前言 欢迎来到我的博客 个人主页:北岭敲键盘的荒漠猫-CSDN博客 本文主要整理c语言中 与作用域相关的知识点 本文适合对象:无编程基础&#xff0c;因为解释的比较多&#xff0c;所以不适合有基础的人快速掌握了 作用域描述 其实就是起作用的区域。比如个变量&#xff0c;函数…

System-Verilog 实现DE2-115倒车雷达模拟

System-Verilog 实现DE2-115倒车雷达模拟 引言&#xff1a; 随着科技的不断进步&#xff0c;汽车安全技术也日益成为人们关注的焦点。在众多汽车安全辅助系统中&#xff0c;倒车雷达以其实用性和高效性脱颖而出&#xff0c;成为现代汽车不可或缺的一部分。倒车雷达系统利用超声…

轻松拿捏C语言——【内存函数】

&#x1f970;欢迎关注 轻松拿捏C语言系列&#xff0c;来和 小哇 一起进步&#xff01;✊ &#x1f389;创作不易&#xff0c;请多多支持&#x1f389; &#x1f308;感谢大家的阅读、点赞、收藏和关注&#x1f495; &#x1f339;如有问题&#xff0c;欢迎指正~~ 目录&#x1…

简单说说我对集成学习算法的一点理解

概要 集成学习&#xff08;Ensemble Learning&#xff09;是一种机器学习技术框架&#xff0c;它通过构建并结合多个学习器&#xff08;也称为个体学习器或基学习器&#xff09;来完成学习任务。 集成学习旨在通过组合多个基学习器的预测结果来提高整体模型的性能。每个基学习…

《mysql轻松学习·二》

1、创建数据表 contacts&#xff1a;数据表名 auto_increament&#xff1a;自动增长 primary key&#xff1a;主键 engineInnoDB default charsetutf8; 默认字符集utf8&#xff0c;不写就默认utf8 对数据表的操作&#xff1a; alter table 数据表名 add sex varchar(1); //添…

MySQL 一条SQL查询/更新语句是如何执行的?

MySQL 一条SQL查询语句是如何执行的&#xff1f; 1 连接器 首先客户端需要先跟服务端进行连接 2 查询缓存 MySQL 5.7 以及之前的版本会查询MySQL缓存&#xff0c;存储是键值对形式的 分析器 对SQL进行词法分析【会生成词法树】以及语法分析 词法分析&#xff1a; 主要负…

安卓ANR检测、分析、优化面面谈

前言 一个引发讨论的楔子&#xff0c;以下三种现象有什么区别&#xff1a; App停止运行App暂无响应App闪退 答案&#xff1a; 产生原因不同&#xff1a;停止运行是UNCheckExceptionError暂无响应是ANRDialog闪退是CheckExceptionError 本文讨论的主题是ANR的定义、分类、复现…