JavaScript 如何定义及调用函数，如何写函数说明

在实际操作前，先来了解一下JavaScript 函数的一些概念，认识一下JavaScript 函数：

JavaScript 函数的基本概念

JavaScript 函数是实现固定功能的代码块。
函数是工具，是实现功能的工具。
函数是通过其中的代码，来实现所谓的功能。

函数的作用

封装： 将需要的代码，写入到函数中
重复： 一个函数可以反复调用
调用： 可以在任意需要位置上调用执行代码

函数的定义（封装）

语法

function 函数名称(函数的参数){
    函数的程序;
    return 内容;
}

名词解释

function    定义函数/封装 的关键词,作用类似于 关键词var 
            告诉计算机程序,我正在封装的是一个函数

函数名称     也就是这个函数的名称,之后调用函数时,是通过函数名称来调用函数,并且执行函数

函数的参数   执行函数时,输入给函数的数据信息

函数的程序   定义在{}中的程序,是函数执行时,调用的程序内容

return      定义函数的返回值，并且会终止之后函数程序的执行

实例

// 函数的封装/函数的定义
// 函数封装时,程序并没有被执行,只有在函数调用时,程序才会被执行
function fun(){
    console.log(123);
}

// 函数的调用和执行
fun();

注意：

1. 定义函数阶段,只是将程序定义在函数内,程序并没有执行；只有在调用函数时,封装在函数内部的程序,才会被执行。
2. 函数命名的规范 — 与变量的命名规范相同
            规则 : 只能使用 数字,字母,下划线_,美元$
                      不能以数字开头
                      区分大小写
            规范 : 见名知意
                      驼峰命名法
3. 所谓的封装,就是将程序,放在 函数的 { } 中,就是函数程序的封装。
4. 函数的调用
            调用执行,必须使用函数的固定语法：函数名称() 的方式来调用函数。

函数的定义方式

1. 声明方式

通过关键词 function 来定义和声明函数。

实例

// 封装函数,但是函数不会执行
// 也就是我现在组装好了一个微波炉,但是就放在那儿没有用
function fun1(){
    console.log('我是声明方式定义的函数1');
}

// 调用函数,执行函数
// 相当于我在这里使用微波炉
fun1();

2. 匿名函数 / 赋值方式

定义函数时，不定义函数名称，将函数赋值给一个变量，然后通过调用变量名称()的形式来调用函数。

实例

//将函数赋值给变量 fun2
var fun2 = function(){
    console.log('我是匿名函数,也叫赋值方式,定义的函数');
};

// 调用时,是通过变量名称()来调用函数
fun2();

定义函数的语法的区别

声明方式

可以在程序的任意位置上调用函数，甚至可以在定义函数之前就调用函数，执行函数。

实例

//先调用函数，再声明函数
// 声明方式定义的函数,可以正常执行
fun1();

function fun1(){
    console.log('我是声明方式定义的函数1');
}

赋值方式/匿名函数

只能在定义函数之后再调用函数。

实例

//先调用函数，再声明函数
// 赋值方式 / 匿名函数,不能正常执行,会报错
fun2();

var fun2 = function(){
    console.log('我是匿名函数,也叫赋值方式,定义的函数');
};

函数的参数

定义

是函数执行时定义的数据，或者是执行的对象、内容等。

实例

// 在函数的()中,来定义函数的参数
// 参数定义,也就是定义函数使用的两个变量
function add(min,max){              //-----形参
    var res = 0;
    for(var i = min ; i <= max ; i++){
        res += i;
    }
    console.log(res);            
}

add(1,100);                        //-----实参
add(1,10);                         //-----实参
add(90,100);                       //-----实参

这里，在声明函数时，函数名称括号内定义的参数叫做形参，就是形式上的参数。
而在调用函数时，函数名称括号内定义的参数叫做实参，就是实际的参数。

函数参数的默认值

因为实参赋值是有顺序的，带有默认值的形参,一般都写在形参的最后。

实例

// 正常定义函数和参数
function fun(name,age){
    console.log(`姓名是${name},年龄是${age}`);
}
// 函数执行是输入实参
fun('李四' , 180);

// 给函数的参数定义默认值
// 语法与给变量赋值是相同的语法 形参 = 数值

// 给形参定义默认值
function fun2(name,age=18){
    console.log(`姓名是${name},年龄是${age}`);
}
// 调用执行函数时,如果没有对应形参赋值
// 王五 只是给 name 形参赋值
// age 形参在调用函数时 没有赋值实参 
// 就执行 定义的默认值

// 如果有赋值,执行的是重复赋值,定义的实参会覆盖定义的默认值

// 如果形参,没有默认值,也就是形参没有赋值，也没有赋值实参
// 执行结果是undefined
fun2('王五');

函数的返回值

定义在函数内部的变量、参数等，在函数外部不能直接使用。如果要在函数外部使用，则需要定义返回值。

return关键词的作用

1. 定义函数的返回值
		如果没有 return，函数的返回值是 undefined。
2. return会终止 之后函数程序 的执行

实例

function add(min , max){
    var res = 0;
    for(var i = min ; i <= max ; i++){
        res += i;
    }
    return res;   // 如果没有此语句，输出结果 a 的值是 undefined
}

