JavaScript的函数

Mochiler
106 阅读4分钟

函数

在JS里面，可能会定义非常多的相同代码或者功能相似的代码，这些代码需要大量重复使用。虽然for循环语句也可以实现一些简单的重复操作，但是比较具有局限性，此时我们就可以使用JavaScript中的函数。

那什么是函数呢？

函数就是封装了一段可被重复调用的代码块。通过此代码块可以实现大量代码的重复使用


函数的使用

1. 声明函数和调用函数

函数在使用的时候分为两步：声明函数和调用函数

  1. 声明函数

函数的两种声明方式：

//方式1：利用函数的关键字自定义函数（命名函数）
    function 函数名() {
        函数体;
    }
    
    function fn(){
        console.log('你好')；
    }
    fn();
  • function 是声明函数的关键字，必须小写
  • 函数一般是做某件事，所以函数名一般是动词。
  • 函数在不被调用的时候是不执行的
//方式2：函数表达式(匿名函数)
    var 变量名 = function(){
        函数体；
    }
    
    var fun = function(){
        console.log('Hello');
    }
    fun();
  • 函数表达式的声明方式和声明变量差不多，只不过变量里存的是值，函数表达式里存储的是函数
  • 函数表达式也可以传递参数
var function(aru){
    console.log(aru);
}
fun('好好学习');
  1. 调用函数
    函数名 ()

2. 函数的封装

函数的封装就是把一个或多个功能通过函数的方式封装起来，只对外提供一个简单的函数接口。
举一个简单的例子：

  • 运用函数计算1-100的累加和
function sum(num1,num2){
    var sum=0;
    for(var i=num1;i<=num2;i++){
        sum+=i;
        }
        console.log(sum)
}
sum(1,100)

3. 函数可以调用另外一个函数

每个函数都是独立的代码块，经常会用到函数相互调用的情况

//用户输入年份，输出当前年份的2月份的天数
function backDay(){
    var year=prompt('输入年份');
    if(isRunYear(year)){
        alert('29天');
    }else{
        alert('28天');
    }
}
backDay();

//判断是否为闰年的函数
function isRunYear(year){
    var flag=false;
    if(year % 4 == 0 && year % 100 == 0 || year % 400 == 0){
        flag=true;
    }
    return flag;
}

函数的参数

1. 函数的参数

参数说明
形参形式上的参数，函数定义的时候传递的参数 默认值为undefined
实参实际上的参数，函数调用的时候传递的参数 实参时传递给形参的
  • 参数的作用:在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去
  • 形参可以看作是不用声明的变量

2. 函数形参和实参匹配问题

function getSum(num1,num2){
	console.log(num1+num2);
        }
        //1.如果实参的个数和形参的个数一样，则正常输出结果
        getSum(1,2);//3
        //如果实参的个数多余形参的个数，会取到形参的个数
        getSum(1,2,3);//3
        //如果实参的个数少于形参的个数，多余的形参定义为undefined 最终的结果就是NAN
        //形参可以看作是不用声明的变量 num2是一个变量但是没有接受值 结果就是undefined
        getSum(1);//NAN
        //建议尽量让实参的个数和形参相匹配
参数个数说明
实参等于形参个数输出正确结果
实参个数多于形参个数只取到形参的个数
实参个数小于形参个数多的形参定义为undefined，结果为NAN
  • 函数可以带参数，也可以不带参数，数量不限
  • 声明函数的时候，函数名括号里的是形参，形参默认值为undefined
  • 调用函数时，函数名括号里是实参
  • 多个参数中间用逗号分隔
  • 形参的个数和实参的个数可以不匹配，但是结果不可预计，建议尽量匹配

函数的返回值

1. return语句

函数的返回值格式：

function 函数名(){
	return 需要返回的结果；
        }
        函数名()；
        //函数只是实现某种功能，最终的结果需要返回给函数的调用者 函数名() <--通过return实现
        //只要函数遇到return 就把后面的结果 返回给函数的调用者 函数名()=return后面的结果
  • 注意不要在函数内部输出结果
//利用函数比较两个数的最大值
function getMax(num1,num2){
	reuturn num1>num2? num1:num2; 
}
console.log(getMax(4,9));

//利用函数求数组[5,2,9,101,67,77]中的最大数值
function getArrMax(arr){
	var max=arr[0];
        for(var i=1;i<arr.length;i++){
        	if(arr[i]>max){
                	max=arr[i];
                }
        }return max;
}
//getArrMax[5,2,9,101,67,77]; //实参是一个数组送给形参
//在我们实际开发中，我们经常用一个变量来接受函数的返回结果 使用更简单
var re=getArrMax[5,2,9,101,67,77];
console.log(re);

2. return终止函数

return后面的代码不再执行
return 只能返回1个值。 如果用逗号隔开多个值，以最后一个值为准。

function fn(num1,num2){
    return num1,num2;//只会返回num2
    }
    console.log(fn(1,2));//结果为2

想要返回多个值可以借助数组！！（也可以借助对象，这里先不讲）

//我们求任意两个数的加减乘除结果
function getResult(num1,num2){
    return [num1 + num2 , num1 - num2, num1 * num2, num1 / num2];
    }
    var re=getResult(1,2);//返回的是一个数组
    console.log(re);

3. 函数没有return返回undefined

函数有return返回return后面的值，没有则返回undefined

4. break、continue、return的区别

break：结束当前的循环体（for，while）
continue：跳出本次循环，继续执行下次循环（for 、while）
return：不仅可以跳出循环，还能够返回return语句中的值，同时还可以结束当前的函数体内的代码

argumengts的使用

当我们不确定有多少个参数传递的时候，可以使用arguments来获取，在JS中，arguments实际上是当前函数的一个内置对象。

所有的函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参。

只有函数才有arguments对象。

arguments展示形式是一个伪数组，因此可以按照数组遍历的方式进行遍历。
伪数组具有以下特点:

  • 具有length属性
  • 按索引方式存储数据
  • 不具有数组的push、pop等方法
function fn(){
    console.log(arguments);
    console.log(arguments.length);
    console.log(arguments[2]);
    //按照数组的方式遍历arguments
    for(var i = 0; i < arguments.length; i++){
    
    }
}
fn(1,2,3);

有了arguments就可以不用写形参了

几个小案例

1. 让用户输入一个数判断是不是素数，并弹出返回值

function isSushu(num){
    if(num == 1 || num == 0 || num<1){
        return alert(num + '既不是质数也不是合数')
    }
    for(var i = 2; i < num; i++){
    //素数除了1和本身不会再有其他因数
        if(num % i == 0){
            return alert('合数')
        }else{
            return alert('素数')
        }
    }
}
isSushu();

2. 利用函数封装的方式，翻转任意一个数组

        function reverse(arr){
            var a=[];
            for(var i=arr.length-1;i>=0;i--){
                a[a.length]=arr[i];
            }
            return a;
        }
        console.log(reverse([4,8,9,11,3,6,0]));

3. 利用函数封装方式，对数组进行排序

        // 对数组排序,从小到大
        function sort(arr){
            for(var i=0;i<arr.length-1;i++){
                for(var j=0;j<arr.length-i-1;j++){
                    if(arr[j]>arr[j+1]){
                        var temp=arr[j];
                        arr[j]=arr[j+1];
                        arr[j+1]=temp;
                    }
                }
            }return arr;
        }
        console.log(sort([4,3,6,7,1]));
avatar
文章
阅读
粉丝