1. 函数的概念

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

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

2. 函数的使用

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

2.1 声明函数

  1. // 声明函数
  2. function 函数名(){
  3.   // 函数体代码
  4. }

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

2.2 调用函数

  1. // 调用函数
  2. 函数名(); // 通过调用函数名来执行函数体代码

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

2.3 函数的封装

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

案例一：利用函数计算1-100之间的累加和

  1. function getSum() {
  2.     var sum = 0;
  3.     for (var i = 1; i <= 100; i++) {
  4.         sum += i;
  5.     }
  6.     console.log(sum);
  7. }
  8. getSum(); // 5050

3. 函数的参数

3.1 形参和实参

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

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

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

  1. // 1. 函数可以重复相同的代码
  2. function cook(){
  3.     console.log('酸辣土豆丝');
  4. }
  5. cook();
  6. cook();
  8. // 2. 我们可以利用函数的参数实现函数重复不同的代码
  9. // function 函数名(形参1, 形参2 ...){ // 在声明函数的小括号里面时形参(形式上的参数)
  10. // }
  12. // 3. 形参和实参的执行过程
  13. function cook(arg){ // 形参是接收实参的 arg = '酸辣土豆丝' 形参类似于一个变量
  14.     console.log(arg);
  15. }
  16. cook('酸辣土豆丝');
  17. cook('大肘子');
  19. // 4. 函数的参数可以有 也可以没有 个数不限

3.2 案例

  1. 利用函数求任意两个数的和
    1. function getSum(num1, num2) {
    2.  console.log(num1 + num2);
    3. }
    4. getSum(1, 3); // 4
    5. getSum(3, 8); // 11
  2. 利用函数求任意两个数之间的和
    1. function getSums(start, end) {
    2.  var sum = 0;
    3.  for (var i = start; i <= end; i++) {
    4.      sum += i;
    5.  }
    6.  console.log(sum);
    7. }
    8. getSums(1, 100); // 5050

    3.3 函数形参和实参个数匹配问题

    | 参数个数 | 说明 | | —- | —- | | 实参个数等于形参个数 | 输出正确结果 | | 实参个数多于形参个数 | 只取到形参的个数 | | 实参个数小于形参个数 | 多的形参定义为undefined，结果为NaN |
  1. function sum(num1, num2) {
  2.     console.log(num1 + num2);
  3. }
  4. // 形参和实参个数相等，输出正确结果
  5. sum(100, 200); //100
  6. // 实参个数多于形参，只取到形参的个数
  7. sum(100, 400, 500, 700); 
  8. // 实参个数少于形参，多的形参定义为undefined，结果为NaN
  9. sum(200); // NaN

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

4. 函数的返回值 return

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

4.1 案例

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

  1. // 利用函数 求两个数的最大值
  2. function getMax(num1, num2) {
  3.     // if (num1 > num2) {
  4.     //     return num1;
  5.     // } else {
  6.     //     return num2;
  7.     // }
  8.     return num1 > num2 ? num1 : num2;
  9. }
  10. console.log(getMax(1, 3)); // 3
  11. console.log(getMax(11, 3)); // 11

案例二：求数组[5, 2, 99, 101, 67, 77]中的最大数值

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

4.2 return终止函数

return语句之后的代码不被执行

  1. // 1. return 终止函数
  2. function getSum(num1, num2) {
  3.     return num1 + num2; // return 后面的代码不会被执行
  4.     alert('我是不会被执行的哦！')
  5. }
  6. console.log(getSum(1, 2)); // 3
  8. // 2. 我们求任意两个数的 加减乘数结果
  9. function getResult(num1, num2) {
  10.     return [num1 + num2, num1 - num2, num1 * num2, num1 / num2];
  11. }
  12. var re = getResult(1, 2); // 返回的是一个数组
  13. console.log(re); // (4) [3, -1, 2, 0.5]

4.3 return的返回值

return只能返回一个值。如果用逗号隔开多个值，以最后一个为准

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

