前端JavaScript入门到精通，javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— JS基础（四）

news2024/10/5 12:31:34

开始吧，做时间的主人！

把时间分给睡眠，分给书籍，分给运动，

分给花鸟树木和山川湖海，

分给你对这个世界的热爱，

而不是将自己浪费在无聊的人和事上。

思维导图

函数

为什么需要函数

<!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>Document</title>
  <style>
    span {
      display: inline-block;
      width: 100px;
      padding: 5px 10px;
      border: 1px solid pink;
      margin: 2px;
      border-radius: 5px;
      box-shadow: 2px 2px 2px rgba(255, 192, 203, .4);
      background-color: rgba(255, 192, 203, .1);
      text-align: center;
      color: hotpink;
    }
  </style>
</head>

<body>

  <script>
    // // 1. 外层循环控制行数
    // for (let i = 1; i <= 9; i++) {
    //   // 2. 里层循环控制列数
    //   for (let j = 1; j <= i; j++) {
    //     document.write(`<span>${j} X ${i} = ${i * j}</span>`)
    //   }
    //   // 换行
    //   document.write('<br>')
    // }
    // // 1. 外层循环控制行数
    // for (let i = 1; i <= 9; i++) {
    //   // 2. 里层循环控制列数
    //   for (let j = 1; j <= i; j++) {
    //     document.write(`<span>${j} X ${i} = ${i * j}</span>`)
    //   }
    //   // 换行
    //   document.write('<br>')
    // }
    // // 1. 外层循环控制行数
    // for (let i = 1; i <= 9; i++) {
    //   // 2. 里层循环控制列数
    //   for (let j = 1; j <= i; j++) {
    //     document.write(`<span>${j} X ${i} = ${i * j}</span>`)
    //   }
    //   // 换行
    //   document.write('<br>')
    // }
    // 声明
    function sheet99() {
      for (let i = 1; i <= 9; i++) {
        // 2. 里层循环控制列数
        for (let j = 1; j <= i; j++) {
          document.write(`<span>${j} X ${i} = ${i * j}</span>`)
        }
        // 换行
        document.write('<br>')
      }
    }
    // 调用
    sheet99()
    sheet99()
    sheet99()
    sheet99()
  </script>
</body>

</html>

代码复用，生成多个99乘法表

函数使用

<!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>Document</title>
</head>

<body>
  <script>
    // let num = 10
    // console.log(num)
    // 1. 函数的声明   
    function sayHi() {
      console.log('hi~~~')
    }
    // 2. 函数调用   函数不调用，自己不执行
    sayHi()
    sayHi()
    sayHi()
  </script>
</body>

</html>

<!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>Document</title>
</head>

<body>

  <script>
    // 1. 求2个数的和
    // function getSum() {
    //   let num1 = +prompt('请输入第一个数')
    //   let num2 = +prompt('请输入第二个数')
    //   console.log(num1 + num2)
    // }
    // getSum()
    // 2. 求 1~100 累加和
    function getSum() {
      let sum = 0
      for (let i = 1; i <= 100; i++) {
        sum += i
      }
      console.log(sum)
    }
    getSum()
  </script>
</body>

</html>

函数传参

<!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>Document</title>
</head>

<body>

  <script>

    // 2. 求 1~100 累加和
    // function getSum(end) {   // end = 50
    //   // console.log(end)
    //   let sum = 0
    //   for (let i = 1; i <= end; i++) {
    //     sum += i
    //   }
    //   console.log(sum)
    // }
    // getSum(50)  // 1~50
    // getSum(100)  // 1~100

    function getSum(start, end) {   // end = 50
      // 形参  形式上的参数  
      // console.log(end)
      let sum = 0
      for (let i = start; i <= end; i++) {
        sum += i
      }
      console.log(sum)
    }
    getSum(1, 50)  // 调用的小括号里面 实参 - 实际的参数
    getSum(100, 200)  // 实参 - 实际的参数
  </script>
</body>

</html>

<!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>Document</title>
</head>

<body>
  <script>
    // 1. 封装函数
    // 给一个参数的默认值
    function getArrSum(arr = []) {
      // console.log(arr)
      let sum = 0
      for (let i = 0; i < arr.length; i++) {
        sum += arr[i]
      }
      console.log(sum)
    }
    getArrSum([1, 2, 3, 4, 5])
    getArrSum([11, 22, 33])
    getArrSum()  // 0
  </script>
</body>

</html>

函数返回值

<!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>Document</title>
</head>

