JavaScript学习笔记 -- 带参数arguments的函数的用法

　　JavaScript函数有带参数与不带参数两种形式，不带参数情况如下：

function myFunction() {
    alert('HelloWorld!')
}

　　在这种类型的函数中，输出值是确定的，即明确清楚或可以直接看出输出结果。那么带参数的函数的情况呢，什么时候需要用到参数，为什么要用，好处在哪里？首先我们来看一个简单设置边框颜色的函数，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SetColor</title>
    <style>
        #div1{
            width:300px;
            height:300px;
            border:2px solid red;
    </style>
    <script>
        function toGreen(){     //设置绿色            var oDiv = document.getElementById('div1');
            oDiv.style.borderColor = 'Green';
        }
        function toBlue(){
            var oDiv = document.getElementById('div1');
            oDiv.style.borderColor = 'Blue';
        }
        function toYellow(){
            var oDiv = document.getElementById('div1');
            oDiv.style.borderColor = 'Yellow';
        }
    </script>
</head>
<body>
<input type="button" value="变绿" onclick="toGreen()">
<input type="button" value="变蓝" onclick="toBlue()">
<input type="button" value="变黄" onclick="toYellow()">
<br/>
<div id="div1"></div>
</body>
</html>

　　在这个例子中，虽然能够实现目的，但是代码太过繁琐且重复出现类似甚至相同代码，

那么可不可以想办法将代码优化呢？这个时候就到了发挥参数作用的时候了，因为这个例子中只需设置一个

相同的属性值，那么通过传参，能够大大减少冗余的代码，提高效率。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SetColor</title>
    <style>
        #div1{
            width:300px;
            height:300px;
            border:1px solid red;
        }
    </style>
    <script>
        function setColor(color){
            var oDiv = document.getElementById('div1');
            oDiv.style.borderColor = color;
        }
    </script>
</head>
<body>
<input type="button" value="变绿" onclick="setColor('Green')">
<input type="button" value="变蓝" onclick="setColor('Blue')">
<input type="button" value="变黄" onclick="setColor('Yellow')">
<br/><br/>
<div id="div1"></div>
</body>
</html>

　　在这个例子中，我们用了一个带参数的setColor(color)函数实现了将设置不同颜色的需求，无论有多少按钮，设置多少种颜色，这一个函数就可以解决。那么什么时候可以使用带参数的函数的呢？当要设定属性值不确定时，传参的方法可以让代码更简洁。

那么如果需要设置的属性值不止一个，甚至多个时呢？那就根据需要确定参数的个数，比如设置DIV的宽度，高度，背景颜色三个或多个属性时，可以采用function(name,value){}两个参数的形式，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>改变样式</title>
<style>
    #div1{
        width:300px;
        height:300px;
        background: red;
    }
</style>

</head>
<body>
<input type="button" value="变宽" onclick="changeStyle('width','400px')">
<input type="button" value="变高" onclick="changeStyle('height','400px')">
<input type="button" value="变绿" onclick="changeStyle('background','Green')">
<br/><br/>
<div id="div1"></div>
<script>
    function changeStyle(name,value){
        var oDiv = document.getElementById('div1');
        oDiv.style[name] = value;
    }

    function myFunction(){
        alert('HelloWorld!')
    }
</script>
</body>
</html>

需要注意的是：oDiv.style[name] = value; 这一行代码，为什么我们不写oDiv.style.name = value呢？因为计算机会认为这段代码中的name是oDiv的一个属性，而不同于参数中的name。oDiv.style[name] = value 这种方式可以避免这种情况，而这两种写法都符合属性的输出方式规范，基本上中括号的写法可以代替所有的点写法。

总结：带参数的函数用于输出值不确定的情况，好处是精简代码。（以后有更深的体会会补充。）

秒客网

JavaScript学习笔记 -- 带参数arguments的函数的用法

相关文章