JS学习第六天

函数  

1 具有某种功能的代码块，为了复用

例子：

求和1-10的和

  let sum = 0
      for (let i = 1; i <= 10; i++) {
        sum += i
      }
      console.log(sum) */

       

 2 语法

       定义

        function 函数名() {

           具体功能的代码实现

        }

函数不会自己执行 需要调用它-函数名()

函数封装

举例：

求两个数的和

       函数声明的时候x,y叫形式参数-形参

 function add(x, y) {
        console.log(x + y)
      }
      add(1, 2)
      add(3, 4)

      const num1 = +prompt('请输入第一个数')
      const num2 = +prompt('请输入第二个数')
      add(num1, num2)

调用 函数调用的时候，叫实际参数-实参

       实参传递给形参,一一对应传递

函数return语句 

return 作用-返回一个值，并且可以让函数提前结束调用

语法 1 正确的写法是 return sum 不能换行写成

            return

            sum

举例：

求两个数的和

 function add(x, y) {
        const sum = x + y
        return sum  // 返回sum
 let result = add(1, 2) // add(1,2) 调用函数拿到返回值赋值给result
      console.log(result)

 一个函数没有return语句 默认返回undefined 

function f() {
        // 函数体 空函数体
      }

      console.log(f())

函数参数 

 function add(a, b) {
        console.log(a, b)
        return a + b
      }
      console.log(add(1, 2))
      console.log(add(1)) // NaN // 多余的形参默认undefined
      console.log(add(1, 2, 3)) // 多余的实参被忽略

 1 如果形参多余实参，多余的形参默认undefined

 2 如果实参多余形参，多余的实参被忽略

封装函数

举例：

封装一个对数组求和的函数

 function getSum(arr) {
        let sum = 0
        for (let i = 0; i < arr.length; i++) {
          sum += arr[i]
        }
        return sum
      }

      const arr = [1, 2, 3]
      const arr2 = [1, 2, 3, 4, 5, 6]
      const result = getSum(arr)
      const result2 = getSum(arr2)
      console.log(result1)
      console.log(result2) 

封装函数-判断某个元素在不在数组中 在的话返回true,不在返回false

/* function findEleInArray(ele, arr) {
        // 定义变量存结果
        let result = false
        // 循环数组 一一对比
        for (let i = 0; i < arr.length; i++) {
          if (arr[i] === ele) {
            result = true
            break
          }
        }
        // 返回结果
        return result
      } */

封装函数-查找某个元素在数组中的索引 有的话返回索引,不在返回-1

/*  function findEleInArray(ele, arr) {
        // 定义变量存结果
        let result = -1
        // 循环数组 一一对比
        for (let i = 0; i < arr.length; i++) {
          if (arr[i] === ele) {
            result = i
            break
          }
        }
        // 返回结果
        return result
      }

      const arr = ['zs', 'lisi', 'lily', 'tom', 'jack']
      console.log(findEleInArray('tom', arr))

封装函数-求一个数组最大值 

function getMax(arr) {
        let max = arr[0]
        for (let i = 1; i < arr.length; i++) {
          if (arr[i] > max) {
            max = arr[i]
          }
        }
        return max
      }

      const max = getMax([10, 3, 40, 5, 9])
      console.log(max)

函数表达式 

匿名函数-函数表达式

具名函数与函数表达式区别

1 普通函数可以先调用后声明

2 函数表达式必须先声明才调用

变量作用域

作用域-变量或函数的使用有效范围

分类: 全局作用域、局部作用域(函数作用域 、块级作用域)

全局作用域：script标签或js文件

// let i = 10

      // function f() {
      //   console.log(i)
      // }
      // console.log(i)
      // f()

      /* 局部作用域-函数作用域 
      function f() {
        let i = 100 // 局部变量 只能在所在的函数内使用
      }

      f()
      console.log(i) // 报错 */

      // 局部作用域-块级作用域
      // {
      //   let i = 100 //在 {} 定义的变量只能在 {}内部使用
      //   console.log(i)
      // }
      // console.log(i)

      // for (let i = 0; i < 5; i++) {}
      // console.log(i) // 报错
      // 函数形参-相当于函数内部定义的局部变量
      function add(a, b) {
        return a + b
      }
      add(1, 2)

变量使用原则

就近原则

/*let num = 10
      function f() {
        //let num = 20
        num++
        console.log(num) //20 就近原则
      }
      f()
      console.log(num) //  10
      */
      function f() {
        let a = 10
        function f2() {
          //let a = 30
          function f3() {
            //let a = 40
            console.log(a)
          }

          f3()
        }
        f2()
      }
      f()

IIFE-立即执行函数表达式

 IIFE -立即调用函数表达式

       第一种形式 (function() { ...})()

// (function () {
      //   console.log(111)
      // })()

 第二种形式 (function(){}())

       多个自执行函数用分号隔开

 /*  ;(function () {
        console.log(123)
      })()
      ;(function () {
        console.log(456)
      })() */

 自执行函数应用场景-防止变量全局污染

       封装库或框架使用，这样让变量不会与其他的变量 冲突

let num = 10
      ;(function (a) {
        console.log(a)
        let num = 20
      })(12)