04-js函数-CSDN博客

本文链接：https://blog.csdn.net/weixin_44431329/article/details/131447800

1、为什么要使用函数

函数可以把相同或者具有相似逻辑代码包裹起来，通过函数进行调用，这样做的优势是有利于精简代码方便复用

2、函数的使用

格式

 function 函数名（）{
  函数体          
  }

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function sayHi(){
            console.log('hello word');
        }
        sayHi()
    </script>
</body>
</html>

3、函数的命名规范

和变量名基本一致
尽量小驼峰命名法

案例

function sayHi(){
      console.log('hello word');
}

4、函数传参

函数传参可以提高函数的灵活性

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function add(num1,num2){
            return num1+num2
        }
    </script>
</body>
</html>

5、函数的返回值

把函数处理后的数据返回出去，供下次使用
格式：

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function add(num1,num2){
            return num1+num2
        }
    </script>
</body>
</html>

6、变量的作用域[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZlZQxFBU-1687972800603)(https://cdn.nlark.com/yuque/0/2023/png/28006873/1687972581457-31bf19e3-44ae-49b1-8647-17db73909de9.png#averageHue=%23ecd4d2&clientId=u0b12b1fd-2b91-4&from=paste&height=363&id=u93aeca8b&originHeight=544&originWidth=1053&originalType=binary&ratio=1.5&rotation=0&showTitle=false&size=99728&status=done&style=none&taskId=uc281f452-ec95-474a-b555-158aa91394b&title=&width=702)]

7、匿名函数

匿名函数就是没有方法方法名的函数

8、立即调用函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        (function(){
            console.log('张三');
        })()
    </script>
</body>
</html>