四、JS 基础知识之函数的使用及返回值（1）

一、函数使用

函数 function 是为执行特定任务而设计的代码块。

函数可以把具有相同或相似逻辑的代码封装（包裹）起来，通过函数调用执行这些被封装的代码逻辑，这样有利于精简代码、方便代码复用。

1. 函数声明

示例：

HTML 复制代码

  <body>
    <script>
      function hi() {
        document.write('Hello world')
      }
    </script>
  </body>

2. 函数命名规范

函数命名规范 与变量名命名基本一致，尽量使用小驼峰式命名法，前缀应该为动词：

示例：

HTML 复制代码

  <body>
    <script>
      function getId() {} // 获取ID
      function addName() {} // 添加姓名
      function isActive() {} // 是否激活
    </script>
  </body>

3. 函数体

函数体 是函数的构成部分，它会将相同或相似的代码封装起来，直到函数调用时函数体内的代码才会被执行，函数的功能代码都要写在函数体里面。

4. 函数调用

函数调用：函数名()

使用（）调用函数，声明的函数必须调用，函数调用后函数体内的代码逻辑才会真正被执行

函数声明一次，可以多次调用，每次调用函数体里面的代码就会被执行一次：

HTML 复制代码

  <body>
    <script>
      function hi() {
        document.write('Hello world ')
      }
      hi()
      hi()
      hi()
    </script>
  </body>

我们前面使用的 alert() 等名字后面跟小括号的，本质上都是函数的调用。

示例：封装一个函数，计算 1 - 100 中所有偶数的和

HTML 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      function getSum() {
        let sum = 0
        for (let i = 1; i <= 100; i++) {
          if (i % 2 === 0) {
            sum += i
          }
        }
        document.write('1-100之间偶数的和为：' + sum)
      }

      getSum()
    </script>
  </body>
</html>

二、函数传参

上面的示例只能求 1-100 之间的偶数和，如果我们想要求 1-10 或者 1-1000 ，甚至更多数的偶数和，此函数就不适用了，此函数的功能就有了局限性。

如果想要提高这个函数的灵活性，我们需要将要计算的数字传到函数内，这样在函数调用时，只需要传入相应的数值就可以了，这个功能就需要有参函数来实现了

1. 有参函数的声明、调用

有参函数 声明语法：

参数列表 是指要传入的数据，函数声明时需要传入的数据，多个数据之间用逗号隔开

示例1：单个参数

HTML 复制代码

  <body>
    <script>

      function getSum(num) {
        document.write(num + num)
      }
      
    </script>
  </body>

示例2：多个参数

HTML 复制代码

  <body>
    <script>

      function getSum(num1,num2) {
        document.write(num1 + num2)
      }

    </script>
  </body>

函数调用时，声明函数时有几个参数，在调用时就写几个参数，多个参数之间也是用逗号隔开

调用语法：

示例1：单个参数调用

HTML 复制代码

    <script>
      function getSum(num) {
        document.write(num + num)
      }

      document.write("单个参数调用：")
      getSum(10)
    </script>

示例2：多个参数调用

HTML 复制代码

    <script>

      function getSum(num1, num2) {
        document.write(num1 + num2)
      }

      document.write("多个参数调用：")
      getSum(5, 8)
      
    </script>

2. 形参和实参

形参（形式上的参数） ：声明函数时，写在函数名旁边小括号里的参数，可以理解成是在函数内部声明的变量

实参（实际的参数） ：调用函数时，写在函数名旁边小括号里的参数，可以理解为给这个变量赋值

我们在开发中，尽量保持形参和实参个数一致

之前使用的 alert("123")、Number(3) 等本质上都是在调用函数传参

示例1：函数调用时不传参

HTML 复制代码

    <script>
      function getSum(num) {
        document.write(num)
      }

      getSum()
    </script>

示例2：为防止函数调用时不传参报错，大多情况下可以使用以下方法

原始：

HTML 复制代码

    <script>
      function getSum(num1, num2) {
        document.write(num1 + num2)
      }

      getSum()
    </script>

改进：

