JavaScript02

JavaScript函数介绍

函数是由事件驱动的，或者当它被调用时，执行的可重复使用的代码

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数快速入门</title>
    <script type="text/javascript">
        //定义一个简单的函数
        //如果不调用函数，该函数不会执行
        //在js中如果要执行函数，有两种方式：1.主动调用 2.通过一个事件去触发该函数
        function hi() {
            alert("hi~~~");
        }
        //hi();主动调用
    </script>
</head>
<body>
<!--
        这里表示给按钮button绑定了一个onclick事件，
        当用户点击了该button，就会触发hi()函数
-->
<button onclick="hi()">点击这里</button>
</body>
</html>

8.1JS函数的定义方式

方式一：function关键字来定义函数

基本语法：

function 函数名(形参列表){
    函数体
    return 表达式
}
//调用 函数名(实参列表);

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数使用方式1</title>
    <script type="text/javascript">
        //1.定义没有返回值的函数
        function f1() {
            alert("f1被调用")
        }
        f1();//f1被调用

        //2.定义有形参的函数
        //这里的形参不需要指定类型,name的数据类型是由实参决定的
        function f2(name) {
            alert("hi" + name);
        }
        f2("你好吗？");//hi你好吗？
        f2(800);//hi800

        //3.定义有形参和返回值的函数,不需要指定返回的类型，返回类型由返回的数据来决定
        function f3(n1, n2) {
            return n1 + n2;
        }
        alert("f3(\"hi\",200)="+f3("hi",200));//f3("hi",200)=hi200

    </script>
</head>
<body>

</body>
</html>

方式二：将函数赋给变量

基本语法：

var 函数名=fuction(形参列表){
    函数体
    return 表达式
}
//调用 函数名(实参列表);

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用函数的第二种方式</title>
    <script type="text/javascript">
        //可以理解成f1指向了函数
        var f1 = function () {
            alert("老师你好");
        }

        console.log(typeof f1);//f1的数据类型是 function
        f1();//调用函数-老师你好

        var f3 = f1;//将f1指向的函数赋给其他变量
        f3();//老师你好

        var f2 = function (name) {
            alert("hi" + name);
        }
        f2("小红帽");//hi小红帽

        var f4 = function (n1, n2) {
            return n1 + n2;
        }
        alert(f4(100, 50));//150
    </script>
</head>
<body>

</body>
</html>

8.2JS函数注意事项和细节

JS中函数的重载会覆盖掉上一次的定义
函数的arguments隐形参数(作用域在fuction函数内)，隐形参数是一个对象数组
- 隐形参数：在function函数中不需要定义，可以直接用来获取所有参数的变量
- 隐形参数特别像java的可变参数一样 public void fun(int …args)，操作类似数组
- 如果函数有形参，在传入实参的时候，仍然按照顺序匹配，如果实参个数大于形参个数，就将匹配上的数赋给形参，忽略没有匹配上的实参。但是仍然会把所有的实参都赋给arguments
- 如果形参个数大于实参个数，没有匹配的形参的值就是undefined

例子1：JS中函数的重载会覆盖掉上一次的定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数使用的注意事项</title>
    <script type="text/javascript">
        //1.1js中函数的重载会覆盖掉上一次的定义
        function f1() {
            alert("ok f1")
        }

        function f1(name) {
            alert("hi " + name);
        }

        //1.2当调用方法f1()的时候，实际上调用的是f1(name)方法
        //调用f1(name)时，如果没有传入实参，那么这个形参name就是undefined
        f1();//hi undefined
    </script>
</head>
<body>

</body>
</html>

例子2：隐形参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数使用的注意事项</title>
    <script type="text/javascript">
        function f2() {//隐形参数是一个对象数组
            //遍历函数的arguments隐形参数
            //arguments是一个数组
            //注意：如果希望通过console.log输出对象的数据，使用逗号,来连接，而不是加号+
            console.log("arguments=", arguments);//arguments=Arguments { 0: 10, 1: 20, 2: "50", 3: "nihao", … }
            console.log("arguments长度=", arguments.length);//arguments长度= 4
        }

        f2(10, 20, "50", "nihao");

        //如果函数有形参，在传入实参的时候，仍然按照顺序匹配
        //如果实参个数>形参个数，就就将匹配上的数赋给形参，忽略没有匹配上的实参
        //但是仍然会把所有的实参都赋给arguments
        function f3(n) {
            console.log("n=", n)//n= 100
            console.log("arguments=", arguments)//arguments=Arguments { 0: 100, 1: 300, 2: 788, … }
        }

        f3(100, 300, 788);

        //如果形参个数大于实参个数，没有匹配的形参的值就是undefined
        function f4(a, b, c, d) {
            console.log("d=", d);//d= undefined
        }

        f4(100, 200, 300);

    </script>
</head>
<body>

</body>
</html>

练习

要求：编写一个函数，用于计算所有参数相加的和并返回，如过实参不是number就过滤掉
提示使用typeof来判断参数类型

Title