JavaScript基础day04

函数

定义：function执行特定任务的代码块

优点：实现代码复用，提高开发效率

函数使用

函数声明和调用

//函数的声明
function  函数名()
{
  函数体
}

//函数的调用
函数名（）

函数命名规范

（1）和变量命名基本一致

（2）尽量小驼峰式命名法

（3）前缀应该为动词

函数的复用代码和循环重复代码有什么不同？

（1）循环代码写完即执行，不能很方便控制执行位置。

（2）函数随时调用，随时执行，可重复调用。

 函数传参

优点：极大提高函数的灵活性

//函数传参

function 函数名（参数1，参数2....） // 多个数据用逗号隔开
{
   函数体
}

函数名（参数1，参数2....）

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

函数参数默认值------undefined

//封装一个函数，计算1-100之间所有数的和

<script>
    // 如果用户不输入实参，则会出现  undefined + undefined 结果是NaN
    // 形参默认值，可以默认为 0
    // 这个默认值只会在缺少实参参数传递时 才会被执行，所以有参数会优先执行传递过来的实参, 否则默认为 undefined
    function getSum(num1 = 0, num2 = 0) {
      document.write(num1 + num2)
    }
    let num1 = +prompt('请输入第一个数字')
    let num2 = +prompt('请输入第二个数字')
    getSum(num1, num2)
</script>

//学生的分数是一个数组,计算每个学生的总分

<script>
    //给参数默认值，保证不报错
    function getSum(arr = []) {
      let sum = 0
      for (let i = 0; i < arr.length; i++) {
        sum += arr[i]
      }
      console.log(sum)
    }
    getSum([23, 45, 65, 23, 64, 56])
</script>

 函数返回值

return关键字

细节：

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

（2） return 后面代码不会再被执行，会立即结束当前函数，所以 return 后面的数据不要换行写。

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

<script>
    // 返回数组中的最大最小值
    let arr = []
    let n = +prompt('请输入数组的个数')
    for (let i = 1; i <= n; i++) {
      let num = +prompt('数组元素')
      arr.push(num)
    }
    function arrMax(arr = []) {
      let Max = arr[0]
      let Min = arr[0]
      for (let i = 0; i < arr.length; i++) {
        if (arr[i] > Max) {
          Max = arr[i]
        }
        if (arr[i] < Min) {
          Min = arr[i]
        }
      }
      // 以数组的形式返回多个值
      return [Max, Min]
    }
    let re = arrMax(arr)
    console.log(re)
 </script>

 函数细节补充

（1）两个相同的函数后面的会覆盖前面的函数 

（2）在Javascript中 实参的个数和形参的个数可以不一致

•   如果形参过多 会自动填上undefined (了解即可)
•   如果实参过多 那么多余的实参会被忽略 (函数内部有一个arguments,里面装着所有的实参)  

（3）函数一旦碰到return就不会在往下执行了 函数的结束用return

作用域

 

 特殊情况：

（1）如果函数内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐。

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

//变量的访问原则  就近原则：在能够访问到的情况下先局部，局部没有在找全局。

function f1() {
  let num = 123
  function f2() {
    console.log( num )
 }
 f2()
 }
 let num = 456
 f1()   //123


function f1() {
  let num = 123
  function f2() {
    let num = 0
    onsole.log(num)
 }
 f2()
 }
 let num = 456
 f1()   //0

 let a = 1
 function fn1() {
    let a = 2
    let b = '22'
    fn2()
    function fn2() {
        let a = 3
        fn3()
        function fn3() {
            let a = 4
            console.log(a) //a的值 ?   4
            console.log(b) //b的值 ?   22 
        }
    }
 }
 fn1()

匿名函数 

//函数表达式  只能后调用，具体函数名的函数调用位置任意

let fn = function ()
{
   函数体
}

fn()  //调用


//立即执行函数(防止变量污染)   多个立即执行函数要用 ; 隔开，要不然会报错

//方法1
(function () {console.log(11)})();

//方法2
(function () {console.log(11)}());

逻辑中断

综合案例

转换时间

//用户输入秒数，可以自动转换为时分秒
<script>
    let s = +prompt('请输入秒数')
    function getTime(t = 0) {
      let h = parseInt(t / 60 / 60 % 24)
      let m = parseInt(t / 60 % 60)
      let s = parseInt(t % 60)
      // 重新赋值
      h = h < 10 ? '0' + h : h
      m = m < 10 ? '0' + m : m
      s = s < 10 ? '0' + s : s
      return `转换后的时间为${h}小时${m}分钟${s}秒`
    }
    let re = getTime(s)
    console.log(re)
</script>

封装 some 函数查看数组是否存在某个元素  

<script>
    function some(n = 0, arr = []) {
      for (let i = 0; i < arr.length; i++) {
        if (n === arr[i]) {
          return true
        }
        else {
          return false
        }
      }
    }
    let arr1 = ['张三', '李四', '王二', '麻子', '小红', '小兰']
    let str = prompt('输入元素')
    let re = some(str, arr1)
    console.log(re)
</script>

封装 findeIndex 函数返回查找元素在数组中的索引号

<script>
    function findeIndex(n = 0, arr = []) {
      for (let i = 0; i < arr.length; i++) {
        if (n === arr[i]) {
          return i
        }
        else {
          return -1
        }
      }
    }
    let arr1 = ['张三', '李四', '王二', '麻子', '小红', '小兰']
    let str = prompt('输入元素')
    let re = findeIndex(str, arr1)
    console.log(re)
</script>