6-js基础-4

news2024/12/22 23:15:51

JavaScript 基础 - 4

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

  • 函数
  • 综合案例

函数

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

函数的基本使用

函数: 是可以被重复使用的代码块

作用:函数可以把具有相同或相似逻辑的代码“包裹”起来,这么做的优势是有利于代码复用

声明(定义)函数

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

利用关键字 function 定义函数 (声明函数)

语法:

<script>

// 函数: 是可以被重复使用的代码块,作用是有利于代码复用
// 1. 声明(定义)了最简单的函数,既没有形式参数,也没有返回值
function sayHi() {
	console.log('嗨~')
}

注意:

  1. 函数名命名跟变量一致,采用小驼峰命名法
  2. 函数名经常采用 动词

调用

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

<!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>

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

函数的整体认知

在这里插入图片描述

语法:

function sum(参数1, 参数2...) {
    return 结果
}
console.log(sum(1, 2))  // 输出函数返回的结果

说明:

  1. 函数参数,如果有多个则用逗号分隔,用于接受传递过来的数据
  2. return 关键字可以把结果返回给调用者

函数参数

通过向函数传递参数,可以让函数更加灵活多变

在这里插入图片描述

形参:声明函数时小括号里的叫形参(形式上的参数)

实参:调用函数时小括号里的叫实参(实际上的参数)

执行过程: 会把实参的数据传递给形参,从而提供给函数内部使用,我们可以把形参理解为变量

我们曾经使用过的 alert(‘打印’),parseInt(‘11px’),Number(‘11’)本质上都是函数调用的传参

<script>
  // 函数的参数  形参和实参个数不匹配

  // 1. 形参个数过多, 会自动补充 undefined 
  function sum(x, y) {  // 形参 
    return x + y
  }
  console.log(sum(1, 2))  // 实参   3
  console.log(sum(1))  // 实参  NaN  x = 1  y 没有给值默认值是 undefined
  //  1 + undefined  = NaN

  // 2. 实参个数过多,则多余的实参会被忽略
  console.log(sum(1, 2, 3)) // 实参 3

  // 3. 开发中提倡要保证实参和形参个数统一
</script>

在Javascript中 实参的个数和形参的个数可以不一致

  • 如果形参过多 会自动填上undefined
  • 如果实参过多 那么多余的实参会被忽略

逻辑中断

逻辑中断: 存在于逻辑运算符 && 和 || 中,左边如果满足一定条件会中断代码执行,也称为逻辑短路

false && anything // 逻辑与左边false则中断,如果左边为true,则返回右边代码的值

true || anything // 逻辑或左边true则中断,如果左边为false,则返回右边代码的值

<script>
// 逻辑中断   && ||

// 1. 逻辑与中断:如果左边为假,则中断,如果左边为真,则返回右边的值
console.log(false && 1 + 2)  // false
console.log(0 && 1 + 2)  // 0
console.log('' && 1 + 2)  // ''
console.log(undefined && 1 + 2)  // undefined
console.log(true && 1 + 2)  // 3 此处不会发生逻辑中断
console.log(1 && 1 + 2)  // 3 此处不会发生逻辑中断

// 2. 逻辑或中断,如果左侧为真,则中断,如果左侧为假,则返回右边的值
console.log(true || 1 + 2) // true  发生了中断
console.log(1 || 1 + 2) // 1  发生了中断
console.log(false || 1 + 2) // 3 此处不会发生逻辑中断

// 3. 使用场景
// function sum(x, y) {
//   return x + y
// }
// console.log(sum(1, 2)) // 3
// console.log(sum()) // NaN

function sum(x, y) {   // x = undefined
  //  x = undefined || 0
  // x = 1 || 0
  x = x || 0
  y = y || 0
  return x + y
}
console.log(sum())  // 0
console.log(sum(1, 2)) // 3
</script>

函数默认参数

默认参数:可以给形参设置默认值

说明:这个默认值只会在缺少实参传递或者实参是undefined才会被执行

默认参数和逻辑中断使用场景区别:

  1. 默认参数主要处理函数形参(处理参数要比逻辑中断更简单)
  2. 逻辑中断除了参数还可以处理更多的需求
<script>
  // 默认参数: 给形参一个默认值
  // 1. 默认参数里面的值执行:
  // 1.1 没有实参传递过来 x = 0 
  // 1.2 有实参传递但是传递的是undefined  x = 0
  function sum(x = 0, y = 0) {
  return x + y
	}
  console.log(sum()) // 0
  console.log(sum(undefined, undefined))  // 0
  console.log(sum(1, 2))  // 3

  // 2. 默认参数和逻辑中断使用场景的区别:
  // 2.1 默认参数主要针对的是形参
  // 2.2 逻辑中断除了处理参数之外,还可以做更多
