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


              目录
              相关文章
              |
              1月前
              |
              JavaScript 前端开发 Java
              [JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
              本文介绍了JavaScript中常用的函数和方法,包括通用函数、Global对象函数以及数组相关函数。详细列出了每个函数的参数、返回值及使用说明,并提供了示例代码。文章强调了函数的学习应结合源码和实践,适合JavaScript初学者和进阶开发者参考。
              43 2
              [JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
              |
              1月前
              |
              Web App开发 JavaScript 前端开发
              如何学习JavaScript?
              如何学习JavaScript?
              50 5
              |
              1月前
              |
              JavaScript 前端开发 索引
              JavaScript学习第二章--字符串
              本文介绍了JavaScript中的字符串处理,包括普通字符串和模板字符串的使用方法及常见字符串操作方法如`charAt`、`concat`、`endsWith`等,适合前端学习者参考。作者是一位热爱前端技术的大一学生,专注于分享实用的编程技巧。
              30 2
              |
              1月前
              |
              存储 JavaScript 前端开发
              JavaScript学习第一章
              本文档介绍了JavaScript的基础知识,包括其在网页中的作用、如何通过JavaScript动态设置HTML元素的CSS属性,以及JavaScript中的变量类型(`var`、`let`、`const`)和数据类型(基本数据类型与引用数据类型)。通过实例代码详细解释了JavaScript的核心概念,适合初学者入门学习。
              54 1
              |
              1月前
              |
              前端开发 JavaScript 开发者
              除了 Generator 函数,还有哪些 JavaScript 异步编程解决方案?
              【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作,以实现高效、可读和易于维护的代码。
              |
              2月前
              |
              JavaScript
              js学习--制作猜数字
              js学习--制作猜数字
              44 4
              js学习--制作猜数字
              |
              2月前
              |
              JavaScript
              webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
              这篇文章介绍了如何将webpack的配置文件分离成开发环境和生产环境的配置文件,以提高打包效率。
              58 1
              webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
              |
              2月前
              |
              JavaScript 前端开发
              JavaScript 函数语法
              JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
              |
              2月前
              |
              存储 JavaScript 前端开发
              JS函数提升 变量提升
              【10月更文挑战第6天】函数提升和变量提升是 JavaScript 语言的重要特性,但它们也可能带来一些困惑和潜在的问题。通过深入理解和掌握它们的原理和表现,开发者可以更好地编写和维护 JavaScript 代码,避免因不了解这些机制而导致的错误和不一致。同时,不断提高对执行上下文等相关概念的认识,将有助于提升对 JavaScript 语言的整体理解和运用能力。
              |
              2月前
              |
              JavaScript
              js学习--制作选项卡
              js学习--制作选项卡
              43 4