函数

函数

有一点类似与 变量, 因为都是一个盒子, 但是完全不同

• 变量这个盒子内部存放某一个具体的值, 比如: 100, 'QF001', 'qwe'
• 函数这个盒子内部不是为了存放某一个具体的值, 而是为了存放某一段需要重复多次出现的 代码
• 现在有一段 多次重复出现的代码, 假设就是 '100万'
• 每次使用的时候都需要书写一遍这个大量的代码, 极其不方便, 而且代码量特别多
• 所以我们可以将 '100万' 存储到一个银行卡(函数)中
• 将来需要使用的时候 直接从 银行卡(函数) 中 拿 就行了

函数的定义与调用

• 定义(创建)
  • 语法1: function 函数名(参数1, 参数2) { 函数被调用的时候需要执行的某一段代码 }
• 调用(使用)
  • 函数名(变量1, 变量2)
  • 注意: 如果一个函数只定义, 而不调用, 那么永远不会执行
  • 变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推。

        // 1. 函数定义
        function box(形参) {
            console.log(1 + 1)
        }

        // 2. 函数调用
        box(实参)

函数的语法

• 语法1:
  • function 函数名 () {} -> 声明式定义
• 语法2:
  • var 函数名 = function (参数) {} -> 赋值式定义
• 调用的时候 不管如何定义, 都是使用 函数名()

参数

• 为什么要有参数
  • 为了 让函数的功能 更加灵活, 不会导致函数的功能太过于死板

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

• 注意:
  • 一个函数可以接收多个形参与实参, 多个形参与实参使用' , ' 间隔
  • 虽然形参和实参的数量没有限制, 但是如果太多会导致代码难以阅读, 所以不推荐多写
  • 形参和实参的数量可以不一致 (非常不推荐)
  • 函数中 参数可以具有默认值 (ES6 的新写法)
  • 如果一个 函数的参数给了 默认值, 那么这个参数永远不会是 undefined

        // 基础示例
        function fn (a) {
            console.log(a)
        }
        fn('QF001')
        fn(10086)
        /**
         *  调用 fn 函数的时候, 书写了一个 实参 就是 'QF001'
         *  然后 会按照规则 传递给对应的 形参   就是 形参 a
         * 
         *  那么也就相当于 在 fn 函数中 创建了 一个 变量 并 赋值为 'QF001'
         * 
         *  这样的好处时 函数中 的形参a, 值不固定, 那么函数的功能也就更加灵活
        */

        // 多个形参与实参
        var fn = function (a, b, c) {
            console.log(a)
            console.log(b)
            console.log(c)
        }

        fn(100, 200, 300)
        /**
         *  调用 fn 函数的时候, 书写了 三个 实参 分别是 100 200 300
         * 
         *  然后会按照规则 传递给 对应的 形参 (按照书写的顺序)
         *      第一个实参 -> 第一个形参
         *      第二个实参 -> 第二个形参
         *      以此类推
         * 
         *  所以当前案例中
         *      a === 100
         *      b === 200
         *      c === 300
        */


        /**
         *  实参多, 形参少
         * 
         *      第一个实参会按照顺序给第一个形参, 并以此类推
         * 
         *      多写的实参, 没有对应的形参接收, 那么在函数中暂时无法使用
        */
        function fn1(a) {
            console.log(a)
        }
        fn1(100, 200, 300)
        
        /**
         *  实参少, 形参多
         * 
         *      第一个实参会按照顺序给第一个形参, 并以此类推
         * 
         *      但是 多写的 形参没有对应的实参传递具体的值
         *          所以相当于 变量定义了但没有赋值, 所以他们的值都是 undefined
        */
        var fn2 = function (a, b, c, q, w, e, r, t) {
            console.log(a, b, c, q, w, e, r, t)
        }
        fn2('QF001')

        // 函数中 参数可以具有默认值 (ES6 的新写法)

        // 1. ES5 的写法
        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', undefined)

函数的返回

• 每一个函数调用完毕后 都会有一个结果(值), 默认为 undefined 如果想要更改那么我们需要借助一个 关键字 return，return 的后边可以跟 任何的数据, 包括表达式
• 注意:
  • 函数中 return 只会生效一个, 因为 return 具有中断函数的能力
  • 所以一般 return 会写在函数的末尾
  • 如果想要写在函数的 开头, 必须结合 分支语句

        function fn () {}
        // 将 fn 函数的 执行/调用 结果, 存到一个变量 res 中
        var res = fn()
        console.log(res)    // undefined
        console.log(fn())   // undefined

        function fn () {
            return '书写你要返回的内容'
            return 1 + 1         // 函数中 return 只会生效一个
        }
        // 将 fn 函数的 执行/调用 结果, 存到一个变量 res 中
        var res = fn()
        console.log(res)    // undefined
        console.log(fn())   // undefined


        // return 具有中断函数的能力
        function fn() {
            console.log(1)
            console.log(2)
            console.log(3)
            return '你好, 你看还会不会打印'
        }
        fn()
        
        // return 结合 分支语句
        function fn (bo) {
            // 当我传递参数为 true 正常执行函数功能, 否则, 不执行

            if (bo === false) return

            console.log('函数的功能正常执行')
        }
        // fn(false)
        fn(true)