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


              目录
              相关文章
              |
              4小时前
              |
              JavaScript 前端开发
              在JavaScript中,函数原型(Function Prototype)是一个特殊的对象
              【5月更文挑战第11天】JavaScript中的函数原型是一个特殊对象,它为所有函数实例提供共享的方法和属性。每个函数在创建时都有一个`prototype`属性,指向原型对象。利用原型,我们可以向所有实例添加方法和属性,实现继承。例如,我们定义一个`Person`函数,向其原型添加`greet`方法,然后创建实例`john`和`jane`,它们都能调用这个方法。尽管可以直接在原型上添加方法,但推荐在构造函数内部定义以封装数据和逻辑。
              10 2
              |
              4小时前
              |
              前端开发 JavaScript 数据处理
              在JavaScript中,异步函数是指什么
              【5月更文挑战第9天】JavaScript中的异步函数用于处理非立即完成的操作,如定时器、网络请求等。它们可通过回调函数、Promise或async/await来实现。示例展示了如何使用async/await模拟网络请求:定义异步函数fetchData返回Promise,在另一异步函数processData中使用await等待结果并处理。当fetchData的Promise解析时,data变量接收结果并继续执行后续代码。注意,调用异步函数不会阻塞执行,而是会在适当时间点继续。
              11 0
              |
              4小时前
              |
              自然语言处理 JavaScript 前端开发
              在JavaScript中,this关键字的行为可能会因函数的调用方式而异
              【5月更文挑战第9天】JavaScript中的`this`关键字行为取决于函数调用方式。在非严格模式下,直接调用函数时`this`指全局对象,严格模式下为`undefined`。作为对象方法调用时,`this`指向该对象。用`new`调用构造函数时,`this`指向新实例。通过`call`、`apply`、`bind`可手动设置`this`值。在回调和事件处理中,`this`可能不直观,箭头函数和绑定方法可帮助管理`this`的行为。
              11 1
              |
              4小时前
              |
              JavaScript 前端开发 网络架构
              JavaScript中的箭头函数是一种新的函数表达形式
              【5月更文挑战第9天】JavaScript的箭头函数以简洁语法简化函数定义,其特性包括:1) 不绑定自身this,继承上下文的this,适合回调和事件处理;2) 没有arguments对象,需用剩余参数语法访问参数;3) 不能用作构造函数,无new调用;4) 没有prototype属性,不支持基于原型的继承。箭头函数在特定场景下优化了this处理,但使用时要注意与普通函数的差异。
              11 2
              |
              4小时前
              |
              JavaScript 前端开发
              js的一些内置函数
              js的一些内置函数
              7 1
              |
              4小时前
              |
              JavaScript 前端开发 索引
              js的includes函数
              js的includes函数
              13 1
              |
              4小时前
              |
              JavaScript 安全 前端开发
              js的map函数
              js的map函数
              7 0
              |
              4小时前
              |
              JavaScript 前端开发
              js的filter函数
              js的filter函数
              10 1
              |
              4小时前
              |
              JavaScript 前端开发
              js的函数
              js的函数
              9 0
              |
              4小时前
              |
              JavaScript 前端开发
              js的join函数
              js的join函数
              9 1