JavaScript : 函数function

层叠样式表广东分表
175 阅读4分钟
  • JavaScript里的函数不是我们学数学时的函数, 两者需要区分开来
  • 函数function, 是被设计为执行特定任务的代码块
  • 函数可以把具有相同或相似逻辑的代码包裹起来, 通过函数调用执行这些被"包裹"的代码逻辑, 这么做的优势是有利于精简代码, 方便使用, 提高开发效率.

一、函数使用

1. 函数的声明

image.png

 function sayHi() {
            document.write(`你好我是李狗蛋<br>`)
 }

2. 函数的命名规范

  • 和变量命名基本一致

  • 尽量小驼峰式命名法

  • 前缀应该为动词

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

image.png

image.png

3. 函数的调用

image.png

  • 声明（定义）的函数必须调用才会真正被执行，使用 () 调用函数
  • alert() , parseInt() 这种名字后面跟小括号的本质都是函数的调用

4. 函数体

image.png

  • 函数体是函数的构成部分，它负责将相同或相似代码“包裹”起来，直到函数调用时函数体内的代码才会被执行。函数的功能代码都要写在函数体当中。

5. 函数传参

  • 把函数在复用过程中会改变的值提取出来, 作为参数传递进去.这样可以极大提高函数的灵活性
    <script>
        // 封装一个求两个数字的和 的函数，并输出在页面中
        function getSum(a, b) {
            document.write(a + b)
        }
        // let num1 = +prompt('请输入数字1')
        // let num2 = +prompt('请输入数字2')
        
        getSum(10, 20)
        // 将参数10和20传到函数getSum()
        
    </script>
    1. 术语1: 在声明函数的小括号里面写的数值我们称之为形式参数
    1. 术语2: 在调用函数的小括号里面写的数值我们称之为实际参数
    1. 形参作用: 本质上就是在函数内部声明变量
    1. 实参作用: 给形参赋值
    1. alert('打印'), parseInt('11'), Number('11') 本质上都是函数调用的传参

6. 函数的返回值

  • 使用过的返回值

    • let result = prompt('请输入你的年龄?');
    • let result2 = confirm('你确定要删除这条记录么?')
    • let result3 = parseInt('111');
    • // 函数的返回值不是必须的, 比如: alert() let result4 = alert('弹出一个内容');

  • 语法 return value;

function doSomething(){
    // doing
    return result;
}

let jieguo = doSomething();

  • 场景eg

    调用两次求和函数,得到每一次求和的结果,再比较这两个结果的大小

function getSum(a, b) {
  let sum = a + b;
  return sum;
}

let sum1 = getSum(10, 20);
let sum2 = getSum(5, 16);

let max = sum1 > sum2 ? sum1 : sum2;
console.log(max);

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

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

  • return会立即结束当前函数

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

7. 作用域

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

image.png

  • 全局变量: 在函数外部let 的变量 => 全局变量在任何区域都可以访问和修改

  • 局部变量: 在函数内部let 的变量 => 局部变量只能在当前函数内部访问和修改

  • 块级变量: let定义的变量,只能在块作用域里访问,不能跨块访问,也不能跨函数访问

    • 大坑: 局部变量必须是函数里面声明过(let)的变量

  • 变量访问原则-作用域链

    • 只要是代码, 就至少有一个作用域链

    • 写在函数内部的局部作用域

    • 如果函数中还有函数, 那么在这个作用域中就又可以诞生一个作用域

    • 根据在内部函数可以访问外部函数变量的这种机制, 用链式查找决定哪些数据能被内部函数访问, 就称作作用域链

    • 在能够访问到的情况下 先局部 局部没有在找全局

8. 匿名函数

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

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

  • 使用方式

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

    • 自执行（匿名函数自执行）

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

9. 综合案例

  • 用户输入秒数
  • 将用户输入的秒数转化为时分秒
  • 在页面上输出00:00:00的格式
    <script>
        /*
            小时：  h = parseInt(总秒数 / 60 / 60 % 24)
            分钟：  m = parseInt(总秒数 / 60 % 60 )
            秒数：  s = parseInt(总秒数 % 60)
        */

        // 用户输入的秒数 转换为时分秒 不足两位补0
        let times = +prompt('请您输入秒数')


        function getTime(time) {
            let h = parseInt(time / 60 / 60 % 24)
            let m = parseInt(time / 60 % 60)
            let s = parseInt(time % 60)

            // 补0的操作  ctrl+d 快速选中相同的内容
            h = h < 10 ? '0' + h : String(h)
            m = m < 10 ? '0' + m : String(m)
            s = s < 10 ? '0' + s : String(s)
            // s = s < 10 ? '0' + s : s.toString()

            // 不做任何处理 直接返回三个值
            return [h, m, s]
        }

        let res = getTime(times)
        console.log(res);
        document.write(`您输入的秒数为${time},转换的时间为：${res[0]}:${res[1]}:${res[2]}`)
    </script>
avatar
文章
阅读
粉丝