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. PHP定时执行任务的实现(转)

    ignore_user_abort();//关掉浏览器,PHP脚本也可以继续执行. set_time_limit(0);// 通过set_time_limit(0)可以让程序无限制的执行下去 $int ...

  2. 如何在 Visual Studio 2012 控制 TFS 版控時要忽略哪些檔案

    幾乎在任何一種版本控管的機制裡,都會遇到那些「不應該簽入到版本庫」的潛規則,以往我們在用 SVN 的時候,我就寫過幾篇文章要大家注意這點.最近都改用 TFS 做版控,因為大多使用 Visual Stu ...

  3. [原创]SSAS-引用维度与多数据源、多数据源视图引发分区错误

    背景:       最近有个项目,有32家分公司,集团总部需要取这个32家分公司数据做分析,由于每个分公司的数据都比较庞大,所以最终方案是每个分公司一个DW,在cube搭建过程中将每个公司数据作为一个 ...

  4. Golang学习 - reflect 包

    ------------------------------------------------------------ 在 reflect 包中,主要通过两个函数 TypeOf() 和 ValueO ...

  5. Linux上安装Mysql+Apache+Php

    一.安装Mysql 1.卸载默认的mysql yum -y remove mysql-libs-* Removed:  mysql-libs.x86_64 0:5.1.73-3.el6_5 卸载成功 ...

  6. Java最重要的21个技术点和知识点之JAVA面向对象

    (二)Java最重要的21个技术点和知识点之JAVA面向对象  写这篇文章的目的是想总结一下自己这么多年JAVA培训的一些心得体会,主要是和一些java基础知识点相关的,所以也希望能分享给刚刚入门的J ...

  7. 1.4.1.Documents,Fields和Schema概述

    Documents,Fields和Schema概述 solr的基本前提是非常简单,你可以给它很多信息,然后可以向它提出问题,获取你想要的问题的信息.所有信息输入的地方就叫做索引或者更新.当你提出问题时 ...

  8. MySQL(26):事务的隔离级别出现问题之 幻读

    1. 幻读 幻读(Phantom Read)又称为虚读,是指在一个事务内两次查询中数据条数不一致,幻读和不重复读有些类型,同样是在两次查询过程中,不同的是,幻读是由于其他事务做了插入记录的操作,导致记 ...

  9. 明风:分布式图计算的平台Spark GraphX 在淘宝的实践

    快刀初试:Spark GraphX在淘宝的实践 作者:明风 (本文由团队中梧苇和我一起撰写,并由团队中的林岳,岩岫,世仪等多人Review,发表于程序员的8月刊,由于篇幅原因,略作删减,本文为完整版) ...

  10. JQuery总结:选择器归纳、DOM遍历和事件处理、DOM完全操作和动画 (转)

    JQuery总结:选择器归纳.DOM遍历和事件处理.DOM完全操作和动画 转至元数据结尾 我们后台可能用到的页面一般都是用jquery取值赋值的,发现一片不错的文章 目录 JQuery总结一:选择器归 ...