开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> JavaScript基础之函数基本的使用及作用域概念梳理 -> 正文阅读

[JavaScript知识库]JavaScript基础之函数基本的使用及作用域概念梳理

JavaScript基础04

函数

函数使用

函数就是一段被重复使用的代码块,函数的使用有利于精简代码方便复用,提高开发效率

函数声明方法及调用方法:

<script>
  //函数声明
    function 函数名() {
      函数体
    }
  //函数调用
  函数名()
  </script>

函数命名规范

和变量命名基本一致

尽量小驼峰式命名法

前缀应该为动词

命名建议：常用动词约定

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zex5C6rk-1639039897213)(assets/1639014182401.png)]

案例:

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

<head>
</head>

<body>
  <script>
    function sayHi() {
      document.write('Hi Js!' + '<br>')
    }
    sayHi()//输出Hi Js!
    sayHi()
    sayHi()

    function getSum() {
      let num1 = 10
      let num2 = 20
      console.log(num1 + num2)
    }
//求100以内数字的和
    function getSum100() {
      let sum = 0
      for (let i = 1; i <= 100; i++) {
        sum += i
      }
      console.log(sum)
    }
    getSum()//输出30
    getSum100()//输出5050
  </script>
</body>

</html>

函数传参

为提高函数的灵活性,可以定义带有参数的函数,声明语法:

<script>
  function 函数名(参数列表){
	函数体
}
</script>

参数列表

传入数据列表

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

多个数据用逗号隔开

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-57LXYxIA-1639039897214)(assets/1639015154594.png)]

有参数的函数声明和调用

在这里插入图片描述

形参和实参

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bS0cT61j-1639039897214)(assets/1639015299846.png)]

形参：声明函数时写在函数名右边小括号里的叫形参（形式上的参数）

实参：调用函数时写在函数名右边小括号里的叫实参（实际上的参数）

形参可以理解为是在这个函数内声明的变量（比如 num1 = 10）实参可以理解为是给这个变量赋值

开发中尽量保持形参和实参个数一致

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

函数返回值

1.什么是函数返回值?

当调用某个函数，这个函数会返回一个结果出来

这就是有返回值的函数

2.为什么要让函数有返回值

语法

<script>
 // return 数据 return 20 return [数据一,数据二]
  // 求和函数有返回值  这个函数就只是求和，把结果返回给我们就行了，这个函数不需要打印输出
        function getSum(x, y) {
            x = x || 0
            y = y || 0
            // 先计算 x + y 再返回
            return x + y
        }
        let sum = getSum(1, 2)
        // let num1 = prompt('请输入')
        document.write(sum)
</script>

注意几个细节

在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用

函数内部只能出现 1 次 return，并且 return 后面代码不会再被执行，所以 return 后面的数据不要换行写

return会立即结束当前函数

函数可以没有 return，这种情况函数默认返回值为 undefined

return可以返回多个值

案例

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

<head>
</head>

<body>
    <script>
        // 求数组最大值的函数
        function getArrMaxValue(arr) {
            // 声明一个max变量
            // 把数组第一个值给 max
            let max = arr[0]
            // 开始遍历数组并比较
            for (let i = 1; i < arr.length; i++) {
                if (max < arr[i]) {
                    max = arr[i]
                }
            }
            // 返回这个最大值
            return max
        }
        let maxplus = getArrMaxValue([1, 6, 2, 9, 3])
        document.write(`数组的最大值是${maxplus}`)
    </script>
</body>

</html>

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

<head>
</head>

<body>
    <script>
        function fn(x, y) {
            let jia = x + y
            let jian = x - y
            // return jia, jian 结果值返回了 jian 因为return只能返回一个值
            return [jia, jian]
        }
        let re = fn(1, 2)   //  [3, -1]
        document.write(`相加之后的结果是：${re[0]},相减之后的结果是: ${re[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 getArrMaxAndMin(arr) {
            // 1.声明一个最大值变量和最小值变量
            let max = min = arr[0]
            // console.log(max, min)
            // 2. 遍历循环 得到最大值和最小值
            for (let i = 1; i < arr.length; i++) {
                if (max < arr[i]) {
                    max = arr[i]
                }
                if (min > arr[i]) {
                    min = arr[i]
                }

                // max < arr[i] ? max = arr[i] : max
                // min > arr[i] ? min = arr[i] : min

                // max = max < arr[i] ? arr[i] : max
                // min = min > arr[i] ? arr[i] : min

            }
            // 3. 返回值最大值和最小值
            return [max, min]
        }
        let value = getArrMaxAndMin([1, 5, 8, 2, 0])
        // value = [8,0]
        document.write(`数组的最大值是: ${value[0]}, 数组里面的最小值是： ${value[1]}`)



    </script>
</body>

</html>

作用域

作用域概述

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7U8lpH8i-1639039897215)(assets/1639022385926.png)]

变量作用域

在JavaScript中，根据作用域的不同，变量可以分为

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GJABVbZF-1639039897216)(assets/1639022433953.png)]

变量有一个坑，特殊情况：

如果函数内部或者块级作用域内部，变量没有声明，直接赋值，也当全局变量看.

但是强烈不推荐

但是有一种情况，函数内部的形参可以看做是局部变量。

变量访问原则-作用域链

只要是代码，就至少有一个作用域
写在函数内部的局部作用域
如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链

<script>
  function f1() {
let num = 123
function f2() {
console.log( num ) }//输出123
f2()
}
let num = 456
f1()
 </script>

<script>
  function f1() {
let num = 123
function f2() {
let num = 0
console.log(num) }//输出0
f2()
}
let num = 456
f1()
</script>

<script>
  let a = 1
function fn1() {
let a = 2
let b = '22'
fn2()
function fn2() {
let a = 3
fn3()
function fn3() {
let a = 4
console.log(a) //a的值 输出4
console.log(b) //b的值 输出22(类型为字符串)
} } }
fn1()
</script>

匿名函数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6dd4imlp-1639039897216)(assets/1639036940093.png)]

语法

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W6PGSHRx-1639039897216)(assets/1639037366875.png)]

立即执行函数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-a405OLCR-1639039897216)(assets/1639037611568.png)]

综合案例

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

分析：

①：用户输入总秒数

②：计算时分秒（封装函数）里面包含数字补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>Document</title>
</head>

<body>
  <script>
    function getTime(num) {
      //定义三个变量,分别存放转换时分秒后的数字
      let hours, times, seconds, res
      hours = parseInt(num / 3600)
      times = parseInt((num - hours * 3600) / 60)
      seconds = parseInt(num - hours * 3600 - times * 60)

      function addZero(snum) {
        snum = snum < 10 ? '0' + snum : snum
        return snum
      }
      hours = addZero(hours)
      times = addZero(times)
      seconds = addZero(seconds)
      return `转换后的时间为${hours}时${times}分${seconds}秒`
    }
    let insertNum = prompt("请输入一个数字") * 1
    document.write(getTime(insertNum))
  </script>
</body>

</html>

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript

初识vuex

vue项目安装包指令收集

加:2021-12-10 10:58:30 更:2021-12-10 10:58:36

360图书馆购物三丰科技阅读网日历万年历 2024年11日历

-2024/11/24 7:32:20-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码