JavaScript 基础（4）

干净..

已于 2023-07-17 18:14:08 修改

阅读量105

点赞数

文章标签： javascript

于 2023-07-17 18:12:52 首次发布

本文链接：https://blog.csdn.net/2301_77293343/article/details/131760727

版权

本文介绍了JavaScript中的函数基本概念，包括函数的作用、声明与调用，参数传递，返回值，以及作用域的全局与局部概念。还讨论了匿名函数的使用，如函数表达式和立即执行函数，并提及了逻辑运算符的短路效应。通过示例展示了如何在实际编程中应用这些知识。

摘要由CSDN通过智能技术生成

函数

1.为什么需要函数

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

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

2.函数使用

1.函数声明语法：function 函数名() { 函数体 }

命名规范：函数名的前缀应该为动词

2. 函数的调用语法：函数名() //函数不调用自己不执行可以多次调用

3.函数的复用代码和循环重复代码的区别：循环代码写完立即执行，不能很方便控制执行位置

函数复用代码随时调用，随时执行，可重复调用

3.函数传参

声明语法：function 函数名(参数列表) { 函数体 }

调用语法：函数名(传递的参数列表)

好处：可以极大的提高函数的灵活性参数中间用逗号隔开

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

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

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

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

参数的默认值：用户不输入实参，可以给形参默认值，不给值的话默认undefined 可以默认为0

function getSum(x = 0, y = 0) {
   document.write(x + y)
}
getSum()//结果是0 而不是NaN
getSum(1,2)//结果是3

4.函数返回值

函数很多情况下需要返回值。函数内部不需要结果，而是返回结果

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

语法：return 需要返回的数据

<script>
        function getSum(x, y) {
            return x + y
        }
        let sum = getSum(1, 2)
        console.log(sum)
</script>

总结：

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

函数的细节

1.两个相同的函数后面的会覆盖前面的函数
2.在Javascript中实参的个数和形参的个数可以不一致

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

如果实参过多多余的实参会被忽略 (函数内部有一个arguments,里面装着所有的实参)
3.函数一旦碰到return就不会在往下执行了函数的结束用return

5.作用域

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

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

1.全局作用域

作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件

处于全局作用域内的变量，称为全局变量 在任何区域都可以访问和修改

2.局部作用域

作用于函数内的代码环境，就是局部作用域。因为跟函数有关系，所以也称为函数作用域。

处于局部作用域内的变量，称为局部变量 只能在当前函数内部访问和修改

3.特殊情况

如果函数内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐
但是有一种情况，函数内部的形参可以看做是局部变量。
{}中的语句也是局部语句

4.变量的访问原则

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

案例：


        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()

6.匿名函数

函数分为具名函数和匿名函数匿名函数：没有名字的函数,无法直接使用。

匿名函数的使用方式：函数表达式立即执行函数

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

语法：let 函数名 = function() { //函数体 } 调用：函数名()

具名函数的调用可以写在任何位置，但是函数表达式必须先声明函数表达式后调用

6.2 立即执行函数：避免全局变量之间的污染 / 防止变量命名重复(用后即焚)

语法：1.(function () {} ) ();

2.(function () {} () );

注意：

无需调用，立即执行，其实本质已经调用了
多个立即执行函数要用 ; 隔开，要不然会报错\
立即执行函数中, return不生效
可以命名,但没必要
后期常用,尽量熟悉

综合案例

计算时间函数

<script>
        //用户输入
        let second = +prompt('请输入总秒数：')
        //封装函数
        function getTime(t) {
            //转换
            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
            return `转换完毕之后是${h}小时${m}分${s}秒`
        }
        let str = getTime(second)
        document.write(str)
</script>