4.4 函数没有return返回undefined

  1. 如果有return则返回return后面的值
    2. 如果没有return则返回undefined
    1. function fun1() {
    2.  return 666;
    3. }
    4. console.log(fun1()); // 666
    5. function fun2() {
    6. }
    7. console.log(fun2()); // undefined

    4.5 break，continue，return的区别

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

    5. 作业

  2. 写一个函数，用户输入任意两个数字的任意算数运算(简单的计算器小功能)，并能弹出运算后的结果
    2. 写一个函数，用户输入任意两个数字的最大值，并能弹出运算后的结果
    3. 写一个函数，用户输入任意三个不同数字的最大值，并能弹出运算后的结果
    4. 写一个函数，用户输入一个数判断是否是素数，并弹出返回值(又叫质数，只能被1和自身整除的数)

    6. arguments的使用

    当我们不确定有多少个参数传递的时候，可以用arguments来获取。在JavaScript中，arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个arguments对象，arguments对象中存储量传递的所有实参。
    arguments展示形式是一个伪数组，因此可以进行遍历。
    伪数组具有以下特点：
    • 具有length属性
    • 按索引方式储存数据
    • 不具有数组的push，pop等方法

    1. function fn() {
    2.  // console.log(arguments); //  里面存储了所有传递过来的实参 arguments = [1, 2, 3]
    3.  // console.log(arguments.length); // 3
    4.  // console.log(arguments[2]); // 3
    6.  for (var i = 0; i < arguments.length; i++) {
    7.      console.log(arguments[i]);
    8.  }
    9. }
    10. fn(1, 2, 3);
    11. fn(1, 2, 3, 4, 5);

    7.案例

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

    1. function getMax() {
    2.  var max = arguments[0];
    3.  for (var i = 1; i < arguments.length; i++) {
    4.      if (arguments[i] > max) {
    5.          max = arguments[i];
    6.      }
    7.  }
    8.  return max;
    9. }
    10. console.log(getMax(1, 2, 3)); // 3
    11. console.log(getMax(1, 2, 3, 4, 5)); // 5
    12. console.log(getMax(11, 2, 34, 444, 5, 100)); // 444

    案例二：利用函数封装方式，翻转任意一个数组

    1. function reverse(arr) {
    2.  var newArr = [];
    3.  for (var i = arr.length - 1; i >= 0; i--) {
    4.      newArr[newArr.length] = arr[i];
    5.  }
    6.  return newArr;
    7. }
    8. var arr1 = reverse([1, 3, 4, 6, 9]);
    9. console.log(arr1); // (5) [9, 6, 4, 3, 1]
    10. var arr2 = reverse(['red', 'pink', 'blue']);
    11. console.log(arr2); // (3) ['blue', 'pink', 'red']

    案例三：利用函数封装方式，对数组排序—冒泡排序

    1. function sort(arr) {
    2.  for (var i = 0; i < arr.length - 1; i++) {
    3.      for (var j = 0; j < arr.length - i - 1; j++) {
    4.          if (arr[j] > arr[j + 1]) {
    5.              var temp = arr[j];
    6.              arr[j] = arr[j + 1]
    7.              arr[j + 1] = temp;
    8.          }
    9.      }
    10.  }
    11.  return arr;
    12. }
    13. var arr1 = sort([1, 4, 2, 9]);
    14. console.log(arr1); // (4) [1, 2, 4, 9]
    15. var arr2 = sort([11, 7, 22, 999]);
    16. console.log(arr2); // (4) [7, 11, 22, 999]

    案例四：判断闰年

    要求：输入一个年份，判断是否是闰年(闰年：能被4整除并且不能被100整除，或者能被400整除)

    1. function isRunYear(year) {
    2.  // 如果是闰年我们返回 true 否则返回false
    3.  var flag = false;
    4.  if (year % 4 == 0 && year % 100 != 0 || year % 400 === 0) {
    5.      flag = true;
    6.  }
    7.  return flag;
    8. }
    9. console.log(isRunYear(2000)); // true
    10. console.log(isRunYear(1999)); // false

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

    因为每个函数都是独立的代码块，用于完成特殊任务，因此经常会用到函数相互调用的情况

    1. function fn1() {
    2.  console.log(11);
    3.  fn2(); // 在fn1函数里面调用了fn2函数
    4. }
    5. fn1();
    6. function fn2() {
    7.  console.log(22); 
    8. }
    1. function fn1() {
    2.  console.log(111);
    3.  fn2();
    4.  console.log('fn1');
    5. }
    6. function fn2() {
    7.  console.log(222);
    8.  console.log('fn2');
    9. }
    10. fn1();

    案例五：用户输入年份，输出当前年份2月份的天数

    ```javascript // 用户输入年份，输出当前年份2月份的天数 function backDay() { var year = prompt(‘请您输入年份: ‘); if (isRunYear) {

    1.  alert('当前年份是闰年2月份有29天');

    } else {

    1.  alert('当前年份是平年2月份有28天');

    } } backDay();

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

  1. <a name="xdhRk"></a>
  2. # 8. 函数的两种声明方式
  3. ```javascript
  4. // 1. 利用函数关键字自定义函数(命名函数)
  5. function fn(){
  7. }
  8. fn();
  10. // 2. 函数表达式
  11. // var 变量名 = function(){};
  12. var fun = function(arg){
  13.     console.log('我是函数表达式');
  14.     console.log(arg);
  15. }
  16. fun('pink老师');
  17. // (1) fun是变量名 不是函数名
  18. // (2) 函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值 而函数表达式里面存的是函数
  19. // (3) 函数表达式也可以进行传递参数