web前端：12_函数基础_fun接受值前端-CSDN博客

本文链接：https://blog.csdn.net/weixin_45906368/article/details/131707359

1，函数的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        // 函数定义
        function fun(){
            alert('册封为北京')
        }
        // 函数调用
        fun()
        console.log(fun)
    </script>
  
    
</body>
</html>

2,返回值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        // 无返回值
        function fun(){

        }
        let a = fun()
        console.log(a,typeof a)

        // 有返回值
        function fun2(){
            return 666
        }

        console.log(fun2())  //调用函数，并输出
        let b = fun2()
        console.log(b, typeof b)
        
    </script>
</body>
</html>

3，函数参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        // 无参数
       function fun1(){
        console.log("wqdu")
       }
        // 有参数
       function fun2(name){
        console.log(`在这个班级，我最喜欢${name}`)
       }
       fun2("wfgqy")
       fun2("wfcq")
        fun2("wfqve")       
        // 形参，实参数量一致
        function fun3(name,age){
            console.log(`我叫${name},我今年${age}了`)
        } 
        fun3("sc",25)
        fun3("sc")  //另外一个为Undefined

        // 默认参数 声明参数时候并赋值
        function fun4(name,age=18){
            console.log(`我我叫${name},我今年${age}了`)
        }
        fun4("swcff")
        fun4("ad",66)  //66覆盖18

    </script>
</body>
</html>

4，匿名函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        // 匿名函数 （  function(形参){函数体})(实参);   只执行一次
        // 1,写在所以函数最前面  2，所以函数最后面，前加！   !(function(形参){函数体})(实参);
        (function(name){
            alert(`你好，我是${name}`)
        })('张三');

    </script>
</body>
</html>

5,作用域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        if(1){
            var a = 1 //输出 var不严谨
            let b = 2  //未输出  对作用域要求更高 作用域为if语句块
        }
        console.log(a)
        console.log(b)

        // name为全局变量，函数内外都可以使用
        // let name = '不会'
        // function fun(){
        //     age = 18
        //     // let age = 18
        //     console.log(name,age)
        // }
        // fun()
        // console.log(age)

        // 就近原则
        let water = "feqwe"
        function fun2(){
            let water = "为所点veaa"
            alert(water)
        }
        fun2()


    </script>
</body>
</html>

作业：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>

// 1.定义一个函数,内容为输出一句('人生苦短,我选python + JavaScript')并调用该函数
    // function fun1(){
    //             document.write("人生苦短，我选python")
    //         }
    // fun1()

// 2.定义一个函数,该函数会接收2个数值数据.返回里面较大的值.并调用输出
function fun2(num1,num2){
    if(num1>num2){
        return num1
    }else if(num1<num2){
        return num2
    }else{
        return 0
    }     
}
 document.write(fun2(23,4))  

// 3.定义一个函数,该函数会接收1个数值数据作为参数,函数功能为输出参数次数遍的'多喝热水' --> 传100,就输出100遍
function fun3(num){
    for(let i=0;i<num;i++){
        console.log("都会")
    }
}
fun3(5)
// 4.定义一个函数,该函数会接收一个字符串数据为你的名字,有个默认参数值为'多喝热水'. 函数功能为输出一句 '<你的名字>要<多喝热水>' .并调用输出
function fun4(name,action="多喝热水"){
    console.log(`${name}要${action}`)
}
fun4("zxr")
// 5.把题目4的函数升级为自执行函数(匿名函数)
!(function fun5(name,action="多喝热水"){
    console.log(`${name}要${action}`)
})("zxr")
       
    </script>
</body>
</html>