</script>

函数返回值

函数的本质是封装(包裹),函数体内的逻辑执行完毕后,函数外部如何获得函数内部的执行结果呢?

要想获得函数内部逻辑的执行结果,需要通过 return 这个关键字,将内部执行结果传递到函数外部,这个被传递到外部的结果就是返回值。

返回值:把处理结果返回给调用者

<script>
    // 函数返回值细节
    // 1. return 结束函数,return 后面的代码不会执行了, break退出循环或者switch
    // function sum(x, y) {
    //   return x + y
    //   console.log('我不会执行')
    // }
    // console.log(sum(1, 3))

    // 2. return 和被返回的结果不要换行
    // function sum(x, y) {
    //   return
    //   x + y
    // }
    // console.log(sum(1, 3))

    // 3. 如果函数没有return 则默认返回的是 undefined
    function fn() {

    }
    console.log(fn())  // undefined
  </script>

总结:

  1. return会立即结束当前函数,所以后面代码不会再被执行
  2. 在 return 关键字和被返回的表达式之间不允许使用换行符,否则内部执行相当于会自动补充分号
  3. 函数可以没有 return,这种情况函数默认返回值为 undefined

作用域

作用域(scope): 变量或者值在代码中可用性的范围

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

全局作用域

作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件

处于全局作用域内的变量,称为全局变量

局部作用域

  1. 函数作用域。作用于函数内的代码环境
  2. 块级作用域。{ } 大括号内部

处于局部作用域内的变量称为局部变量

注意:

  1. 如果函数内部,变量没有声明,直接赋值,也当全局变量看,但是强烈不推荐
  2. 但是有一种情况,函数内部的形参可以看做是局部变量。

变量的访问原则

访问原则:在能够访问到的情况下先局部,局部没有再找全局,总结: 就近原则

匿名函数

函数可以分为具名函数和匿名函数

匿名函数:没有名字的函数,无法直接使用。

函数表达式

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

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

总结:

  1. 其实函数也是一种数据类型
  2. 函数表达式必须先定义,后使用
  3. 函数的形参和实参使用跟具名函数一致

立即执行函数

IIFE (立即执行函数表达式) (Immediately Invoked Function Expression)

场景介绍: 避免全局变量之间的污染

注意;多个立即执行函数要用 ; 隔开,要不然会报错

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

综合案例

在这里插入图片描述

需求:用户输入秒数,可以自动转换为时分秒

分析:

①:用户弹窗输入 总秒数

②:封装函数 getTime, 计算时分秒,注意:里面包含数字补0

③:打印输出

计算公式:计算时分秒

小时: h = parseInt(总秒数 / 60 / 60 %24)

分钟: m = parseInt(总秒数 / 60 % 60 )

秒数: s = parseInt(总秒数 % 60)

完整代码:


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>综合案例-转换时间案例</title>
  <style>
    .box {
      position: relative;
      width: 190px;
      height: 260px;
      color: #fff;
      background: #e83632 url(./images/bg.png) 50%/contain no-repeat;
    }

    .title {
      width: 100%;
      text-align: center;
      font-size: 30px;
      font-weight: 700;
      padding-top: 31px;
    }

    .count {
      margin-top: 90px;
      font-size: 14px;
      text-align: center;
    }

    .timer {
      margin-left: auto;
      margin-right: auto;
      width: 130px;
      height: 30px;
      margin-top: 10px;
      display: block;
    }

    .timer span {
      position: relative;
      float: left;
      width: 30px;
      height: 30px;
      text-align: center;
      background-color: #2f3430;
      margin-right: 20px;
      color: white;
      font-size: 20px;
    }

    .timer span:nth-child(-n+2)::after {
      content: ":";
      display: block;
      position: absolute;
      right: -20px;
      font-weight: bolder;
      font-size: 18px;
      width: 20px;
      height: 100%;
      top: 0;
    }

    .timer span:last-child {
      margin-right: 0;
    }
  </style>
</head>