var a = add(1,100);

console.log(a);

函数的容错机制

函数的执行，对于参数是要有要求的，如果参数出现问题，要么终止程序的执行，要么对参数进行处理。

方式1：使用return来终止函数的执行

在switch判断和循环语句中，可以使用break来终止程序。
在函数中要终止函数的执行，不能使用break，需要使用return关键词。

方式2：对数据进行调整

数据交换存储。

实例

// 封装累加求和函数

// 默认是从1开始执行累加
// 给形参定义默认值是1,并且写在形参的最后
function add(max,min=1){
    // 理论上,第一个参数,应该是较小值,第二个参数应该是较大值
    
    // 方式1 使用return来终止函数程序的执行,并且返回自己定义的报错信息
    // if(min > max ){
    //     return '您的参数输入有误,请检查参数';
    // }
    
    // 方式2 对数据进行调整
    // 数据交换存储,也就是 min 和 max 存储数据,相互交换
    if(min > max){
        var middle = '你随便爱写什么写什么,不写也行';
        middle = min;
        min = max;
        max = middle;
    }

    // 实现函数功能的程序
    var res = 0;
    for(var i = min ; i <= max ; i++){
        res += i;
    }
    // 定义函数的返回值
    return res
}
console.log( add(20,100) );

函数说明

代码规范中规定，所有的自定义函数，都要写函数说明。每个公司对于函数说明的语法规范都不相同，我们现在先了解一个基本格式。 函数说明
param 参数的意思 是对参数的说明
　　　一般写 参数的名称 数据类型 作用
　　　return 返回值的意思 是对返回值的说明
　　　return 返回值的名称 数据类型 作用


@param min int 累加求和的起始数值，默认值是1，整数类型
@param max int 累加求和的终止数值，整数类型
@return res int 累加求和的结果，整数类型


函数功能作用的描述:
　　　累加求和函数，默认累加求和的起始值是1，终止值需要输入，累加求和的结果是res
　　　对于输入数据的大小顺序有容错处理
　　　对于输入数据的类型判断，有待后期增加

函数说明是为了代码规范，建议写上，不过实际中注释函数说明并不需要这么麻烦，具体如何写函数说明，让函数变得更加规范，下面我们来看一个demo：

Demo

质数判断:输入数值,返回值是质数/合数

看过题目要求，这里我们先把判断质数的程序写出来：

let x=parseInt(Math.random()*(100-2+1)+2);
let result = true;
for (let i = 2;i <= x - 1;i++){
    if (x % i === 0){
        result = false;
        break;
    }
}
result === false ? console.log(`${x} 是合数`) : console.log(`${x} 是质数`);

这里是一个判断2-100之间任意一个数是质数还是合数的程序。
接下来进行函数的封装，把程序放在一个函数内，这里我们在函数内部简化一下程序：

function num(x){
    for (let i = 2;i <= x - 1;i++){
        if (x % i === 0){
            return '合数';
        }
    }
    return '质数';
}
console.log(num());

这里因为可以用return关键词终止程序，所以简化了一些步骤，然后根据上面概念的描述，我们给函数加上形参默认值，而且我们知道不论是质数还是合数都是正整数，1既不是质数又不是合数，所以这里我们做一个函数的容错步骤：

function num(x = 2){
    if (x === 1){
        return '既不是质数，也不是合数';
    }
    else if (x <= 0){
        return '对不起，您的输入有误，请重新输入';
    }
    for (let i = 2;i <= x - 1;i++){
        if (x % i === 0){
            return '合数';
        }
    }
    return '质数';
}
console.log(num());

这里我们给x加上了默认值2，我们知道2是质数，所以如果我们调用函数时，num()里面什么都不输入，也会返回一个质数的结果。
而且这里我们用 if 判断做了一个容错机制，防止错误的输入导致的异常结果。

最后，我们给这个函数加上函数说明：

如何快捷设置函数说明呢？因为我用的是webstorm，所以这里先说一下webstorm的快捷操作：
		在webstorm中，在你的函数头部上一行，即关键词function上一行输入/**然后直接回车就会自动生成
一个函数注释，或者直接输入完整的/**/，这是js中的多行注释代码，然后将光标移动到第二个*后面即/**后面直
接回车就ok了。
		如果是VScode的话，需要下载一个插件KoroFileHeader，然后再函数头部上一行用快捷键 window：
ctrl+alt+t，mac：ctrl+cmd+t，即可自动生成函数说明了。

所以，给我们的函数加上函数说明后：

// 质数判断:输入数值,返回值是质数/合数
/**
 *
 * @param x {number}
 * @returns {string}
 * @description num函数 判断变量是质数还是合数
 */
function num(x = 2){
    if (x === 1){
        return '既不是质数，也不是合数';
    }
    else if (x <= 0){
        return '对不起，您的输入有误，请重新输入';
    }
    for (let i = 2;i <= x - 1;i++){
        if (x % i === 0){
            return '合数';
        }
    }
    return '质数';
}
console.log(num());

这里函数说明中的{ }内表示是变量的数据类型，@description后是函数的描述，怎么样，这样看起来是不是规范整洁多了，这样就算是别人来了，也能一眼看出你的函数是做什么的。