JavaScript 基础 - 第4天

news2024/11/24 13:46:28

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

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

函数

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

声明和调用

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

声明(定义)

声明(定义)一个完整函数包括关键字、函数名、形式参数、函数体、返回值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  赋值给了形参 y
    count(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.coloradmin.cn/o/1163135.html

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

相关文章

软件测试/测试开发丨UbuntuServer环境准备

点此获取更多相关资料 前提 现有设备是一套 i54090 的组合&#xff0c;安装了 Ubuntu 22.04.3 LTS Server 版本&#xff0c;后文的安装步骤都是基于这套系统和配置进行操作。 系统准备 查看是否安装了 gcc 命令行中执行 gcc -v 正常输入如图效果的&#xff0c;说明已经成功…

kubeadm部署kubernetes1.28

k8s在1.24版本以后删除了内置dockershim插件&#xff0c;原生不再支持docker运行时&#xff0c;需要使用第三方cri接口cri-docker https://github.com/Mirantis/cri-dockerd.git 安装前&#xff0c;需要先升级systemd和主机内核&#xff0c;本操作文档安装的是最新的版本kube…

微信小程序渲染的富文本里面除了img标签外什么都没有,该如何设置img的大小

微信小程序富文本渲染&#xff1a; <rich-text nodes"{{content}}"style"{{style}}" ></rich-text> content是接口得到的值 let cont object.contentlet a cont.replace(/<img/gi,<img style"max-width:94%;height:auto;margi…

大厂面试题-什么是IO的多路复用机制?

IO多路复用机制&#xff0c;核心思想是让单个线程去监视多个连接&#xff0c;一旦某个连接就绪&#xff0c;也就是触发了读/写事件。 就通知应用程序&#xff0c;去获取这个就绪的连接进行读写操作。 也就是在应用程序里面可以使用单个线程同时处理多个客户端连接&#xff0c…

四川竹哲电子商务有限公司服务怎么样?

随着抖音电商的日益崛起&#xff0c;越来越多的商家开始关注这个充满无限商机的平台。四川竹哲电子商务有限公司作为一家专业的抖音电商服务公司&#xff0c;凭借其丰富的经验和优秀的服务&#xff0c;成为了众多商家在抖音电商领域中的重要合作伙伴。 一、专业实力 作为一家专…

同为科技(TOWE)国标10A电瓶车专用智能定时桌面PDU插线板

电动车作为现在国内保有量较高的一种交通工具&#xff0c;因其价格亲民、环保便捷、使用成本低等原因受到广大人民群众的欢迎。然而&#xff0c;电瓶车充电问题长期以来是广受关注的社会性话题&#xff0c;过充短路爆充引起火灾事故的新闻时有发生&#xff0c;80%的电动车火灾都…

将流程作为战略丨看看流程智能在食品巨头“百事”的应用场景

“更快、更好、更强”是百事可乐的使命。百事公司GPEX&#xff08;全球流程卓越组织&#xff09;的使命则是&#xff1a;改造、数字化和加强百事公司的端到端流程&#xff0c;使每个流程都具备相关的可衡量价值。 目前&#xff0c;百事公司正在使用预测分析、人工智能、机器人…

电脑防泄密软件有什么作用,安企神文件加密软件功能详解

电脑防泄密软件有什么作用&#xff0c;安企神文件加密软件功能详解 安企神数据防泄密系统下载使用 什么是加密软件 用于将数据或信息转化为加密形式&#xff0c;从而限制数据在未授权的访问或窃取。加密是一种安全措施&#xff0c;通过将数据转化为密文&#xff0c;只有授权…

Dubbo中的负载均衡算法之平滑加权轮询算法源码解析

Dubbo中的负载均衡算法之一致性哈希算法 哈希算法 假设这样一个场景&#xff0c;我们申请一台服务器来缓存100万的数据&#xff0c;这个时候是单机环境&#xff0c;所有的请求都命中到这台服务器。后来业务量上涨&#xff0c;我们的数据也从100万上升到了300万&#xff0c;原…

激光雷达和人工智能

几十年来&#xff0c;激光雷达一直是许多行业中非常有用的工具&#xff0c;但直到最近&#xff0c;随着人工智能&#xff08;AI&#xff09;解决方案的引入&#xff0c;我们才开始认识到它的真正潜力。激光雷达&#xff0c;又称光探测和测距&#xff0c;是一种遥感技术。它利用…

性能测试知多少----性能测试分类之我见

从这一篇开始&#xff0c;虫师向性能方面发力。翻看自己的博客&#xff0c;最早的时候热衷于jmeter&#xff0c;于是写了几篇图文并茂的文章&#xff08;其实&#xff0c;主要是操作截图加文字描述&#xff09;&#xff0c;之后&#xff0c;由于看到好多朋友关于性能的知识什么…

【RtpSeqNumOnlyRefFinder】webrtc m98: ManageFrameInternal 的帧决策过程分析

Jitterbuffer(FrameBuffer)需要组帧以后GOP内的参考关系 JeffreyLau 大神分析 了组帧原理而参考关系(RtpFrameReferenceFinder)的生成伴随了帧决策 FrameDecisionFrameDecision 影响力 帧的缓存。调用 OnAssembledFrame 传递已经拿到的RtpFrameObject 那么,RtpFrameObject…

出海营销必看:如何避免邮件被识别为垃圾邮件

对于现在的商业环境来说&#xff0c;邮件通信已经成为企业与客户、合作伙伴以及员工之间沟通和交流的重要方式。然而&#xff0c;尽管企业发送的邮件通常都是正常的、合规的&#xff0c;有时候却会被系统错误地标记为营销邮件。这个情况给企业带来了很多困扰。 如果企业的邮件…

软件测试工作的价值体现在哪里呢?

QA 的绩效如何考核&#xff1f;测试工作的价值体现在哪里&#xff1f; 这两个是大家比较关注&#xff0c;也是比较难的问题。确实&#xff0c;业务分析人员会产出需求文档&#xff0c;开发人员会产出软件&#xff0c;而 QA 的工作则很难定义明确的产出&#xff0c;很难被量化。…

服务号改订阅号怎么弄

服务号和订阅号有什么区别&#xff1f;服务号转为订阅号有哪些作用&#xff1f;很多小伙伴想把服务号改为订阅号&#xff0c;但是不知道改了之后具体有什么作用&#xff0c;今天跟大家具体讲解一下。首先我们知道服务号一个月只能发四次文章&#xff0c;但是订阅号每天都可以发…

Java通过cellstyle属性设置Excel单元格常用样式全面总结

最近做了一个导出Excel的功能&#xff0c;导出是个常规导出&#xff0c;但是拿来模板一看&#xff0c;有一些单元格的样式设置&#xff0c;包括合并&#xff0c;背景色&#xff0c;字体等等&#xff0c;毕竟不是常用的东西&#xff0c;需要查阅资料完成&#xff0c;但是搜遍全网…

小程序day01

简介: 小程序项目的基本结构 页面的组成部分 一个页面对应一个文件夹&#xff0c;所有有关的内容都放在一起。 JSON配置文件 2.app.json文件 3.project.config.json文件 4.sitemap.json文件 5.页面的.json配置文件 6. 新建小程序页面 7.修改项目首页 小程序代码构成 小程序的宿…

java 数据结构 ArrayList源码底层 LinkedList 底层源码 迭代器底层

文章目录 数据结构总结ArrayList源码底层LinkedList底层源码 迭代器底层 数据结构 对于数据结构我这边只告诉你右边框框里的 栈的特点:后进先出,先进后出,入栈也成为压栈,出栈也成为弹栈 栈就像一个弹夹 队列先进先出后进后出 队列像排队 链表查询满 但是增删快(相对于数组而…

【Unity ShaderGraph】| 快速制作一个 抖动效果

前言 【Unity ShaderGraph】| 快速制作一个 抖动效果一、效果展示二、UV抖动效果三、应用实例 前言 本文将使用ShaderGraph制作一个抖动效果&#xff0c;可以直接拿到项目中使用。对ShaderGraph还不了解的小伙伴可以参考这篇文章&#xff1a;【Unity ShaderGraph】| Shader Gr…