<body>
  <script>
    // // 函数的返回值
    // function fn() {
    //   return 20
    // }
    // // fn() 调用者 相当于执行了    fn()   = 20
    // // return 的值返回给调用者
    // // console.log(fn())
    // // let num = prompt('请输入数字')
    // let re = fn()
    // console.log(re)

    // 求和函数的写法
    function getTotalPrice(x, y) {
      return x + y
      // return 后面的代码不会被执行
    }
    // console.log(getTotalPrice(1, 2))
    // console.log(getTotalPrice(1, 2))
    let sum = getTotalPrice(1, 2)
    console.log(sum)
    console.log(sum)

    function fn() {

    }
    let re = fn()
    console.log(re)  // undefined
  </script>
</body>

</html>

<!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>Document</title>

</head>

<body>
  <div></div>
  <script>
    // 1. 求最大值函数
    // function getMax(x, y) {
    //   return x > y ? x : y
    // }
    // let max = getMax(11, 234)
    // console.log(max)

    // //  2. 求任意数组的最大值，并且返回
    // function getArrValue(arr = []) {
    //   // (1)先准备一个max变量存放数组的第一个值
    //   let max = arr[0]
    //   // (2) 遍历比较
    //   for (let i = 1; i < arr.length; i++) {
    //     if (max < arr[i]) {
    //       max = arr[i]
    //     }
    //   }
    //   // (3) 返回值
    //   return max
    // }

    // // let max = getArrValue([1, 3, 5, 7, 9])
    // // let num = prompt('请输入')
    // let max = getArrValue([11, 3, 55, 7, 29])
    // console.log(max)
    //  3. 求任意数组的最大值和最小值，并且返回
    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]
      // return min
    }
    let newArr = getArrValue([11, 3, 55, 7, 29])
    console.log(`数组的最大值是: ${newArr[0]}`)
    console.log(`数组的最小值是: ${newArr[1]}`)
  </script>
</body>

</html>

<!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>Document</title>
</head>

<body>
  <script>
    // function getSum(x, y) {
    //   return x + y
    //   // 返回值返回给了谁？ 函数的调用者  getSum(1, 2)
    //   // getSum(1, 2) = 3
    // }
    // // let result = getSum(1, 2) = 3
    // // let num = parseInt('12px')
    // let result = getSum(1, 2)
    // console.log(result)
    // 1. 函数名相同， 后面覆盖前面

    // function fn() {
    //   console.log(1)
    // }
    // function fn() {
    //   console.log(2)
    // }
    // fn()
    // 2. 参数不匹配

    function fn(a, b) {
      console.log(a + b)
    }
    // (1). 实参多余形参   剩余的实参不参与运算
    // fn(1, 2, 3)
    // (2). 实参少于形参   剩余的实参不参与运算
    fn(1)   // 1 + undefined  = NaN 
  </script>
</body>

</html>

作用域

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

</html>

函数内部，第一次出现的局部变量被当做全局变量

无let变量声明关键词，甚至覆盖同名全局变量（强烈不推荐）

<!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>Document</title>
</head>

<body>
  <script>
    // let num = 20
    // function fn() {
    //   num = 10  // 全局变量来看  强烈不允许
    // }
    // fn()
    // console.log(num)

    // function fun(x, y) {
    //   // 形参可以看做是函数的局部变量
    //   console.log(x)
    // }
    // fun(1, 2)
    // console.log(x)  // 错误的

    // let num = 10
    function fn() {
      // let num = 20
      function fun() {
        // let num = 30
        console.log(num)
      }
      fun()
    }
    fn()
  </script>
</body>

</html>

匿名函数

第三方js文件（具名立即执行函数），担心变量名冲突：

<!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>Document</title>
</head>

<body>
  <script>
    // age = age + 1
    // 1. 用户输入
    let second = +prompt('请输入秒数:')
    // 2.封装函数
    function getTime(t) {
      // console.log(t)  // 总的秒数
      // 3. 转换
      // 小时：  h = parseInt(总秒数 / 60 / 60 % 24)
      // 分钟：  m = parseInt(总秒数 / 60 % 60)
      // 秒数: s = parseInt(总秒数 % 60) 
      let h = parseInt(t / 60 / 60 % 24)
      let m = parseInt(t / 60 % 60)
      let s = parseInt(t % 60)
      h = h < 10 ? '0' + h : h
      m = m < 10 ? '0' + m : m
      s = s < 10 ? '0' + s : s
      // console.log(h, m, s)
      return `转换完毕之后是${h}小时${m}分${s}秒`
    }
    let str = getTime(second)
    document.write(str)
    console.log(h)
  </script>
</body>

</html>

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

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