<body>
  <!-- <div class="box">
    <div class="title">计算时间</div>
    <div>
      <div class="count">转换为时分秒</div>
      <div class="timer">
        <span class="hour">01</span>
        <span class="minute">22</span>
        <span class="second">58</span>
      </div>
    </div>
  </div> -->

  <script>
    // 转换时分秒案例 
    // 计算公式:计算时分秒
    // 小时:  h = parseInt(总秒数 / 60 / 60 % 24)
    // 分钟:  m = parseInt(总秒数 / 60 % 60)
    // 秒数:   s = parseInt(总秒数 % 60) 

    // 1. 用户输入总的秒数
    let totalSeconds = +prompt('请您输入总的秒数:')

    // 2. 封装函数 getTime,把总的秒数转换为时分秒,注意记得数字补0 哦
    function getTime(t = 0) {
      // 转换小时
      let h = parseInt(t / 60 / 60 % 24)
      // 转换分钟
      let m = parseInt(t / 60 % 60)
      // 转换秒数
      let s = parseInt(t % 60)
      // 数字补0
      h = h < 10 ? '0' + h : h
      m = m < 10 ? '0' + m : m
      s = s < 10 ? '0' + s : s
      console.log(h, m, s)
      return `
        <span class="hour">${h}</span>
        <span class="minute">${m}</span>
        <span class="second">${s}</span>
      `
    }
    let str = getTime(totalSeconds) // 实参
    console.log(str)
    // 3. 页面打印输出
    document.write(`
       <div class="box">
        <div class="title">计算时间</div>
        <div>
          <div class="count">转换为时分秒</div>
          <div class="timer">
            ${str}
          </div>
        </div>
      </div>
    `)
  </script>
</body>

</html>

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

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

相关文章

JavaScript的for循环学不明白怎么办?

&#x1f482; 个人网站:【海拥】【游戏大全】【神级源码资源网】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 寻找学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】 目录 前言for循环的基本语法…

Apikit 自学日记:自动生成 API 文档

功能入口&#xff1a;API管理应用 / 选中某个项目 / 其他菜单 / 数据源同步&#xff08;API文档自动生成&#xff09; 该功能可通过配置数据源信息&#xff0c;实现基于数据源的API信息自动生成API文档。 当前支持5种数据源&#xff1a;Swagger URL、apiDoc、Github、gitlab、…

【FPGA零基础学习之旅#9】状态机基础知识

&#x1f389;欢迎来到FPGA专栏~状态机基础知识 ☆* o(≧▽≦)o *☆嗨~我是小夏与酒&#x1f379; ✨博客主页&#xff1a;小夏与酒的博客 &#x1f388;该系列文章专栏&#xff1a;FPGA学习之旅 文章作者技术和水平有限&#xff0c;如果文中出现错误&#xff0c;希望大家能指正…

MAC电脑使用技巧

Mac打开根目录 /user下的文件 mac 上怎么显示隐藏的/user文件夹&#xff0c;有两种方法可选~~~ 1&#xff0c;Finder界面是&#xff0c;最上方&#xff0c;通过“前往”进入“电脑”或文件夹 先进入到需要显示隐藏文件的文件夹下 接着按Command苹果键F,在窗格上会显示搜索栏 然…

爬虫框架和库有多重要?

爬虫框架和库在网络数据提取和分析中非常重它们为开发人员提供了工具和功能&#xff0c;使他们能够更轻松地从互联网上抓取数据。爬虫框架和库通常提供了高效的网络请求、数据解析和存储机制&#xff0c;简化了爬取过程。 使用爬虫框架库有以下几个重要优势&#xff1a; 快速开…

探索Android Jetpack Compose的Surface组件

随着声明性 UI 框架 Jetpack Compose 的出现&#xff0c;Android 开发变得更加简洁和直观。在这篇博客中&#xff0c;我们将深入探讨其中的一项基本构建块 —— Surface 组件&#xff0c;了解它如何影响 UI 的显示和设计。 一、Jetpack Compose和Surface组件 二、Surface组件…

强化学习:值函数近似

例子引入 值得注意的是&#xff0c;之前学习的 状态值和动作值 实际上都是以表格的形式表示的&#xff0c;他的好处是便于直观理解与分析&#xff0c;但缺点是难以处理大量的数据的或连续的状态或行动空间&#xff0c;表现在存储和泛化能力两个方面。如下&#xff1a; 为了解决…

Css设置border从中间向两边的颜色渐进效果

Css设置border从中间向两边的颜色渐进效果 .list-item {border-bottom: 1rpx solid;border-image: linear-gradient(to right, rgba(0,0,0,.1) 0%, rgba(81, 110, 197, 0.76) 50%, rgba(0,0,0,.1) 100%) 1;}效果如图&#xff1a;

js精度问题之bignumber.jsdecimal.js的基本使用

