JavaScript 基础 - 第四篇

最新推荐文章于 2024-05-09 10:19:41 发布
最新推荐文章于 2024-05-09 10:19:41 发布
阅读量40 收藏
点赞数
文章标签： javascript 前端 开发语言 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57564064/article/details/129927574
版权

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

  • 函数

  • 综合案例

函数

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

函数的基本使用

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

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

声明（定义）函数

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

利用关键字 function 定义函数 （声明函数）

语法：

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

注意：

  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>
一只小老虎ovo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Web前端开发第4季：JavaScript基础入门
06-14
本季课程为JavaScript基础语法篇，着重介绍了JavaScript脚本语言的基础语法部分内容包含：◆ 认识JavaScript脚本语言、发展史、编译工具◆ JavaScript中的变量、数据类型、类型转换◆ 条件选择（if--else, if--else ...
JavaScript学习笔记--基础篇--变量的魅力
qq_51766427的博客
03-17 1855
JavaScript学习笔记--基础篇--变量的魅力 内容如下: 什么是直接量？JS数据类型有哪些？怎么声明变量？
JavaScript基础-数组
weixin_43342445的博客
12-14 1227
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 javascript基础部分---数组javascript基础---数组一、数据简介二、使用步骤1.数组的创建2.数组的基本使用总结 javascript基础—数组 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、数据简介 1 .数组也是一个对象。 2.它和普通对象功能
一篇文章带你进入JavaScript--JavaScript总结
热门推荐
凭时间赢来的东西，时间肯定会为之作证
12-29 9万+
前言:在学习这么长时间后的JavaScript后,今天来做个大概的总结,首先由基础的JavaScript介绍开始。 目录:一.什么是JavaScript1. 基本的语法2.字面量和变量3. 标识符二.JavaScript基本(1).数据类型(2).数据类型转换(3).运算符： 一.什么是JavaScript 在学习前我们首先得知道这门语言是什么,有什么用,更详细的介绍–JavaScript入门,下面我们来看一下JavaScript; JavaScript负责页面中的的行为。 - 它是一门运行在浏览器
JavaScript基础 - 简单的查询功能实现
Chanyto的博客
08-07 3038
本题将会使用到一些lodash以及jquery方面的知识，但不管是库还是原生，它们解题的思路都是一样的，我们在这个阶段所关注的东西并不是说需要去记多少多少的方法，而是思考和掌握解题的思路。通过不过的测试，去发现问题所在。进而找到解决问题的办法。逻辑思维才是学习编程语言的重中之重。提示：以下是本篇文章正文内容，下面案例可供参考本题比较简单，这里只写了获取对应成绩进行匹配的方法，其他的查询，例如查询姓名，查询学号等方式都大同小异，知识判断的条件不一，也是很好实现的。...
JavaScript学习笔记--基础篇--[ ] 的两个方面、四种使用
qq_51766427的博客
03-23 851
JavaScript中的 [ ] 如何使用，使用时的注意事项？报错原因是什么？
我的Javascript学习-------基础篇（四）
Y4tacker的博客
04-20 1万+
声明：以下所有内容来源于网络各个网站的搜集整理，目的是便于自己复习学习； 文章目录循环for循环双重for循环while循环do-while循环continue、break代码规范标识符命名规范操作符规范单行注释规范其他规范断点调试 循环 for循环 语法结构 for(初始化变量; 条件表达式; 操作表达式 ){ //循环体 } 名称 作用 初始化变量 通常被...
【JavaScript】JavaScript基础篇
X_H学Java的博客
08-08 1697
JavaScript为前端三剑客之一，主要实现和用户交互的动作，本篇文章对JavaScript的基础语法进行了总结，帮助大家进一步入门JavaScript
JavaScript 基础入门篇
wuxiaopengnihao1的博客
09-07 470
本文章向大家介绍javascript第一天，主要内容包括JavaScript 基础 - 第1天、一、介绍、1.1 引入方式、内部形式、外部形式、1.2 注释和结束符、单行注释、多行注释、结束符、基本概念、基础应用、原理机制和需要注意的事项等，并结合实例形式分析了其使用技巧，希望通过本文能帮助到大家理解应用这部分内容。
JavaScript基础之数组上篇--数组的基础知识
u011863822的博客
11-29 1874
任何编程语言数组是最常用的一种存储简单数据的一种方式，而JavaScript也是。本篇主要聊一些数组的用法，当然不是数组所有的方法。也可以说是对数组的一些简单的了解和理解吧。 数组操作 数组创建 创建一个长度位3的空数组。 arr =new Array(3);//通过对象进行声明数组 这个一般不推荐 arr1=[,,,];// 数组字面量 常用方式 arr2=Array(3);//通过内置的Array构造函数声明数组 这个一般的时候不使用 知道即可 可以看出两种创建数组的方式，其实本质是相同的，
我的Javascript学习-------基础篇（五）
Y4tacker的博客
04-20 1万+
写给自己：每天进步一点点，干tmd！！！ 文章目录数组数组的基础概念数组的创建获取数组中的元素遍历数组数组中新增元素函数函数的使用声明函数调用函数函数的封装函数的参数函数参数语法函数形参和实参数量不匹配时函数的返回值return 语句break ,continue ,return 的区别arguments的使用函数的两种声明方式 数组 数组的基础概念 关于什么是数组这网上一堆堆，看看就好！ 数组的...
Javascript入门学习资料收集整理篇
01-21
Javascript入门学习第一篇 js基础Javascript入门学习第二篇 js类型Javascript入门学习第三篇 js运算Javascript入门学习第四篇 js对象和数组Javascript入门学习第五篇 js函数Javascript入门学习第六篇 js DOM编程...
Java大数据培训学校全套教程-JavaScript基础（20）
06-11
本门课程为"java大数据培训学校全套教材"系列课程的第二十篇，学习Js，构造函数，局部变量等相关概念让大家对JS 基础编程打下好的基础。 4）课程特色：专业细致，偏案例，理论强，多作业。5）课程软件使用：记事本，...
21天学通JavaScript(第2版)
09-30
第三篇讲解的是javascript的高级技术，主要讲解了javascript与xml技术、正则表达式、ajax基础、ajax高级应用、javascript与插件和javascript的调试与优化等。最后一篇为综合案例篇，用一个完整的例子讲解了如何使用...
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。
XING的博客
05-03 1214
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。数据库作为系统数据储存平台，实现了基于B/S结构的Web系统。界面简洁，操作简单。采用M（model）V（view）C（controller）三层体系结构，通过。
基于Springboot的家具网站
趙兴晨的博客
05-03 551
本文介绍了一款基于现代Web技术构建的家具网站，旨在通过互联网技术优化家具产品的展示与销售，提高用户的购物体验，同时为家具制造商和零售商提供一个高效的在线销售平台。本研究的主要目的是设计并实现一个高效、易用的家具网站，通过系统化的产品展示流程和智能化的购物功能，提升家具产品的在线销售效率和管理水平。本研究通过设计和实现家具网站，有效地解决了传统家具销售中的展示局限性和购物效率低下的问题，提高了家具产品的在线销售效率和用户的购物体验，并为相关领域的研究和实践提供了有益的参考。
lint 代码规范，手动修复，以及vscode的第三方插件eslint自动修复
小十七的个人分享博客
05-06 663
不是语法规范，是一种书写风格，加多少空格，缩进多少，加不加分号，类似于书信的写作格式ESLint:是一个代码检查工具，用来检查你的代码是否符合指定的规则(你和你的团队可以自行约定一套规则)。在创建项目时，我们使用的是代码风格的规则，目前Standard的代码风格用的比较多建议把Standard代码规范看一遍，然后在写的时候, 遇到错误就查询解决。
TypeScript 类型系统深度解析：类型全览
最新发布
逐星的博客
05-09 531
TypeScript 提供了丰富的类型系统，允许开发者以静态方式定义和使用数据类型。这不仅提升了代码的安全性，还增强了代码的可读性和可维护性。
vue快速入门（五十）重定向
不起眼小菜菜的博客
05-03 438
注释很详细，直接上代码……
javaScript蓝桥杯----外卖给好评
10-25
JavaScript蓝桥杯是一个计算机编程竞赛，而外卖给好评是一个具体的问题，需要更多的上下文信息才能回答。不过，如果你想在JavaScript中实现外卖给好评的功能，可以考虑以下步骤： 1. 创建一个包含外卖评价的HTML页面，包括评分、评论和提交按钮。 2. 使用JavaScript编写一个函数，当用户点击提交按钮时，将评分和评论发送到服务器。 3. 在服务器端，使用后端编程语言（如PHP或Python）将评分和评论存储在数据库中。 4. 当用户查看外卖评价时，使用JavaScript从服务器获取评分和评论，并将它们显示在页面上。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值