相关文章

pytest框架运行时的参数，以及多线程分布式运行用例、运行指定模块用例

pytest框架运行时的参数，以及多线程分布式运行用例、运行指定模块用例

一、运行时的参数 在上一篇博客中写了pytest最为核心的运行时前后置如何设置&#xff0c;细心的朋友可能也会发现其实我们当时就加过运行时的参数-vs。 pytest.main([‘-s’])&#xff1a;能打印出调试信息&#xff0c;print()或者日志都可以直接打印在控制台上。 pytest.ma…
阅读更多...
栈和队列1——栈的实现及其oj（括号匹配问题）

栈和队列1——栈的实现及其oj（括号匹配问题）

一&#xff0c;栈的概念 栈是一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈顶&#xff0c;另一端称为栈底。栈中的数据元素遵守后进先出LIFO&#xff08;Last In First Out&#xff09;的原则。 压栈&#xf…
阅读更多...
【100天精通Python】Day68：Python可视化_Matplotlib 绘制热力图，示例+代码

【100天精通Python】Day68：Python可视化_Matplotlib 绘制热力图，示例+代码

目录 1 值热力图&#xff08;Value Heatmap&#xff09;: 2 密度热力图&#xff08;Density Heatmap&#xff09; 3 时间热力图&#xff08;Time Heatmap&#xff09;: 4 空间热力图&#xff08;Spatial Heatmap&#xff09; 5 渐变热力图&#xff08;Gradient Heatmap&am…
阅读更多...
C语言实现获取文件大小（字节数）

C语言实现获取文件大小（字节数）

首先使用如下命令在当前文件夹&#xff0c;创建一个大小为1234578字节的空白文件&#xff1a; fsutil file createnew ./test.bin 12345678关于fsutil命令的介绍&#xff1a;Windows快速创建任意大小的空白文件 使用十六进制编辑器打开&#xff0c;可以看到内容全是0&#xf…
阅读更多...
滴滴一面：线程池任务，如何设置优先级？

滴滴一面：线程池任务，如何设置优先级？

说在前面 在40岁老架构师 尼恩的读者交流群(50)中&#xff0c;最近有小伙伴拿到了一线互联网企业如滴滴、极兔、有赞、希音、百度、网易的面试资格&#xff0c;遇到很多很重要的面试题&#xff1a; 如何设计线程池&#xff1f;请手写一个简单线程池&#xff1f; 就在昨天&…
阅读更多...
肖sir__mysql之综合题练习__013

肖sir__mysql之综合题练习__013

数据库题&#xff08;10*5&#xff09; 下面是一个学生与课程的数据库&#xff0c;三个关系表为&#xff1a; 学生表S&#xff08;Sid&#xff0c;SNAME,AGE,SEX&#xff09; 成绩表SC&#xff08;Sid&#xff0c;Cid&#xff0c;GRADE&#xff09; 课程表C&#xff08;Cid&…
阅读更多...
linux进程杀不死

linux进程杀不死

项目场景&#xff1a; 虚拟机 问题描述 linux进程杀不死 无反应 原因分析&#xff1a; 进程僵死zombie 解决方案&#xff1a; 进proc或者find命令找到进程所在地址 cat status查看进程杀死子进程
阅读更多...
【AI视野·今日CV 计算机视觉论文速览 第252期】Fri, 22 Sep 2023

【AI视野·今日CV 计算机视觉论文速览 第252期】Fri, 22 Sep 2023

AI视野今日CS.CV 计算机视觉论文速览 Fri, 22 Sep 2023 Totally 90 papers &#x1f449;上期速览✈更多精彩请移步主页 Interesting: &#x1f4da;SVGCustomization, 基于文本的矢量图生成定制(from 香港城市大学)。 website:https://intchous.github.io/SVGCustomization/ …
阅读更多...
OVS-DPDK/虚拟化学习

OVS-DPDK/虚拟化学习

用户/内核空间虚拟化 NFV和Middlebox的不同数据平面模型&#xff0c;具有不同的虚拟交换机选项、虚拟设备接口和虚拟化框架&#xff1a;(a)基于内核的vSwitch virtio-user/vhost-net和TUN/TAP VM&#xff1b;(b)基于内核的vSwitch virtio-user/vhost-net和TUN/TAP contain…
阅读更多...
MidJourneyAI绘画 | 我们一起出去玩呀

MidJourneyAI绘画 | 我们一起出去玩呀

阅读更多...
什么算泄露公司机密的行为（什么程度算公司泄密行为）

什么算泄露公司机密的行为（什么程度算公司泄密行为）

