JavaScript入门day4 函数、逻辑中断

‍小林同学学JAVA

已于 2024-09-23 11:45:21 修改

阅读量734

点赞数 20

分类专栏：前端文章标签： javascript 前端开发语言

于 2024-07-28 01:21:00 首次发布

本文链接：https://blog.csdn.net/2301_77358195/article/details/140738866

版权

前端专栏收录该内容

36 篇文章 0 订阅

订阅专栏

1.函数

1.1 为什么需要函数

函数：

function，是被设计为执行特定任务的代码块

说明：

函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于精简代码方便复用

‘

1.2 函数使用

函数的声明语法：

函数名命名规范：

Ø 和变量命名基本一致

Ø 尽量小驼峰式命名法

Ø 前缀应该为动词

Ø 命名建议：常用动词约定

函数的调用语法：

注意：声明（定义）的函数必须调用才会真正被执行，使用 () 调用函数

1.3 函数传参

形参：可以看做变量，但是如果一个变量不给值，默认是什么？

undefined

但是如果做用户不输入实参，刚才的案例，则出现 undefined + undefined 结果是什么？

NaN

我们可以改进下，用户不输入实参，可以给 形参默认值 ，可以默认为 0, 这样程序更严谨，可以如下操作：

声明语法：

参数列表：

Ø 传入数据列表

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

Ø 多个数据用逗号隔开

调用语法：

练习：

函数封装-求学生总分

需求：学生的分数是一个数组,计算每个学生的总分

分析：

①：封装一个求和函数

②：传递过去的参数是一个数组

③：函数内部遍历数组求和

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function add(arr = []) {
            let sum = 0
            for (let i = 0; i < arr.length; i++) {
                sum += arr[i]
            }
            return sum
        }

        let arr1 = [46, 68, 90]
        console.log(`数组总分为：${add(arr1)}`)
    </script>
</body>

</html>

1.4 函数返回值

有返回值函数的概念：

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

Ø 这就是有 返回值 的函数

当函数需要返回数据出去时，用return关键字

怎么使用呢？

厨子

细节：

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

Ø return 后面代码不会再被执行，会立即结束当前函数，所以 return 后面的数据不要换行写

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

点餐人

数组形式可以是实现返回(return)多个值：

1.4 函数细节补充

两个相同的函数后面的会覆盖前面的函数

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

Ø 如果形参过多会自动填上undefined (了解即可)

Ø 如果实参过多那么多余的实参会被忽略 (函数内部有一个arguments(...),里面装着所有的实参)

函数一旦碰到return就不会在往下执行了函数的结束用return

1.5 作用域

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的 作用域 。

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

注意：

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

如果函数内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐

1.变量的访问原则

只要是代码，就至少有一个作用域
写在函数内部的局部作用域
如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
访问原则：在能够访问到的情况下先局部，局部没有在找全局

1.6 匿名函数

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

使用方式：

Ø 函数表达式

Ø 立即执行函数

1. 函数表达式

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

语法：

调用：

其中函数的形参和实参使用跟具名函数一致。

使用场景：

2. 立即执行函数

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

语法：

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

2.逻辑中断

开发中，还会见到以下的写法：

逻辑或运算符 (||) 会返回它的第一个真值操作数。如果第一个操作数是 falsy 值（如 0、null、undefined、false、NaN 或空字符串 ""），则返回第二个操作数。

其实类似参数的默认值写法

1.逻辑运算符里的短路

短路：只存在于 && 和 || 中，当满足一定条件会让右边代码不执行

原因：通过左边能得到整个式子的结果，因此没必要再判断右边

运算结果：无论 && 还是 || ，运算结果都是最后被执行的表达式值，一般用在变量赋值

2. 转换为Boolean型

显示转换：

1.Boolean(内容)

记忆： ‘’ 、0、undefined、null、false、NaN 转换为布尔值后都是false, 其余则为 true

隐式转换：

1. 有字符串的加法 “” + 1 ，结果是 “1”

2. 减法 - （像大多数数学运算一样）只能用于数字，它会使空字符串 "" 转换为 0

3. null 经过数字转换之后会变为 0

4. undefined 经过数字转换之后会变为 NaN

3.综合案例

1.转换时间案例

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

分析：

①：用户输入总秒数（注意默认值）

②：计算时分秒（封装函数）里面包含数字补0

③：打印输出

计算公式：计算时分秒

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

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

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

举个例子：如果 second 是 3665 秒，代码的处理过程如下：

小时：h = parseInt(3665 / 3600 % 24)，即 h = parseInt(1.0181 % 24)，所以 h = 1。
分钟：m = parseInt(3665 / 60 % 60)，即 m = parseInt(61.0833 % 60)，所以 m = 1。
秒：s = parseInt(3665 % 60)，即 s = parseInt(5)，所以 s = 5。

所以，3665秒就是1小时1分钟5秒。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 需求： 用户输入秒数，可以自动转换为时分秒
        let second = +prompt('请输入秒数:')
        /* 小时： h = parseInt(总秒数 / 60 / 60 % 24)
        分钟： m = parseInt(总秒数 / 60 % 60 )
        秒数: s = parseInt(总秒数 % 60) */
        function getTime(t){
            let h = parseInt(second / 60 / 60 % 24)
            let m = parseInt(second / 60 % 60 )
            let s = parseInt(second % 60)

            //个位数在前面补0,看起来更美观
            h = h < 10 ? '0' + h : h
            m = m < 10 ? '0' + m : m
            s = s < 10 ? '0' + s : s

            return (`转换完毕为${h}小时${m}分钟${s}秒`)
        }
        document.write(`${second}秒${getTime(second)}`)
    </script>
</body>
</html>