js基础之函数

最新推荐文章于 2024-01-18 11:04:48 发布

诗霖雪

最新推荐文章于 2024-01-18 11:04:48 发布

阅读量502

点赞数 7

分类专栏： js笔记文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_56713342/article/details/134219019

版权

js笔记专栏收录该内容

28 篇文章 0 订阅

订阅专栏

4、封装⼀个函数,可以求任意数组的和或平均值

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

一、函数定义

函数是具有某种功能的代码块，为了复用。

定义

function 函数名() {

// 具体功能的代码实现

}

二、函数声明的方法

1、命名函数（自定义函数）

语法： function 函数名（）{

// 函数体

}

2、匿名函数

var 变量名 = function（）{

//函数体

}

函数名最好使用动词、有意义的，如果多个单词组成需要驼峰命名 myName

function是声名函数的关键字需要小写

函数自身不会执行，需要调用后才会执行函数内的代码

函数分为两步：1、声明函数 2、调用函数

三、函数return语句

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

语法 1 return sum 不能写成

return

sum

return下面的代码不执行

return后面加上值，可以把值返回出来，如果值用逗号隔开的，值能返回最后一个值，如果值是数组就返回数组；如果值是x+y这种，

返回值是x+y的结果

结束当前循环，可以返回值，可以结束函数体内的代码

函数return值后，调用函数时，就已经拿到了return的这个值


      // 一个函数没有return语句 默认返回undefined
      function f() {
        // 函数体 空函数体
      }

      console.log(f())

求两个数的和

// 求两个数的和
      // 函数声明的时候x,y叫形式参数-形参
      function add(x, y) {
        const sum = x + y
        return sum // 返回sum
        // console.log('hello')
      }
      // 调用 函数调用的时候，叫实际参数-实参
      // 实参传递给形参,一一对应传递
      let result = add(1, 2) // add(1,2) 调用函数拿到返回值赋值给result
      console.log(result)
      //add(3, 4)

四、函数的参数

函数形参和实参

形参：虚拟，是声明函数时写在函数名后的小括号内，参数之间使用逗号隔开，形参时使用变量名接收

实参：真实，是调用函数时写在小括号内的参数，参数之间使用逗号隔开

形参和实参是一一对应的关系，如果形参没有实参对应，形参拿到的就是undefined

     // 求两个数的和
      // 函数声明的时候x,y叫形式参数-形参
      function add(x, y) {
        console.log(x + y)
      }
      // 调用 函数调用的时候，叫实际参数-实参
      // 实参传递给形参,一一对应传递
      //add(1, 2)
      //add(3, 4)

函数参数对应关系

函数的参数是一一对应的

多余的形参默认undefined

多余的实参被忽略

   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)) // 多余的实参被忽略

五、函数表达式

匿名函数-函数表达式

 let fn = function () {
        console.log('hello world')
      }

      fn()
      fn()

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

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

js代码在执行的时候，分为预解析(把var定义变量或函数声明拿到代码最前面)和代码执行

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

预解析

1、遇到var 和function 先预解析

2、代码执行

var ：js解析器遇到var时，会先变量提升，提升到当前作用域的最上方，变量赋值的位置保持不变，然后再进行代码执行

函数预解析： js解析器遇到function会把整个函数提升到当前作用域的最上面，其他代码还是原来的位置

函数调用要看清是否调用以及调用的顺序时否正确

预解析不会把const或let定义的变量进行提升

 fn2()
 const fn2 = function () {} //  必须有函数才能调用

六、变量的作用域

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

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

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

局部作用域-函数作用域

全局作用域：在整个script脚本里就是全局作用域

局部作用域：在函数内就是局部作用域

全局变量：在script脚本内的变量都是全局变量，全局变量只有浏览器关闭时才会销毁释放内存

在全局作用域内定义相同的变量会被覆盖

局部变量：函数内的变量也叫局部变量，函数使用结束后就会立即销毁释放内存

局部作用域声明的变量和全局变量互不干扰，在全局作用域内是不能访问局部变量的

在局部作用域内是可以访问全局变量的

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

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

局部作用域-块级作用域

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

变量的使用原则：就近原则

let num = 10
      function f() {
        //let num = 20
        num++
        console.log(num) //20 就近原则
      }
      f()
      console.log(num) //  10

特殊情况：在局部作用域下不使用var声明的变量是全局变量（不推荐）

函数的形参也是局部变量

作用域链：一级一级朝上查找变量，自己作用域没有就会朝外面的作用域查找

函数嵌套函数时，每一个函数都是独立的作用，里层函数可以访问外层函数的变量

外层函数不能访问里层函数的变量

变量之间也是互不影响

变量查找时遵循就近原则（只对里层函数朝外层查找）

七、立即执行函数

IIFE -立即调用函数表达式

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

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

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

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

 // 多个自执行函数用分号隔开
      ;(function () {
        console.log(123)
      })()
      ;(function () {
        console.log(456)
      })()

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

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

八、函数练习

1、封装余额函数

运⾏程序后, 浏览器显示输⼊确认框(prompt)
第⼀个输⼊确认框提示输⼊银⾏卡余额
第⼆个输⼊确认框提示输⼊当⽉⻝宿消费⾦额
第三个输⼊确认框提示输⼊当⽉⽣活消费⾦额
输⼊完毕后,在⻚⾯中显示银⾏卡剩余⾦额
提示: 所有功能代码封装在函数内部（函数需要把余额返回）

<script>
    function money(){
        let card=+prompt('请输入银行卡余额')
        let sixu=+prompt('请输入当⽉⻝宿消费⾦额')
        let live=+prompt('请综合案例变形题输入当月生活消费金额')
        // let total=card-sixu-live
        return card-sixu-live
    }
    document.write('银行卡剩余金额为'+money())
    // console.log(money())
</script>

2、求和封装函数

封装函数, 名字为s 功能: 根据传⼊的两个数,求和并且返回求和的结果（函数必须有return返回值）

<script>
    function sum(a,b){
        return a+b

    }
    console.log(sum(1,2))
</script>

3、实现两个值的交换

函数名为 changeNum()
调⽤函数时, changeNum(1，2)
经过函数内部处理后,输出第⼀个值的结果是2 第⼆个值的结果是1
可以多调⽤两次

 function changeNum(a,b){
        let temp=a
        a=b
        b=temp
        return `${a},${b}`
        
    }
    console.log(changeNum(1,2))  //2,1
    console.log(changeNum(3,2)) //2,3

4、封装⼀个函数,可以求任意数组的和或平均值

函数可以传递2个参数，⽐如 handleData(arr, true) handleData 处理数据的意思

参数⼀：接受实参传递过来的数组

参数⼆: 布尔类型如果是true或者不传递参数是求和操作，如果传递过来的参数是 false

则是求平均值

 function handleData(arr,flag=true) {

        //  flag = true
            let sum = 0
            for (let i = 0; i < arr.length; i++) {
                sum += arr[i]

            }
            if(flag){
                return sum
            }else{
                return sum/arr.length
            }

        }
        const arr = [1, 2, 3, 4, 5]
        console.log(handleData(arr,true))//15
        console.log(handleData(arr))//15
        console.log(handleData(arr,false))//3

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

   function findEleInArr(ele,arr){

            let result=false  //定义变量存储结果
            for(let i=0;i<arr.length;i++){
                if(arr[i]===ele){
                    result=true
                    break

                }
            }
             return result  

        }
        const arr=[1,33,57,8,9,99]
        console.log(findEleInArr(89,arr))  //false
        console.log(findEleInArr(9,arr)) //true