在当今的商业环境中&#xff0c;保护公司的核心竞争力和商业机密是至关重要的。然而&#xff0c;员工可能出于各种原因泄露这些信息&#xff0c;包括对竞争对手的追求、个人利益的驱动或者对工作的不满。在这种情况下&#xff0c;企业需要依赖专业的调查工具来揭示和证明员工的…
阅读更多...
OpenGL之相机

OpenGL之相机

OpenGL本身没有摄像机(Camera)的概念&#xff0c;但我们可以通过把场景中的所有物体往相反方向移动的方式来模拟出摄像机&#xff0c;产生一种我们在移动的感觉&#xff0c;而不是场景在移动。 本节我们将会讨论如何在OpenGL中配置一个摄像机&#xff0c;并且将会讨论FPS风格的…
阅读更多...
Nginx使用指南

Nginx使用指南

文章目录 前言一、源码编译1.1 编译1.2 第三方模块编译 二、配置文件2.1 配置语法2.2 location语法2.3 配置文件块2.4 全局变量 三、HTTP 服务器3.1 基本3.2 反向代理3.3 压缩3.4 负载均衡3.5 HTTPS 支持3.6 UrlRewrite3.7 防盗链配置3.8 跨域3.9 静态服务3.10 PC/手机端分离3.…
阅读更多...
Web3 solidity编写fillorder填充订单函数 并梳理讲述逻辑

Web3 solidity编写fillorder填充订单函数 并梳理讲述逻辑

好 经过上文 Web3 solidity编写cancelorder取消订单函数 并梳理讲述逻辑 我们成功编写了 cancelorder 取消订单函数 其实 做了取消订单 填充订单 已经是非常简单的事了 我们还是先起来ganache 虚拟环境 这里 我们 模仿 orderCancel 在做一存储结构 //存储被填充订单 mapping…
阅读更多...
追光者的梦

追光者的梦

追光者的梦 鸿蒙中我茫然于世&#xff0c;你是钻入我心里的那束光 我所有的梦想都是和你热烈的拥抱 没有追到你时&#xff0c;我一直在路上 追到你时&#xff0c;我的人生就被你点燃 ——致所有的追光者 合肥先进光源国家重大科技基础设施项目及配套工程启动会刚开过&…
阅读更多...
go学习之数组与Map

go学习之数组与Map

文章目录 一、数组1.为什么需要数组2.数组快速入门3、数组的定义和内存布局数组的使用数组的遍历数组的注意事项和细节数组的应用案例 4.slice切片1.基本介绍2.切片使用的三种方式way1way2way3 3.切片的注意事项4.string和slice 5.二维数组1.排序1&#xff09;排序的基本介绍2&…
阅读更多...
uni-app实现获取未来七天时间和星期几功能

uni-app实现获取未来七天时间和星期几功能

例子如下&#xff1a; HTML&#xff1a; <viewstyle"margin-top: 3%;width: 100%;height: 10vh;display: flex;justify-content: space-around;"><div v-for"(item,index) in same_week" :class"[same_dayitem.date? activ :,dis]"cl…
阅读更多...
在虚拟机上安装win10/ubuntu的教程

在虚拟机上安装win10/ubuntu的教程

以下内容源于网络资源的学习与整理&#xff0c;如有侵权请告知删除。 一、下载软件资源 1、首先下载虚拟机Vmware_Pro17软件并正确安装&#xff1a;网盘链接 2、然后下载操作系统的镜像文件&#xff1a;MSDN, 我告诉你 - 做一个安静的工具站 二、在虚拟机上安装ubuntu系统 1…
阅读更多...
EXP武器库编写

EXP武器库编写

文章目录 pocsuite3工具SQL注入EXP布尔盲注优化最终优化 延时注入 phpstudy2016-2018-RCE利用DVWA文件上传metinfo_5.0.4EXPSQL-布尔盲注文件包含漏洞 定制SQLmaptamper脚本sqli-labs/less-26关卡分析 tamper脚本编写 python是黑客最喜欢的编程语言之一&#xff0c;但同时go语言…
阅读更多...
基于AVR128单片机智能电风扇控制系统

基于AVR128单片机智能电风扇控制系统

一、系统方案 模拟的电风扇的工作状态有3种&#xff1a;自然风、常风及睡眠风。使用三个按键S1-S3设置自然风、常风及睡眠风。 再使用两个按键S4和S5&#xff0c;S4用于定时电风扇定时时间长短的设置&#xff0c;每按一次S4键&#xff0c;定时时间增加10秒&#xff0c;最长60秒…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023