JavaScript 复习第四天

1.函数

1.1 为什么需要函数

函数：

function，是被设计为 执行特定任务 的代码块

说明：

函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于 精简代码方便复用 。

1.2 函数使用

目标：掌握函数语法，把代码封装起来

函数的声明语法 ：

function 函数名(){

     函数体
}

例：

function sayHi(){

   document.write('hai~~')
}

函数名命名规范:

        和变量命名基本一致

         尽量小驼峰式命名法

        前缀应该为动词

         命名建议：常用动词约定

函数的调用语法 :

//函数调用，这些函数体内的代码逻辑会被执行

函数名（）

注意：声明（定义）的函数必须调用才会真正被执行，使用 () 调用函数

例：

//函数一次声明可以多次调用，每一次函数调用函数体里面的代码会重新执行一次

sayHi()

sayHi()

我们曾经使用的 alert() , parseInt() 这种名字后面跟小括号的本质都是函数的调用

函数体：

函数体是函数的构成部分，它负责将相同或相似代码“包裹”起来，直到函数调用时函数体内的代码才会被执行。函数的功能代码都要写在函数体当中。

目的：通过这段代码 封装 成函数，体会函数的好处

案例：

<script>
    function getSum() {
      let num1 = 10
      let num2 = 20
      console.log(num1 + num2);
    }
    getSum()

    function getAll() {
      let sum = 0
      for (let i = 1; i <= 100; i++) {
        sum += i
      }
      console.log(sum);
    }
    getAll()
  </script>

1.3 函数传参 

1. 为什么要有参数的函数

function getSum(){
    let num1 =10
    let num1 =20
console.log(num1 + num2)
}
getSum()

这样的函数只能求 10 + 20， 这个函数功能局限非常大

解决办法：把要计算的数字传到函数内

结论：

      若函数完成功能需要调用者传入数据，那么就需要用有参数的函数

      这样可以极大提高函数的灵活性

2. 有参数的函数声明和调用

声明语法：

function 函数名（参数列表）{
      函数体
}

参数列表:

      传入数据列表

      声明这个函数需要传入几个数据

      多个数据用逗号隔开

例：

单个参数:

function getSquare(num1){
  
    document.write(num1*num1)

}

多个参数:

function getSquare(num1,num2){
  
    document.write(num1+num2)

}

调用语法：

函数名（传递的参数列表）

例：

getSquare(8)

getSum(10,20)

调用函数时，需要传入几个数据就写几个，用逗号隔开

3 形参和实参

形参：声明函数时写在函数名右边小括号里的叫形参（形式上的参数）

实参：调用函数时写在函数名右边小括号里的叫实参（实际上的参数）

形参可以理解为是 在这个函数内声明的 变量 （比如 num1 = 10）实参可以理解为是给这个变量赋值

开发中尽量保持形参和实参个数一致

  我们曾经使用过的 alert('打印'), parseInt('11'), Number('11')本质上都是函数调用的传参

案例：

 <script>
    function getSum(num1, num2) {
      document.write(num1 + num2)
    }
    let n1 = +prompt('请输入第一个数：')
    let n2 = +prompt('请输入第二个数：')
    getSum(n1, n2)
  </script>

案例：函数封装求和

合理利用 逻辑中断

形参如果不被赋值，就是undefined

 <script>
    function getSum(num1, num2) {
      num1 = num1 || 0
      num2 = num2 || 0
      console.log(num1+num2);
    }
    getSum()
  </script>

undefined+undefined=NaN

null+null=0

案例：函数数组求和

<script>
    function getScore(arr){
      let sum = 0
      for(let i = 0;i<arr.length;i++){
        sum+=arr[i]
      }
      console.log(sum);
    }
    getScore([100,56,89,45,90,67,84])
  </script>

1.4函数返回值

1. 为什么要让函数有返回值

         什么是函数？

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

        执行特定任务后

 把任务结果给我们

        

缺点：把计算后的结果处理方式写死了，内部处理了

