js函数及应用

---

一、函数的概念

在JS里面，可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量使用。

虽然for循环语句也能实现一些简单的重复操作，但是比较具有局限性，此时我们就可以使用JS中的函数。

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

// 1.求1~100的累加和
var sum = 0;
for (var i = 1; i <= 100; i++) {
    sum += i;
}
console.log(sum); //5050
// 2.求10~50的累加和
var sum = 0;
for (var i = 10; i <= 50; i++) {
    sum += i;
}
console.log(sum); //1230
// 3.函数 就是封装了一段可以被重复执行调用的代码块，目的：就是让大量代码重复使用
function getSum(num1, num2) {
    var sum = 0;
    for (var i = num1; i <= num2; i++) {
        sum += i;
    }
    console.log(sum);
}
getSum(1, 100);//5050
getSum(10, 50);//1230
getSum(1, 1000);//500500

二、函数的使用

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

1.声明函数

// 函数使用分为两步：声明函数和调用函数
// 1.声明函数
function 函数名(){
    // 函数体
}
// 1.1 function声明函数的关键字，全部小写
// 1.2 函数是做某件事情，函数名一般是动词 getSum
// 1.3 函数不调用自己不执行
function sayHi() {
    console.log('hi~');
}

• function是声明函数的关键字，必须小写
• 由于函数一般是为了实现某个功能才定义的，所以通常我们将函数名命名为动词，比如getSum

2.调用函数

// 2.调用函数
// 函数名()
sayHi();//通过调用函数名来执行函数体代码
// 调用函数的时候千万不要忘记加小括号

• 调用的时候千万不要忘记添加小括号
• 口诀：函数不调用，自己不执行

注意：声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码。

3.函数的封装

• 函数的封装是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口
• 简单理解：封装类似将电脑配件整合组装到机箱中（类似快递打包）

// 利用函数计算1~100之间的累加和
// 1.声明函数
function getSum() {
    var sum = 0;
    for (var i = 1; i <= 100; i++) {
        sum += i;
    }
    console.log(sum);
}
// 调用函数
getSum();

4.提问

• 函数是做什么的（作用）？
• 声明函数用什么关键词？
• 如何调用函数？
• 封装是什么意思？

三、函数的参数

1.形参和实参

// 1.函数可以重复相同的代码
function cook() {
    console.log('土豆沙拉');
}
cook();
cook();

在声明函数时，可以在函数名称后面加的小括号中添加一些参数，这些参数被称为形参，而在调用该函数时，同样也需要传递相应的参数，这些参数被称为实参。

参数	说明
形参	形式上的参数，函数定义的时候，传递的参数，当前并不知道是什么
实参	实际上的参数，函数调用的时候，传递的参数，实参是传递给形参的

参数的作用：在函数内部某些值不能固定，可以通过参数在调用函数时传递不同的值进去

// 2.可以利用函数的参数实现函数重复不同的代码
 function 函数名(形参1, 形参2, ...) { //在声明函数的小括号里面是形参（形式上的参数）

}
函数名(实参1, 实参2, ...) // 在函数调用的小括号里面是实参（实际的参数）

// 3.形参和实参的执行过程
function cook(aru) { // 形参是接受实参的， aru='土豆沙拉'，形参类似于一个变量
    console.log(aru);
}
cook('土豆沙拉');
cook('砂锅');
// 4.函数的参数可以有，也可以没有，个数不限

2.案例：利用函数求任意两个数的和

// 1.利用函数求任意两个数的和
function getSum(num1, num2) {
    console.log(num1 + num2);
}
getSum(1, 3); // 4
getSum(3, 8); // 11
// 2.利用函数求任意两个数之间的和
function getSums(start, end) {
    var sum = 0;
    for (var i = start; i <= end; i++) {
        sum += i;
    }
    console.log(sum);
}
getSums(1, 100); // 5050
getSums(1, 10);// 55
// 3.注意点
// 3.1 多个参数之间用逗号隔开
// 3.2 形参可以看做是不声明的变量

3.函数形参和实参个数不匹配的问题

参数个数	说明
实参个数等于形参个数	输出正确结果
实参个数多余形参个个数	只取到形参的个数
实参个数小于形参个数	多的形参定义为undefined，结果为NaN

// 函数形参实参个数匹配
function getSum(num1, num2) {
    console.log(num1 + num2);
}
// 1.如果实参的个数和形参的个数一致，则正常输出结果
getSum(1, 2); // 3
// 2.如果实参的个数多余形参的个数，会取到形参的个数
getSum(1, 2, 3);// 3
// 3.如果实参的个数小于形参的个数
// 形参可以看作是不用声明的变量，num2是一个变量但是没有接受值，结果就是undefined
getSum(1);// NaN
// 建议 尽量让实参的个数和形参相匹配

注意：在JavaScript中，形参的默认值是undefined

4.小结

• 函数可以带参数也可以不带参数
• 声明函数的时候，函数名括号里面的是形参，形参的默认值为undefined
• 调用函数的时候，函数名括号里面的是实参
• 多个参数中间用逗号分隔
• 形参的个数可以和实参的个数不匹配，但是结果不可预计，尽量要匹配

四、函数的返回值

// 1.函数是做某件事或者实现某种功能
  function cook(aru) {
        console.log(aru);
    }
cook('油泼面');

// 2.函数的返回值格式
function 函数名(){
    return 需要返回的结果;
}
函数名();
// (1)函数只是实现某种功能，最终的结果需要返回给函数的调用者函数名()通过return实现的
// (2)只要函数遇到return，就把后面的结果返回给函数的调用者，函数名()=return后面的结果
// 3.代码验证
function getResult() {
    return 666;
}
getResult(); // getResult()=666
console.log(getResult());

function cook(aru) {
    return aru;
}
console.log(cook('油泼'));
// 4.求任意两个数的和
function getSum(num1, num2) {
    return num1 + num2;
}
console.log(getSum(1, 2));// 3

1.案例1：利用函数求任意两个数的最大值

// 利用函数，求两个数的最大值
function getMax(num1, num2) {
   /* if (num1 > num2) {
        return num1;
    } else {
        return num2
    }*/
     return num1 > num2 ? num1 : num2;
}
console.log(getMax(1, 3)); //3
console.log(getMax(11, 3)); // 11

2.案例2：利用函数求任意一个数组中的最大值

求数组[52, 99, 101, 67, 77];中的最大值

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

3.return终止函数

• return语句之后的代码不被执行。
• return只能返回一个值

// 函数返回值注意事项
// 1.return终止函数
function getSum(num1, num2) {
    return num1 + num2; // return后面的代码不会被执行
    alert('我是不会被执行的，因为前面有return');
}
console.log(getSum(1, 2)); // 3

// 2.return只能返回一个值
function fn(num1, num2) {
    return num1, num2; // 返回的结果是最后一个值
}
console.log(fn(1, 2)); // 2

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

4.函数没有return返回undefined

函数都是有返回值的

• 如果有return，则返回return后面的值
• 如果没有return，则返回undefined

// 4.我们的函数如果有return，则返回的是return后面的值，如果函数没有return，则返回undefined
function fun1() {
    return 666;
}
console.log(fun1()); // 666

function fun2() {

}
console.log(fun2()); // undefined

5.break，continue，return的区别

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

五、透过榨汁机看透函数

榨汁机：输入原料→内部处理→输出果汁
函数：输入参数→内部处理→返回结果
他们俩的功能都是实现某种功能