一、背景 JavaScript中存在精度缺失问题 为什么&#xff1f; 主要是由于浮点数的表示方式以及计算机的二进制运算原理导致的 JavaScript使用IEEE 754标准定义了浮点数的表示和计算规则。在这种表示方式中&#xff0c;浮点数由符号位、指数位和尾数位组成。尾数位的长度是固…

智慧高校IT智能运维方案

当前高校网络已成为每个学校必备的信息基础设施&#xff0c;也成了学校提高教学、科研及管理水平的重要途径和手段。随着信息化发展&#xff0c;高校网络建设逐步走向数字化、智慧化&#xff0c;传统的人力巡检、运维逐渐难以支撑高校校园稳定运行。因此&#xff0c;如何在有限…

半导体芯片封装工艺流程,芯片定制封装技术

当我们购买电子产品时&#xff0c;比如手机、电视或计算机&#xff0c;这些设备内部都有一个重要的组成部分&#xff0c;那就是半导体芯片。半导体芯片是由许多微小的电子元件组成的&#xff0c;为了保护和使用这些芯片&#xff0c;它们需要经过一个被称为封装的工艺流程。下面…

EasyRecovery16免费版电脑数据恢复工具

EasyRecovery是一款优质的数据恢复软件&#xff0c;Windows和Mac两个平台都可以运行。可恢复电脑、相机、移动硬盘、U盘、SD卡、内存卡、光盘以及本地存储的电子邮件等数据。同时支持100多种不同格式的文件恢复。EasyRecovery开发了个人版、专业版和企业版三重安装包&#xff0…

想要财务自由

*近日&#xff0c;有调查称“大概五分之一的年轻人存款在一万元以内。10万元存款是一个“坎”&#xff0c;存款超过10万就会超过53.7%的人。”“年轻人”“存款”两个词碰撞在一起&#xff0c;引来了广泛的关注和讨论。你认为年轻人存款难吗&#xff1f;可以从以下几个角度发表…

MapBox 实现自定义地图样式配置(包含本地静态引入)

Mapbox 官方提供了非常多的样式的底图,但是有的时候我们想要自己定义地图的样式基调,比如我们想看到这种样式的地图: 这就需要我们要有自己配置地图的能力了。 那么接下来我们说说怎么做。 首先我们还是登录 mapbox 的官网,找到样式配置的页面,这里直接给大家链接: A…

软件外包开发测试工具

软件测试是软件项目中非常重要的一个环节&#xff0c;在软件项目上线前必须要将问题测出来&#xff0c;否则上线后出现大量问题不但可能引起经济损失&#xff0c;而且也会失去客户的信任。今天和大家分享软件测试中常用的一些工具&#xff0c;希望对大家有所帮助。北京木奇移动…

系列六、Typora下载安装

一、下载 链接&#xff1a;https://pan.baidu.com/s/1c_OMBN_MdWi6-PjKjtcXPg?pwdyyds 提取码&#xff1a;yyds 二、安装 选择安装目录&#xff0c;直接下一步&#xff0c;下一步...即可&#xff0c;例如

SpringBoot01:认识并构建SpringBoot项目

目录 一、Spring Boot简介 1、回顾什么是Spring&#xff1f; 2、Spring是如何简化java开发的&#xff1f; 3、什么是SpringBoot&#xff1f; 3.1、什么是SpringBoot呢&#xff1f; 3.2、所有技术框架的发展似乎都遵循一条主线规律 3.3、SpringBoot开发背景 3.4、Spring…

聊一聊布隆过滤器

布隆过滤器是一个精巧而且经典的数据结构。 你可能没想到&#xff1a;RocketMQ、 Hbase 、Cassandra 、LevelDB 、RocksDB 这些知名项目中都有布隆过滤器的身影。 对于后端程序员来讲&#xff0c;学习和理解布隆过滤器有很大的必要性。下面&#xff0c;一起看一看布隆过滤器的…

智能客服外包服务在医药行业的应用

随着科技的不断进步&#xff0c;智能客服已经在各个行业得到了广泛应用&#xff0c;医药行业也不例外。那么&#xff0c;智能客服在医药行业中又有哪些应用呢&#xff1f;让我们一起来看看吧。 医药行业作为一个高度专业化且具有广泛需求的行业&#xff0c;每天都会涉及到大量…

10个免费PDF转PPT方法,请收好以备不时之需!

众所周知&#xff0c;PDF&#xff08;便携式文档格式&#xff09;文件广泛用于交换各种信息&#xff0c;包括文本、图像和图形。但有时&#xff0c;您可能想将 PDF 文件转换为其他格式&#xff0c;例如 PowerPoint。在本文中&#xff0c;我们将讨论 10 种将 PDF 转换为 PPT 的免…