解决：把处理结果返回给调用者

有返回值函数的概念：

    当调用某个函数，这个函数会返回一个结果出来

    这就是有 返回值 的函数

2 用return返回数据

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

语法：

return 数据

使用：

 <script>
    function getSum(num1,num2){
      return num1+num2
    }
    let sum = getSum(10,20)
    document.write(sum)
    console.log(sum);
  </script>

细节：

     在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用

     函数内部只能执行 1 次 return，并且 return 后面代码不会再被执行，所以 return 后面的数据不要换行写

    return会立即结束当前函数

   函数可以没有 return，这种情况函数默认返回值为 undefined

案例：

 <script>
    //求数组中最大值最小值并返回
    function getMax(arr) {
      //1.先假设数组的第一个元素是最大的
      let max = arr[0]
      //2.再遍历数组依次比较
      for (let i = 1; i < arr.length; i++) {
        if (max < arr[i]) {
          max = arr[i]
        }      
      }
      //3.将最大的那个返回
      return max
    }
    let date = [23, 45, 24, 12, 67, 65, 36]
    let res = getMax(date)
    console.log(res)

    function getMin(arr) {
      //1.先假设数组的第一个元素是最小的
      let min = arr[0]
      //2.再遍历数组依次比较
      for (let i = 1; i < arr.length; i++) {
        if (min > arr[i]) {
          min = arr[i]
        }      
      }
      //3.将最小的那个返回
      return min
    }
    let res1 = getMin(date)
    console.log(res1)
  </script>

 <script>
    //求任意两个数最大值
    function getMax(num1, num2) {
      return num1 > num2 ? num1 : num2
    }
    let res =  getMax(40,50)
    console.log(res);
  </script>

1.5作用域

1. 作用域概述

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的 可用性的代码范围 就是这个名字的 作用域 。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

2. 变量的作用域

变量有一个坑， 特殊情况：

如果函数内部或者块级作用域内部，变量没有声明，直接赋值，也当 全局变量 看，但是强烈不推荐

但是有一种情况，函数内部的形参可以看做是局部变量。

3. 变量访问原则-作用域链

 只要是代码，就至少有一个作用域

 写在函数内部的局部作用域

  如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域

 根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访

问，就称作作用域链

1.6匿名函数

    函数可以分为：

1. 匿名函数

将匿名函数赋值给一个变量，并且通过变量名称进行调用 我们将这个称为函数表达式

语法：

let fn = function(){
   
   函数体

}

调用：

fn() //函数名（）

其中函数的形参和实参使用跟具名函数一致。

     

2. 立即执行函数

场景介绍: 避免全局变量之间的污染

语法：

//方式1

(function () { console.log(11) })();


//方式2

(function () { console.log(11) }());

//不需要调用，立即执行

注意： 多个立即执行函数要用 ; 隔开，要不然会报错

综合案例：

<script>
    // 小时： h = parseInt(总秒数 / 60 / 60 % 24)
    // 分钟： m = parseInt(总秒数 / 60 % 60)
    // 秒数: s = parseInt(总秒数 % 60)

    //1.准备一个弹出框
    let time = +prompt('请输入秒数:')

    //2.定义一个函数 作用：将用户输入的时间转换为 时分秒
    function dataFormat(t) {
      let h = parseInt(t / 60 / 60 % 24)
      let m = parseInt(t / 60 % 60)
      let s = parseInt(t % 60)

      //3.如果数字小于0 需要在前面补0
      //调用外面的padZaro 处理补0 将处理后的结果返回给h m s变量
      h = padZaro(h)
      m = padZaro(m)
      s = padZaro(s)

      //4.将结果 返回
      return `计算的结果是：${h}时${m}分${s}秒`
    }

    //定义一个函数 专门用于数字补0
    function padZaro(n) {
     return n = n < 10 ? '0' + n : n
    }
    let res = dataFormat(time)
    document.write(res)
  </script>