JavaScript(函数)

155 阅读5分钟

目录

函数基础(定义及调用)
函数参数(形式参数、实际参数)
函数返回值(箭头函数、扩展:arguments)

函数基础

背景:当多个数据进行相同操作时(比如获取数组的最大值),会导致代码重复并且修改麻烦。
概念:函数本身可以理解为一段代码的容器。一个函数里的代码可以重复的被使用。
作用:一段代码可以重复使用,并且无需任何修改。
定义及使用
1.定义函数
function 函数名() {
         被包围的一段代码
         }
2.使用(调用)函数
函数名();

函数一旦定义,可以多次使用。
每使用一次函数,就会执行一次函数里的所有代码。

函数参数

背景:基本的函数使用只能解决代码重复问题,但还是不能解决针对不同数据进行操作的问题。通过参数来解决针对不同数据进行相同操作的问题。
概念:函数参数是一种数据传递的机制。该机制中参数分为形式参数和实际参数。这两种参数协同一起使用可以解决函数不能针对不同数据进行操作的问题。

参数分类

形式参数
本质是一个变量,写在函数定义时()中。该变量会在函数被调用时自动创建,该变量的数据是通过实际参数传递过来的。
形式参数接收到数据之后,可以在函数的{}里进行使用。这样就完成了将函数外的数据传递到函数中进行处理。
实际参数
是指某个具体的数据或已定义的变量。写在函数调用时()中,会在函数调用时将具体的数据传递给形式参数。
形式参数和实际参数之间的关系
在函数调用时,我们会把要处理的数据通过实际参数传递到函数中,被形式参数所接受,那么在函数中就可以通过形式参数来处理传递进去的数据。

参数的使用

function 函数名(形式参数1,形式参数2,形式参数n) {

}
函数名(实际参数1,实际参数2,实际参数n);

函数参数练习

//定义一个函数isPrimeNumber,传入一个数字,判断该数字是否是质数
    function isPrimeNumber(num) {
        var isRight = true;  //假设是
        for(var i=2;i<num;i++) {
            if(num%i==0) {
                isRight = false;
            }
        }
        if(isRight == true) {
            document.write(num + "是质数");
        }else{
            document.write(num + "不是质数");
        }
    }
    isPrimeNumber(12);
    
    //定义一个函数add,传入两个数字,计算从第一个数字加到第二个数字的和
    function add(num1,num2){
        var sum = 0;
        for(var i = num1;i<=num2;i++) {
            sum+=i;
        }
        document.write(sum);
    }
    add(1,10)

//定义一个函数mult,传入一个数字,计算该数的阶乘。
    function mult(num) {
        var total = 1;
        for(var i = num;i>0;i--) {
            total *= i;
        }
        document.write(total);
    }
    mult(20)


函数综合练习

/* 实现多用户的登录注册功能
    功能:
    1.登录:数组里的任一用户都可以进行登录。如果数组中没有用户则提示注册
    2.注册:用户输入用户名和密码进行注册,注册成功则需将用户名和密码加入到
    数组中。
    注意:不能注册相同用户名的用户,如果用户输入已存在用户名,则给出相应提示
    3.退出:
    登录和注册代码用函数来编写
    流程:
    1.输出功能菜单。用户输入对应选项数字
    2.利用switch进行判断,调用对应函数来处理
    3.处理后又返回第一步(除非是用户选择3,退出则结束程序)
    */
   //保存用户
   var users = [];
   var passes = [];
   var isover = false;
   //程序
   do {
    var input = prompt('输入选项:1.登录 2.注册 3.退出');

    switch(input) {
        case "1":
            login()
            break;
        case "2":
            register();
            break;
        case "3":
            isover = true;
            break;
        default:
            alert('无效选项')
            break;
    }
   } while(isover == false);

   //功能函数
   function login() {
    if(users.length == 0){
        alert('先注册,再登录');
    }else{
        var userinput = prompt('输入登录的用户名');
        var passinput = prompt('输入登录的密码');
        var isLogin = false;
        for(var i=0;i<users.length;i++) {
            isLogin = true;
            break;
        }
    }
    if(isLogin == true) {
        alert('登录成功');
    }else{
        alert('登录失败');
    }
   }

   function register() {
    var userinput = prompt('输入注册用户名');
    var passinput = prompt('输入注册密码');
    var index = users.indexOf(userinput);
    if(index == -1) {
        users.push(userinput);
        passes.push(passinput);
        alert('注册成功');
        console.log(users,passes);
    }else {
        alert('用户已存在,请重新注册');
    }
    
   }

箭头函数

概念

是ES6新增用于快速进行定义函数的语法。用于辅助函数的定义。

语法

var 函数名 = (形式参数) => {
    函数里的主体代码
    }
function 函数名 (形式参数) {
    函数里的主体代码
    }

特点

箭头函数要进行使用,需要先定义,在进行使用
当箭头函数主体代码只有一句return 语句时,可以省略return关键字以及{}。
var add = (num1,num2)=> {
      return num1+num2;
      }
可以优化为
var add = (num1,num2)=>num1+num2;

如果箭头函数中只有一个形式参数,那么可以省略函数定义的()

var add = (num1)=> {
    return num1 + 5;
    }
可以优化为
var add = num1 =>num1 +5;

箭头函数的应用

sort
数组变量名.sort((num1,num2)=>{
    return num1-num2;
    });

扩展:arguments

背景

当一个函数需求的参数数量不确定时,可以用arguments来解决

概念

arguments是JavaScript在函数调用时会自动创建的一个类数组对象。里面包含了所有函数调用时闯进来的实际参数,同时也有一个length来表示传递的实际参数的数量。

语法

arguments
获取实际参数的数量:arguments.length;

arguments应用

//arguments遍历
function addStr(){
    //获取每个实际参数
    for(var i=0;i<arguments.length;i++) {
        console.log(arguments[i]);
        }
    }
//arguments-应用,拼接字符串
function addStr(){
    var str ="";
    for(var i=0;i<arguments.length;i++) {
            str +=arguments[i];
            }
    return str;
}
var s1=addStr('star','night','23');
var s2=addStr('night','star','22');
var s3=addStr('x','w','20');
console.log(s1,s2,s3);

//练习:定义一个函数,实现类似于push的功能,可以批量向数组追加多个数据
function arrayPush(array){
    for(var i=1;i<arguments.length;i++) {
        array[array.length] = arguments[i];
        }
        return array;
    }
    var arr=[1,2];
    arr=arrayPush(arr,3,4,5);
    arr=arrayPush(arr,6);
    arr=arrayPush(arr,7,8,9,10);
    console.log(arr);//[1~10]