JavaScript学习-函数

简介: 函数

  函数

作用:封装了一段可以被重复执行调用的代码块。

目的:让大量代码重复使用。

1、声明函数

function 函数名(){
       //函数体;
}

image.gif

2、调用函数

函数名();

image.gif

让我们来写第一个函数。

function sayHi() {
    console.log('hello world');
}
sayHi();

image.gif

注意:

    1. function声明函数的关键字,全部小写。
    2. 函数名一般是动词,主要要用驼峰命名法。
    3. 函数不调用,是不执行的。

    3、形参和实参

    我们可以利用函数的参数实现函数重复不同的代码。

    形参:形式参数(类似于虚的,只是摆个样子。)

    实参:实际参数(有真实的值。)

    function 函数名(形参1,形参2,…){
           //函数体;
    }
    函数名(实参1,实参2,…);

    image.gif

      1. 在声明函数的小括号里面是形参。
      2. 在函数调用的小括号里面的是实参。

      4、形参和实参的执行过程(形参是接受实参的)

      对照着例子,我来讲一下。

      function fruit(alu){
       console.log(alu);
      }
      fruit('apple');

      image.gif

      这里声明了一个函数名为fruit。里面的alu为形参,不知道是什么值,然后函数体为在控制台打印alu。

      这时调用了fruit函数并且传递一个实参为apple,这时的alu就变成了apple。意思大概就是下图这个意思。没看懂可以评论区留言我来再解释一下。


      5、形参和实参的注意点

        1. 实参的个数和形参的个数一致,正常输出结果。
        2. 实参的个数多于形参的个数,会取到形参的个数,对不上号的实参就不要了。
        3. 实参的个数小于形参的个数,多于形参的定义为undefined 最终结果为NaN。
        4. 建议:尽量让实参的个数和形参相匹配。
        5. 形参的默认值是undefined,可以把它看做是没有声明的变量。

        这里就不举例了,一般情况下,实参和形参都会相匹配,所以大家注意一下就好。

        6、函数的返回

        function 函数名(){
         return 需要返回的结果;
        }
        函数名();

        image.gif

          1. 只实现某种功能,最终的功能需要返回给函数的调用者,函数名()通过return实现。
          2. 只要函数遇到return就把后面的结果返回给函数的调用者,函数名()=return后面的结果。
          function getResult( ) {
                   return 666;
               }
                  console.log(getResult( ));

          image.gif


          7、return用法

          (1)终止函数。

          function getResult(num1,num2) {
                  return num1+num2;
                  alert('no');   
           }
          var sum=getResult(1,2)
           console.log(sum);

          (2)return只能返回一个值。

          function getResult(num1,num2) {
               return num1,num2;
           }
           result=getResult(1,2);
           console.log(result);

          image.gif

          虽然它传递了两个实参过去,但是return只返回最后一个值


          (3)没有return返回undefined。

          有return则返回return,没有return则返回undefined。

          function fun1(){
                  return 666;
              }
              function fun2(){
              }
              console.log(fun1())
              console.log(fun2());


          8、arguments的使用

          当前函数的内置对象,存储了传递的所有实参。

          当我们不确定有多少个参数传递的时候,可以用arguments来获取。

          arguments展示形式是一个伪数组。

            1. 具有length属性。
            2. 按索引方式存储数据。
            3. 不具有数组的push、pop等方法。

            9、遍历arguments(只有函数才有arguments)

            for(var 1=0;i<arguments.length;i++){
               console.log(arguments[i]);
            }

            image.gif

            10、函数的2种声明方式

            (1)利用函数关键字自定义函数(命名函数)

            function fn(){
             //循环体;
            }
            fn();

            image.gif

            (2)函数表达式(匿名函数)

            var fun=function(alu){
              console.log('函数表达式');
              console.log(alu);
            }
              function('ok');

            image.gif

              1. fun是变量名,不是函数名。
              2. 函数表达式声明方式跟声明变量差不多,只不过变量里面存的是值而函数表达式里面存的是函数。
              3. 函数表达式也可以进行传递参数。

              经典案例

              (1)利用函数计算1-100之间的累加和

              思路:之前已经算过累加和了,只要把for循环搬过来,把for循环加到函数声明里面就ok。最后调用一下,简简单单。

              functiongetSum( ){
              varsum=0;
              for(vari=0;i<=100;i++){
              sum+=i;
                      }
              console.log(sum);
                  }
              getSum();



              (2)利用函数求任意两个数之间的和

              思路:这个其实跟上一个一样,只不过是任意两个数,所以来俩形参就好,一个为开始的数,另一个为结束的数,然后for循环一用。

              functiongetSums(num1,num2){
              varsum=0;
              for(vari=num1;i<=num2;i++){
              sum+=i;
                      }
              console.log(sum);
                  }
              getSums(1,100);

              image.gif

              (3)利用函数求任意两个数的最大值

              思路:求两个数的最大值,很好比较,不是你大就是我大 用if else来比较,然后再放在函数里,就ok了。

              functiongetMax(num1,num2){
              if(num1>num2){
              returnnum1;
                   }else {
              returnnum2;
                   }
                  }
              console.log(getMax(1,3))


              (4)利用函数求数组[5,9,99,101,66,55]中的最大值


              functiongetArrMax(arr){
              varmax=arr[0];
              for(vari=0;i<=arr.length;i++){
              if(arr[i]>max){
              max=arr[i];
                       }
                   }
              returnmax;
                  }
              varre=getArrMax([5,9,99,101,66,55]);
              console.log(re);

              image.gif

              (5)利用函数求任意个数的最大值(使用arguments)

              functiongetArrMax( ){
              varmax=arguments[0];
              for(vari=0;i<=arguments.length;i++){
              if(arguments[i]>max){
              max=arguments[i];
                       }
                   }
              returnmax;
                  }


              (6)利用函数翻转数组

              functionreverse(arr){
              varnewArr=[];
              for(vari=arr.length-1;i>=0;i--){
              newArr[newArr.length]=arr[i];
                      }
              returnnewArr;
                  }
              vararr1=reverse([1,2,4,5,6,7]);
              console.log(arr1);

              image.gif

              (7)利用函数对数组进行排序(冒泡法)

              functionreverse(arr){
              for(vari=0;i<arr.length-1;i++){
              for(varj=0;j<arr.length-i-1;j++){
              if(arr[j]>arr[j+1]){
              vartemp=arr[j];
              arr[j]=arr[j+1];
              arr[j+1]=temp;
                       }
                   }
                  }
              returnarr;
              }
              varre=reverse([1,5,6,7,9]);
              console.log(re);

              image.gif


              目录
              相关文章
              |
              5月前
              |
              前端开发 JavaScript
              个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
              本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
              |
              5月前
              |
              机器学习/深度学习 JavaScript 前端开发
              JS进阶教程:递归函数原理与篇例解析
              通过对这些代码示例的学习,我们已经了解了递归的原理以及递归在JS中的应用方法。递归虽然有着理论升华,但弄清它的核心思想并不难。举个随手可见的例子,火影鸣人做的影分身,你看到的都是同一个鸣人,但他们的行为却能在全局产生影响,这不就是递归吗?雾里看花,透过其间你或许已经深入了递归的魅力之中。
              237 19
              |
              5月前
              |
              前端开发
              个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
              这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
              |
              6月前
              |
              JavaScript 数据可视化 前端开发
              three.js简单实现一个3D三角函数学习理解
              1.Three.js简介 Three.js是一个基于JavaScript编写的开源3D图形库,利用WebGL技术在网页上渲染3D图形。它提供了许多高级功能,如几何体、纹理、光照、阴影等,以便开发者能够快速地创建复杂且逼真的3D场景。同时,Three.js还具有很好的跨平台和跨浏览器兼容性,让用户无需安装任何插件就可以在现代浏览器上观看3D内容。
              226 0
              |
              7月前
              |
              JavaScript
              JS实现多条件搜索函数
              JS封装的多条件搜索
              |
              9月前
              |
              JavaScript 前端开发
              JavaWeb JavaScript ③ JS的流程控制和函数
              通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
              207 32
              |
              8月前
              |
              JavaScript 前端开发 Java
              详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
              柯里化是一种强大的函数式编程技术,它通过将函数分解为单参数形式,实现了灵活性与可复用性的统一。无论是参数复用、延迟执行,还是函数组合,柯里化都为现代编程提供了极大的便利。 从 Redux 的选择器优化到复杂的数据流处理,再到深度嵌套的函数优化,柯里化在实际开发中展现出了非凡的价值。如果你希望编写更简洁、更优雅的代码,柯里化无疑是一个值得深入学习和实践的工具。从简单的实现到复杂的应用,希望这篇博客能为你揭开柯里化的奥秘,助力你的开发之旅! 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
              |
              Web App开发 JavaScript 前端开发
              如何学习JavaScript?
              如何学习JavaScript?
              244 5
              |
              12月前
              |
              JavaScript 前端开发 索引
              JavaScript学习第二章--字符串
              本文介绍了JavaScript中的字符串处理,包括普通字符串和模板字符串的使用方法及常见字符串操作方法如`charAt`、`concat`、`endsWith`等,适合前端学习者参考。作者是一位热爱前端技术的大一学生,专注于分享实用的编程技巧。
              134 2