HTML 复制代码

    <script>
      function getSum(num1, num2) {
        num1 = num1 || 0
        num2 = num2 || 0
        document.write(num1 + num2)
      }

      getSum() // 0
      getSum(5, 8) //13
    </script>

示例：封装函数求任意数之间的偶数和，这里以 1-10 为例

HTML 复制代码

    <script>
      function getSum(start, end) {
        let sum = 0
        for (let i = start; i <= end; i++) {
          if (i % 2 === 0) {
            sum += i
          }
        }
        document.write(`${start}-${end}之间偶数的和为：${sum}`)
      }
      getSum(1, 10)
    </script>

参数补充

示例1：实参个数少于形参

HTML 复制代码

  <body>
    <script>
      function getSum(num1, num2) {
        console.log(num1)
        console.log(num2)
        console.log(num1 + num2)
      }

      getSum(10)
    </script>
  </body>

相当于 num1 = 10，num2 = undefined ，10 + undefined = NAN

示例2：实参个数大于形参

HTML 复制代码

  <body>
    <script>
      function getSum(num1, num2) {
        console.log(num1)
        console.log(num2)
        console.log(num1 + num2)
      }

      getSum(10, 3, 1)
    </script>
  </body>

多出来的实参会被忽略：1 会被忽略

示例3：num1 和 num2 可以看作是函数内部的局部变量，调用时在函数内部会进行判断是否有参数传过来，如果没有传参数，执行初始值（即 num1=0，num2=0）；有参数传入，则执行实参赋值

HTML 复制代码

  <body>
    <script>
      function getSum(num1 = 0, num2 = 0) {
        console.log(num1 + num2)
      }
      console.log('未传参：')
      getSum()

      console.log('传参：')
      getSum(3, 5)
    </script>
  </body>

三、函数返回值

当调用某个函数时，会返回一个结果，这就是有 返回值 的函数

我们之前接触到的 prompt() 就是有 返回值 的函数，它返回一个字符串：

HTML 复制代码

    <script>
      let test = prompt('请输入：')
      console.log(typeof test)
      console.log(test)
    </script>

有些函数是没有返回值的，比如 alert() ，它是弹框，不需要返回值

以上这些函数都是 JS 内置的，我们可以直接使用，大多数时候需要根据要求来设定是否需要返回值

1. 用 return 返回数据

当函数需要返回数据时，用 return 关键字

语法：

示例：

HTML 复制代码

    <script>
      function getSum(num1, num2) {
        return num1 + num2
      }

      let sum = getSum(10, 5)
      console.log(sum)
    </script>

说明：

在函数体中使用 return 关键字可以将函数内部执行的结果交给函数外部使用，即函数内部不需要输出结果，而是直接返回结果，这样对执行结果的扩展性更高，可以让其它的程序也使用这个结果；
函数内部只能出现一次 return ，并且 return 后面的代码不会被执行，所以 return 后面的数据不要换行写；
return 会立即结束当前函数；
函数可以没有 return ，这种情况下函数默认返回值为 undefined

示例：求数组中的最大值

html 复制代码

  <body>
    <script>
      function getSum(arr) {
        let maxArr = arr[0]
        for (let i = 0; i < arr.length; i++) {
          if (maxArr < arr[i]) {
            maxArr = arr[i]
          }
        }
        return maxArr
      }

      let arr = [2, 4, 1, 6, 8, 3, 9, 13, 22, 10, 1]
      let maxArr = getSum(arr)
      console.log(maxArr)
    </script>
  </body>

2. 返回多个值

HTML 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      function getSum(arr) {
        let max = min = arr[0]
        for (let i = 0; i < arr.length; i++) {
          max = max < arr[i] ? arr[i] : max
          min = min > arr[i] ? arr[i] : min
        }
        return [max, min]
      }

      let arr = [2, 4, 1, 6, 8, 3, 9, 13, 22, 10, 1]
      let arrNew = getSum(arr)
      console.log(arrNew)
      console.log('数组最大值：' + arrNew[0])
      console.log('数组最小值：' + arrNew[1])
    </script>
  </body>
</html>