【前端灵魂脚本语言JavaScript④】——JS中函数的使用

简介: JS中也可以定义一些函数,java中的方法签名包含访问修饰符,返回值类型,方法名,参数列表,异常列表,但是JS中定义函数的语法相对简单很多,主要以function作为函数关键字,具备函数名和参数列表,但是没有访问修饰符也没有返回值类型关键字和异常列表。

JavaScript函数的使用

在这里插入图片描述

一、什么是JS的函数

JavaScript函数类似于java中的方法。

JS中也可以定义一些函数,java中的方法签名包含访问修饰符,返回值类型,方法名,参数列表,异常列表,但是JS中定义函数的语法相对简单很多,主要以function作为函数关键字,具备函数名和参数列表,但是没有访问修饰符也没有返回值类型关键字和异常列表。

二、js函数的定义和调用

第一种语法格式 常见

function 函数名(参数列表){js代码}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            function fun1() {
                alert("hello JavaScript");
            }
            fun1()
        </script>
    </head>
    <body>
    </body>
</html>

在这里插入图片描述

第二种语法

var 函数名=function(参数列表){JS代码}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            var fun2=function(){
                alert("hello JavaScript")
            }
            fun2()
        </script>
    </head>
    <body>
    </body>
</html>

在这里插入图片描述

第三种语法 不常用 了解

var 函数名=new Function('js代码')
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            var fun3=new Function("alert('hello javascript')")
            fun3()
        </script>
    </head>
    <body>
    </body>
</html>

在这里插入图片描述

三、js函数的参数传递和返回值

1.参数传递

1.传入的实参可以和形参个数不一致

2.如果函数中有返回值,那么直接用return关键字返回即可

3.可以少传参数

4.多传的参数相当于没传

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            function fun(a,b,c){
                alert("a:"+a)
                alert("b:"+b)
                alert("c:"+c)
            }
            fun(10,20,30)
        </script>
    </head>
    <body>
    </body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.返回值

方法本身作为参数返回

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            function fun2 (a,b) {
                var c = a+b;
                return c;
            }
            var x = fun2(10,20)
            alert("c="+x)
        </script>
    </head>
    <body>
    </body>
</html>

在这里插入图片描述

相关文章
|
5月前
|
JavaScript 前端开发 API
|
3月前
|
机器学习/深度学习 JavaScript 前端开发
JS进阶教程:递归函数原理与篇例解析
通过对这些代码示例的学习,我们已经了解了递归的原理以及递归在JS中的应用方法。递归虽然有着理论升华,但弄清它的核心思想并不难。举个随手可见的例子,火影鸣人做的影分身,你看到的都是同一个鸣人,但他们的行为却能在全局产生影响,这不就是递归吗?雾里看花,透过其间你或许已经深入了递归的魅力之中。
149 19
|
4月前
|
资源调度 JavaScript 前端开发
Day.js极简轻易快速2kB的JavaScript库-替代Moment.js
dayjs是一个极简快速2kB的JavaScript库,可以为浏览器处理解析、验证、操作和显示日期和时间,它的设计目标是提供一个简单、快速且功能强大的日期处理工具,同时保持极小的体积(仅 2KB 左右)。
255 24
|
5月前
|
前端开发 JavaScript 数据可视化
58K star!这个让网页动起来的JS库,前端工程师直呼真香!
Anime.js 是一款轻量级但功能强大的JavaScript动画引擎,它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标,被广泛应用于电商页面、数据可视化、游戏开发等场景。
213 8
|
5月前
|
JavaScript 前端开发
|
5月前
|
存储 JavaScript 前端开发
|
5月前
|
JavaScript
JS实现多条件搜索函数
JS封装的多条件搜索
|
5月前
|
移动开发 JavaScript 前端开发
|
5月前
|
存储 JavaScript 前端开发