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的函数的用法的更多相关文章

  1. C语言学习011:带参数的main函数

    直接上代码 #include <stdio.h> int main(int argc,char *argv[]){ printf("%i \n",argc); int ...

  2. <深入理解JavaScript>学习笔记(2)_揭秘命名函数表达式

    写在前面的话 注:本文是拜读了 深入理解JavaScript 之后深有感悟,故做次笔记方便之后查看. 感觉这章的内容有点深奥....略难懂啊. 先坐下笔记,加深一下印象吧. 我主要记一下自己感觉有用的 ...

  3. JavaScript学习笔记（七）—— 再说函数

    第八章 函数 1 函数声明和函数表达式 差别一:函数声明:函数在执行代码前被创建:函数表达式是在运行阶段执行代码时创建: 差别二:函数声明创建一个与函数同名的变量,并让她指向函数:使用函数表达式,不给 ...

  4. Javascript学习笔记：3种定义函数的方式

    ①使用函数声明语法定义函数 function sum(num1,num2){ return num1+num2; } ②使用函数表达式定义函数 var sum=function(num1,num2){ ...

  5. JavaScript学习笔记（散）——addLoadEvent函数

    先贴源码 function addLoadEvent(func) { var oldonload = window.onload; //存入当前onload事件 if(typeof window.on ...

  6. JavaScript:学习笔记(5)——箭头函数=>以及实践

    JavaScript:学习笔记(5)——箭头函数=>以及实践 ES6标准新增了一种新的函数:Arrow Function(箭头函数).本文参考的链接如下: MDN箭头函数:https://dev ...

  7. JavaScript学习笔记[0]

    JavaScript学习笔记[0] 使用的是廖雪峰JavaScript教程. 数据类型 Number 表示数字,不区分浮点整形. === 比较时不转化数据类型. == 反之. NaN与任何值都不想等, ...

  8. JavaScript:学习笔记(2)——基本概念与数据类型

    JavaScript:学习笔记(2)——基本概念与数据类型 语法 1．区分大小写．Test 和 test 是完全不同的两个变量. 2．语句最好以分号结束,也就是说不以分号结束也可以． 变量 1.JS的 ...

  9. Java程序猿的JavaScript学习笔记（3——this/call/apply）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

随机推荐

  1. 凸包---HDU 2202

    题意:给N个点,求着N个点中选择三个联的最大的三角形面积! 注意精度:不然OJ上面会超时的 #include<iostream> #include<cmath> #includ ...

  2. Linux VM子系统参数调整

    Timesten数据库下的Linux page子系统参数调整  如果Timesten(TT)采用了Durablecommits或是share memory segment被lock的话,那么linux ...

  3. errno多线程安全（转载）

    一.errno的由来     在C编程中,errno是个不可缺少的变量,特别是在网络编程中.如果你没有用过errno,那只能说明你的程序不够健壮.当然,如果你是WIN32平台的GetLastError ...

  4. 进程产生的三种方式：fork、system和exec

    1.fork()方式 fork()函数以父进程为蓝本复制一个进程,其ID号与父进程ID号不同.在Linux环境下,fork()是以写复制实现的,只有内存等与父进程不同,其他与父进程共享,只有在父进程或 ...

  5. CentOS6.3配置yum源

    转载:http://www.linuxidc.com/Linux/2012-10/72750.htm 全新以最小化包安装了64位的CentOS6.3系统,作为本地的Web服务器使用,现记录全过程第二步 ...

  6. 从 SDWebImage 谈如何为开源软件做贡献

    来源:伯乐在线 - 酷酷的哀殿 链接:http://ios.jobbole.com/89483/ 点击 → 申请加入伯乐在线专栏作者 从 SDWebImage 谈如何为开源软件做贡献 相识 – 知我者 ...

  7. CentOS6.5 64bit 运行Mono程序

    前几日和一技术友聊天,认为转Java好,java可以在Linux下运行,貌似c#不可以哦,就做了个尝试,运行控制台程序和窗口程序(界面编程,Linux下Java好像也比较烦吧) 现在贴环境: 参考:C ...

  8. [经典算法] 排列组合-N元素集合的所有子集(一)

    题目说明: 给定一组数字或符号,产生所有可能的集合(包括空集合),例如给定1 2 3,则可能的集合为:{}.{1}.{1,2}.{1,2,3}.{1,3}.{2}.{2,3}.{3}. 题目解析: 如 ...

  9. IOS设计模式六大法则

    设计模式的六大原则 单一职责原则 定义:不要存在多于一个导致类变更的原因.通俗的说,即一个类只负责一项职责 问题由来:类T负责两个不同的职责:职责P1,职责P2.当由于职责P1需求发生改变而需要修改类 ...

  10. android studio1.3安装终于成功

    本人机器是win7 32位旗舰版,4G内存.以前使用eclipse adt bundle开发Android程序感觉非常方便,但随着google对andriod studio支持力度加大,转向studi ...