Day04-函数

纯纯不会写代码

已于 2023-02-02 16:29:22 修改

阅读量55

点赞数

分类专栏： JavaScript基础文章标签： css html 前端 vscode

于 2022-11-01 16:37:27 首次发布

本文链接：https://blog.csdn.net/weixin_45831040/article/details/127636280

版权

JavaScript基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Day04-函数

一、函数
二、综合案例

一、函数

1.1 函数的使用

函数的声明语法
在这里插入图片描述
函数名命名规范
1.和变量命名基本一致
2.尽量小驼峰式命名法
3.前缀应该为动词
4.命名建议：常用动词约定

2.1 函数传参

声明语法
在这里插入图片描述

形参如果不被赋值，就是undefined

3.1 函数返回值

用return返回数据
1.在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用
2.函数内部只能出现 1 次 return，并且 return 后面代码不会再被执行，所以 return 后面的数据不要换行
3.return会立即结束当前函数
4.函数可以没有 return，这种情况函数默认返回值为 undefined

返回多个数据时，可以返回数组

<!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(x,y) {
            let jia = x + y
            let jian = x - y
            return [jia,jian]
        }
        let re = fn(1,2)
        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) {
            let max = min = arr[0]
            for (let i = 1; i < arr.length; i++) {
                if (max < arr[i]) {
                    max = arr[i]
                }
                if (min > arr[i]) {
                    min = arr[i]
                }
            }
            return [max,min]
        }
        let re = getArrMaxAndMin([1,5,8,2,0])
        document.write(`最大值是: ${re[0]},最小值是: ${re[1]}`)
    </script>
</body>
</html>

4.1 作用域

三种作用域
在这里插入图片描述
三种变量

在这里插入图片描述

变量访问原则-作用域链
1.只要是代码，就至少有一个作用域
2.写在函数内部的局部作用域
3.如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
4.根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访
问，就称作作用域链
注意：采取就近原则的方式来查找变量最终的值

5.1 匿名函数

语法：
在这里插入图片描述
调用：

<script>
        let num = 10
        let fn = function () {
            console.log(111)
        }
        fn()    // 可以直接调用
        let gx = function (x,y) {
            console.log(x + y)
        }
        gx(1,2) //可以传实参
    </script>

后期 web API 会使用：
在这里插入图片描述

立即执行函数

场景介绍: 避免全局变量之间的污染
语法：
在这里插入图片描述
注意： 多个立即执行函数要用 ; 隔开，要不然会报错

二、综合案例

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

 <script>
        let second = +prompt('请输入总的秒数:') 
        function getTimes(t) {
            let h = parseInt(t / 60 / 60)
            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
            return `${h}小时${m}分${s}秒`
        }
        let str = getTimes(second)
        document.write(str)
    </script>