• JavaScript 函数原理 +各种案例 + 使用场景


    在这里插入图片描述

    1、函数的使用？

     掌握函数语法，把代码封装起来
        函数的声明语法：
            function 函数名() {
                函数体
            }

    • 1
    • 2
    • 3
    • 4
    • 5

    2、为什么要使用函数？

     可以实现代码复用，提高开发效率

    • 1

    3、 函数的命名规范？

     和变量命名基本一致
     尽量小驼峰命名法
     前缀应该为动词
     命名建议：常用动词约定
     如 
    can :判断是否可执行某个动作
    has：判断是否含义某个值
    is：判断是否为某个值
    get：获取某个值
    load：加载某些数据

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    4、函数是用哪个关键词声明的？

    	function

    • 1

    5、函数不调用会执行吗？ 如何调用函数？

    	函数不调用就不会执行

    • 1
    //getSum()是形参
  function getSum() {
  //函数体
        let num1 = 10
        let num2 = 20
        console.log(num1 + num2)
    }
    //调用函数    getSum（实参）
    getSum()

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    6、函数的复用代码和循环重复代码有什么不同？

    	循环代码写完立即执行，不能很方便控制执行位置。
	函数可以随时调用，随时执行，可重复调用
	如

    • 1
    • 2
    • 3
     function getSum() {
        let num1 = 10
        let num2 = 20
        console.log(num1 + num2)
    }
    getSum()
     getSum()

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    7、函数传递参数的好处是？

    	可以极大的提高了函数的灵活性
	**

    • 1
    • 2

    **

    8、函数参数可以分为那两类？怎么判断它们是哪种参数？

    **

    **

    函数可以分为形参和实参
