JavaScript入门（5）

Qwe7

发布于 2022-04-04 08:15:20

6210

五、JavaScript函数中的参数（arguments）

arguments

　argument是JavaScript中的一个关键字，用于指向调用者传入的所有参数。

function example(x){
    alert(x); //1
    alert(arguments.length); //3
    for(var i=0; i<arguments.length; i++){
        alert(arguments[i]);  //1,2,3   
    }      
}
example(1,2,3);

　即使不定义参数，也可以取到调用者的参数。

function abs() {
    if (arguments.length === 0) {
        return 0;
    }
    var x = arguments[0];
    return x >= 0 ? x : -x;
}
 
abs(); // 0
abs(10); // 10
abs(-9); // 9
 

REST

　由于JavaScript函数允许接收任意个参数，所以不得不用arguments来获取函数定义a以外的参数。

function exm(a) {
    var rest = [];
    if (arguments.length > 1) {
        for (var i = 1; i<arguments.length; i++) {
            rest.push(arguments[i]);
        }
    }
}

　其实ES6给了新的rest参数，用在函数最后，多余的参数以数组的形式交给变量rest，如果传入的参数未填满函数定义的参数，rest会是一个空数组。

function exm(a, b, ...rest) {
    console.log('a = ' + a);
    console.log('b = ' + b);
    console.log(rest);
}
 
exm(1, 2, 3, 4, 5);
// 结果:
// a = 1
// b = 2
// Array [ 3, 4, 5 ]
 
exm(1);
// 结果:
// a = 1
// b = undefined
// Array []
<script>
        function say() {
    
            console.log('Hello' + arguments[0] + arguments[1]);
    
            console.log(arguments.length);
    
        }
    
        say('World！', 'ByeBye！');
    </script>

六、练习题

（1）

题目：在页面中添加两个单行文本框，在两个文本框中输入两个数字，使用JavaScript函数比较这两个函数大小，并使用对话框输出最大数。

实现代码如下：

举例：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script type="text/javascript">

        function maxNum()

        {

            //获取两个文本框的值

            var x = document.getElementById("num1").value;

            var y = document.getElementById("num2").value;

            //强制转换为数值型

            x = parseFloat(x);

            y = parseFloat(y);

            if(x<y)

            {

                alert("最大数是："+y);

            }

            else

            {

                alert("最大数是："+x);

            }

        }

    </script>

</head>

<body>

    第一个数是：<input type="text" id="num1"/><br/>

    第二个数是：<input type="text" id="num2"/><br/>

    <input type="button" onclick="maxNum()" value="计算"/>

</body>

</html>

在浏览器预览效果如下：

我们随便输入两个数字如“50和100”，然后点击“计算”按钮即可输出最大数，效果如下：

分析：

这一个程序非常简单，但是包含的信息量不少。

document.getElementById()类似于CSS中的id选择器，而document.getElementById("num1").value表示选取id为num1的元素并获取它的值。这个方法经常用到，大家要记一下。我们在后续课程会给大家详细讲解。

这里用到了函数调用的其中一个方式“在事件中调用函数”。<input type="button" οnclick="maxNum()"/>表示在按钮点击的时候执行函数maxNum()。

此外，还有一点要注意的是：有些同学呀，在定义这个函数的时候定义的函数名是max，然后发现出错了！oh~，其实那是你忽略了很基础的一点，那就是自己定义的函数名是不能与JavaScript内部定义的函数名相同。

（2）

题目：写一个函数，输入一个4位数字，要求使用对话框输出这4个数字字符，但每两个数字之间留一个空格，如输入1992，应输出“1 9 9 2”。

代码实现如下：

举例：


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script type="text/javascript">

        function strNum()

        {

            //获取输入文本框中的值，这里获取的值是一个字符串

            var s = document.getElementById("num").value;

            var s1="";

            for(var i=0;i<4;i++)

            {

                //如果获取的不是最后一个字符

                if(i!=3)

                {

                    s1+=s.charAt(i)+ " ";

                }

                //如果获取的是最后一个字符

                else

                {

                    s1+=s.charAt(i);

                }

            }

            alert(s1);

        }

    </script>

</head>

<body>

    输入数字是：<input type="text" id="num"/><br/>

    <input type="button" onclick="strNum()" value="提交"/>

</body>

</html>

在浏览器预览效果如下：