初识js--函数(四)

184 阅读5分钟

函数

  • 什么是函数?
    • 首先明确一点,和我们数学中的函数是两个概念。
    • 在 JS 中,函数可以理解为将一段在程序中多次出现的代码封装起来的盒子,以便在多个地方调用执行。
    • 换句话说:函数就是一个内部封装了部分代码的盒子,可以在多个位置被调用.
  • 函数的使用
    • 创建函数(定义函数)
    • 调用函数

1、函数的定义与调用

  • 定义(创建)
    语法1:
    function 函数名(参数: 非必传, 暂时不写) { 函数被调用的时候需要执行的某一段代码 } ->声明式定义
    语法2:
    var 函数名 = function (参数: 非必传, 暂时不写) { 函数被调用的时候需要执行的某一段代码} ->赋值式定义
  • 调用(使用)函数名()
    • 调用的时候 不管如何定义, 都是使用 函数名()
    • 注意:如果一个函数只定义, 而不调用, 那么永远不会执行
  • 函数定义与调用示例
        // 1. 函数定义--声明式定义
        function box() {
            console.log(1 + 1)
        }
        //2、函数定义--赋值式定义
        var box2 = function () {
            console.log(1+2)
        }
        // 3. 函数调用
        box()
        box2()

2、函数的参数

1)、为什么要有参数

  为了让函数的功能更加灵活,不会导致函数的功能太过于死板.

2)、函数参数的分类

1、形参

  • 函数定义时小括号中书写的内容, 相当于在函数中创建了一个变量
  • 具体的值由实参提供, 如果实参没有传递对应的内容, 那么值为undefined

2、实参

  • 函数调用时小括号中书写的内容, 这里书写的内容, 会传递给对应的形参

3、注意:

  • 一个函数可以接收多个形参与实参, 多个形参与实参使用','间隔.
    function fn (a,b,c) {
        console.log(a)//100
        console.log(b)//200
        console.log(c)//300
    }
    fn(100,200,300)
  • 虽然形参和实参的数量没有限制, 但是如果太多会导致代码难以阅读, 所以不推荐多写.
  • 形参和实参的数量可以不一致 (非常不推荐)
    • 实参多, 形参少
      第一个实参会按照顺序给第一个形参, 并以此类推;多写的实参, 没有对应的形参接收, 那么在函数中暂时无法使用.
          function fn1(a) {
             console.log(a)
         }
         fn1(100, 200, 300)//只输出100
      
    • 实参少, 形参多
      第一个实参会按照顺序给第一个形参, 并以此类推;但是多写的形参没有对应的实参传递具体的值;所以相当于变量定义了但没有赋值, 所以他们的值都是 undefined
          var fn2 = function (a, b, c, q, w, e, r, t) {
             console.log(a, b, c, q, w, e, r, t)
         }
         fn2('QF001')//第一个是QF001,后面都是undefined
      
  • 函数中 参数可以具有默认值 (ES6 的新写法)
        var fn3 = function (a, b) {
            if (b === undefined) {
                b = 'fn3 函数中 形参 b 的默认值'
            }
            // if (!b) b = 'fn3 函数中 形参 b 的默认值' // 简化, 但是有漏洞/bug

            console.log(a, b)
        }
        fn3('QF_FN3', false)

        // 2. ES6 的写法
        function fn4 (a, b = '默认值') {
            console.log(a, b)
        }
        fn4('QF_FN4')

3、函数的返回值

  • 每一个函数调用完毕后 都会有一个结果(值), 默认为 undefined ;如果想要更改那么我们需要借助一个 关键字 return;return的后边可以跟 任何的数据, 包括表达式.
  • 注意:函数中return只会生效一个, 因为 return 具有中断函数的能力;所以一般return会写在函数的末尾;如果想要写在函数的 开头, 必须结合分支语句
        function fn () {
            return '书写你要返回的内容'
            return 1 + 1// 函数中 return 只会生效一个
        }
        // 将 fn 函数的 执行/调用 结果, 存到一个变量 res 中
        var res = fn()
        console.log(res)    // 书写你要返回的内容
        console.log(fn())   // 书写你要返回的内容


        //return 具有中断函数的能力
        function fn() {
            return '你好, 你看还会不会打印'
            console.log(1)
            console.log(2)
            console.log(3)
        }
        fn()//什么都不打印

        //return 结合 分支语句
        function fn (bo) {
            // 当我传递参数为 true 正常执行函数功能, 否则, 不执行
            if (bo === false) return
            console.log('函数的功能正常执行')
        }
        fn(false)//不执行
        fn(true)//函数的功能正常执行   
  • 通过函数在控制台看到数据
        function fn(a, b) {
            // return 不具备 打印的功能, 如果你想看在控制台看到数据, 请书写 console
            return a + b
        }

        var sum = fn(1, 100)
        console.log(sum)

        console.log(fn(6, 7))

案例1(封装一个函数, 计算出两个数字的最大公约数)

    // 基本版
            function fn(x, y) {
            var min = x > y ? y : x
            var num = 0 // 用于存储最大公约数
            // 拿到 1~较小值 之间的所有数字
            for (var i = min; i >= 1; i--) {
                // 寻找 x 和 y 的公约数
                if (x % i === 0 && y % i === 0) {
                    // console.log(i)
                    // 当 num 的值 小于 i 的时候, 将 i 的存储到 num, 因为我们要找的是 最大公约数
                    if (num < i) {
                        num = i
                    }
                }
            }
            // return '最大公约数'
            return num
        }

    // 进阶版
            function fn(x, y) {
            var min = x > y ? y : x
            // 拿到 1~较小值 之间的所有数字
            for (var i = min; i >= 1; i--) {
                // 寻找 x 和 y 的公约数
                if (x % i === 0 && y % i === 0) {
                    // console.log(i)
                    /**
                     *  当前 分支语句执行的时候, 代表找到了 公约数
                     *  顺序中 第一个就是最大公约数, 所以当前分支第一次执行完毕后, 就等于找到了最大公约数
                     *  然后直接 return i    将最大公约数返回给外部, 并且函数到此结束, 后续不再运行
                    */
                    return i
                }
            }
        }

        var sum1 = fn(12, 8)
        var sum2 = fn(20, 100)
        var sum2 = fn(200, 100)

        console.log(sum1)
        console.log(sum2)

案例2(封装一个函数, 判断一个数字是不是质数)

            function fn(n) {
            var num = 0 // 用于作为一个计数器

            // 1. 找到 2~n-1 之间的所有数字
            for (var i = 2; i < n; i++) {
                // 2. 找有没有能够和 形参n 完整整除的数字
                if (n % i === 0) {
                    // 3. 当分支执行的时候, 修改 num 的值 (修改计数器)
                    num++
                }
            }

            // if (num === 0) {
            //     // 是质数
            //     return true
            // } else {
            //     // 不是质数
            //     return false
            // }
            return num === 0
        }
        var res = fn(11)
        console.log(res)