函数声明时，小括号里面的是形参，形式上的参数
函数调用时，小括号里面的是实参，实际的参数
形参和实参尽量保持个数一致。
如

    • 1
    • 2
    • 3
    • 4
    • 5
    // 求 2-10累计的和
        // num1,num2  叫形参
        function getSum10(num1,num2){
            let sum = 0
            for(let i = num1 ; i <= num2 ; i++) {
                sum += i
            }
            document.write(`2-10直接累计的和${sum}`)
        }
        // 2，10叫实参
        getSum10(2,10)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    9、getSum([100,200,300])里边有几个实参？

    1个  [100,200,300]

    • 1

    10、为什么要让函数有返回值

    函数执行后得到结果，结果是调用者想要拿到的(一句话,函数内部不需要输出结果,而是返回结果)

    • 1

    对执行结果的扩展性更高，可以让其他的程序使用这个结果

    11、函数的返回值的关键字是什么？ 有什么注意事项？

    return关键字
    细节：
    1、在函数体中使用ruturn 关键字能将内部的执行结果交给函数外部使用
    2、函数内部只能出现1次return，并且return后面diamond不会再执行，所以return后面的数据不要换行写
    3、return 会立即结束当前函数
    4、函数可以没有return，这种情况函数默认返回值为undefined    nt>

    案例 一 函数调用基础版

    // 函数调用，这些函数体内的diamond逻辑会执行
        function sayHi() {
            document.write(`你好`)
        }
        // 函数一次声明可以多次调用，每次函数调用函数里面的代码会重新执行一次
        sayHi()
        sayHi()

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    案例二 函数内求两个和

        // 求2个数的和
        function getSum() {
            let num1 = 10 
            let num2 = 20
            let  sum = num1 + num2 
            document.write(`${sum}`)
        }
        getSum()

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    案例三 封装 1-100之间的和

     //求1-100的累计和  封装函数
        function getSum100() {
            let sum = 0 
            for (let i = 0 ; i <=100 ; i++){
                sum += i
            }
            document.write(`${sum}`)
        }
        getSum100()

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    案例四 带有参数的函数

     // 带有参数的函数
        function getSum(num1,num2) {
            document.write(num1 + num2)
        }
        getSum(1,2)
        getSum(22,33)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    案例五 求 2-10之间的和

     // 求 2-10累计的和
        // num1,num2  叫形参
        function getSum10(num1,num2){
            let sum = 0
            for(let i = num1 ; i <= num2 ; i++) {
                sum += i
            }
            document.write(`2-10直接累计的和${sum}`)
        }
        // 2，10叫实参
        getSum10(2,10)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    案例六 函数的返回值

    function fn() {
            return 20
        }
        // fn()
        //return 相当于  执行了一句话 fn() = 20
        document.write(fn())

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    案例七 求数组中最大的值

      function getArrMax(arr) {
            //声明一个max 变量  
              //把数组第一个值给max
            let max = arr[0]
            //开始遍历数组
            for(let i = 0 ; i < arr.length;i++){
                // 测试一下看有没有遍历出来
                // console.log(arr[i])
                // 比较最大值   如果数组第一个小于后边的数
                if( max < arr[i]) {
                    // 那就重新给第一个赋比上一个值大的数字
                    max = arr[i]
                    
                }
                
            } 
            //返回这个最大值
           return max
        }
        let maxplus = getArrMax([1,6,9,55,3])
        document.write(`数组的最大值是:${maxplus}`)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    案例八 求数组中最小的值

     // 案例  ---- 求数组中最小的值
        function getArrMin(arr) {
            // 把数组第一个值赋给 min变量
            let min = arr[0]
            //循环遍历
            for(let i = 0 ; i< arr.length;i++){
                // 测试有没有全部遍历出来
                // console.log(arr[i])
                if(min > arr[i]) {
                    min = arr[i]
                }
                 // 测试有没有把小的筛选出来
                 console.log(min)
                //第一个值和后边的值做比较
            }
            return min
            // 返回最小值
        }
        let minValue =  getArrMin([10,50,60,2,8,9])
        document.write(`数组中最小的值是${minValue}`)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    案例九 函数返回两个值

     //函数返回多个值
        function fun(x,y) {
            let jia = x + y
            let jian = x - y
            // 返回多个值可以用数组
            return [jia , jian]
        }
        let res = fun(2,3)
        // 根据数组下标打印多个值
        document.write(`两个值的和是:${res[0]}两个值减是:${res[1]}`)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    案例十 数组返回最大值和最小值

      function arrfun(arr){

            // let num = arr[0]
            // let num2 = arr[0]
            // 也可以这样写
            let num = num2 = arr[0]
            for(let i = 0 ; i < arr.length; i++) {
                // 测试循环遍历成功没
                // console.log(arr[i])
                // 拿数组第一个数值和数组后边的数值做比较
                if(num < arr[i]) {
                    num = arr[i] // 如果后边的值比第一个值大的话 重新给她赋值
                    // 测试一下 看有没有把最大值筛选出来
                    // console.log(num)
                }
                if(num2 > arr[i]) {
                    num2 = arr[i] //如果后边的值比第一个值小的话 重新给她赋值
                    //  测试一下 看有没有把最大值筛选出来
                    console.log(num2)
                }
            }
            // 返回最大值和最小值
            return [num,num2]
        }
        let res = arrfun([5,8,9,20,66,2,44,33])
        // res[0]  根据return 下标取第一个值
        document.write(`数组中最大的值是：${res[0]} 数组中最小的值是:${res[1]}`)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    案例十一 用三元运算符 写 数组返回最大最小值

    
        //用三元运算符来去写
        function arrfun(arr) {

            let max = min = arr[0]
            for (let i = 0; i < arr.length; i++) {
                // 条件?满足条件执行的代码:不满足条件执行的代码
                // max < arr[i] ? max = arr[i] : max
                // min > arr[i] ? min = arr[i] :min

                max = max < arr[i] ? arr[i] : max
                min = min > arr[i] ? arr[i] : min
            }
            // 返回最大值和最小值
            return [max, min]
        }
        let res = arrfun([5, 8, 9, 20, 66, 2, 44, 33])
        // res[0]  根据return 下标取第一个值
        document.write(`数组中最大的值是：${res[0]} 数组中最小的值是:${res[1]}`)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    案例十二 手动输入两个数字 ；返回最大哪一个 

       //输出两个数 返回最大的哪一个
        let num1 = +prompt('请输入第一个数')
        let num2 = +prompt('请输入第二个数')
        function fun (x,y) {
            // if(num1 > num2) {
            //     return x
            // }else{
            //     return y
            // }
            // return x>y  ？那就返回x ， 如果x
            return x > y ? x : y
        }
        document.write(fun(num1,num2))

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
  • 相关阅读:
    浅谈systemd原理和应用
    Linux下的buff/cache
    【Hack The Box】Linux练习-- Knife
    从零开始搭建一个GIS开发小框架（七）——GMap.Net组件WPF版本加载POI性能测试
    【网络工程】2、eNSP工具下载与安装
    计算机丢失MSVCP140.dll的解决方法分享
    ESD器件对高速信号有什么影响吗
    国产化框架PaddleClas结合Swanlab进行杂草分类
    刷题日记【第九篇】-笔试必刷题【杨辉三角的变形+计算某字符出现的次数+字符串通配符+统计每个月兔子的总数】
    95后阿里P7晒出工资单：狠补了这些个技术栈，真的香啊
  • 原文地址：https://blog.csdn.net/qq_48203828/article/details/126488391