JS基础——函数的创建和使用
在JS中函数在使用时实质上和我们平时学习的编程语言中的函数类似,它相同也具有函数名,參数,返回值,函数体等这些寻常函数所具有的内容。可是作为一种脚本语言,它确实也有自己不一样的地方。
一、创建
<span style="font-size:18px;">function box(){ //利用functionkeyword进行声明+函数名+(可加入參数)+{详细运行内容,可包含返回值}
return 'hello!';
}</span>
在这里,我们须要知道的是,box后面的()具有运行该函数的功能,同一时候可用来进行传參。
假设我们在JS中直接调用alert(box),那么结果会显演示样例如以下图:由于没有加(),所以它没有运行。仅仅有在加了()后,才会正常显示'hello!' (这里匿名函数中会用到)
二、函数传參
JS函数中用到一个arguments对象,能够实现动态传參,使得函数在传參时,并不介意有多少參数!
1、arguments对象简单使用
function box(){ //这里并没有传递參数
return arguments[0]+arguments[1]+arguments[2]; //这里代表第几个參数
}
alert(box('大家','国庆节','快乐!'));
能够看出来,arguments对象相当于一个对象数组,它将函数中传进来的參数放在了一个数组中,按顺序进行调用。
假设调用它的长度,会发现:长度为3,即參数的个数。
function box(){
return arguments.length;
}
可是出现了一个问题,这里并没有实现动态传參啊,仅仅是參数一一相应而已,没错,事实上,arguments对象仅仅能识别它自己事先定义好的个数的參数,假设外界传进来的參数不足,那么自己主动以undefined取代,假设传进来參数超出本身所定义的个数,那么,他会将多余的自己主动抹去,不会显示!
那么怎样才干实现动态传參呢?让上面的函数能够传进而且识别全部我想传进的參数,比方在实现加法时,并不知道用户相加的数字的个数有多少的时候,该怎么解决呢?这里用到了一个简单循环来实现。
2、利用arguments对象实现动态传參:
function box() { var sum = 0;
if (arguments.length == 0) return sum;
for(var i=0;i<arguments.length;i++)
{
sum += arguments[i];
}
return sum;
}
这样,我们假设调用函数alert(box(3,4,5,6,7,8,9)),不管加多少都能够得到想要的答案了。在这里须要注意的是,假设存在string格式的那么数字也会被当成字符串来处理,这时候‘+’会被当成&连字符来处理。
三、匿名函数
JS中函数还支持无名英雄,在声明函数时,没有函数名称的函数称为匿名函数(跟匿名信一个道理)。
function (){
return 'hello!';
}
但是没有函数名的函数怎样来调用呢?
匿名函数的运行方法:
1、通过赋给变量进行调用
var box=function(){
return 'lee';
} alert(box());
2、自我运行
在创建时,提到了()代表运行,在匿名函数中也是一样。
(function(){
alert( 'lee');
})()
<span style="font-size:18px;">//语法:(匿名函数)()第一个圆括号放匿名函数,第二个圆括号运行</span>
这里的()使得页面在载入时,就能够直接运行JS中的匿名函数。不再须要赋值。
3、匿名函数进行传參
这里也是用到了()这个小知识,第二个()代表运行,同一时候他还能够进行传參,所以,我们还能够为匿名函数进行传參。
比如:
(function(age){
alert(age);
}(100))
事实上,这里跟我们平时的函数原理是一样的。能够把前面整个匿名函数当成一个函数名,后面小括号进行传參和运行。这里的100能够用其它的表达式来取代,如页面中获取了某些表达式的值等。
以上是关于JS学习中函数的一些基础知识,须要把握住原有知识和如今所学内容之间的同样点和不同点,认真总结和重复理解,才干终于得以应用。关于匿名函数的使用还有非常多的应用,将在兴许继续总结!
JS基础——函数的创建和使用的更多相关文章
- JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象
前 言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...
- 前端小课堂 js:函数的创建方式及区别
js 函数的创建大体有这几种方式: -1-函数表达式(函数字面量): 说白了就是把一个函数赋值给了一个变量. var fun1 = function(index){ alert(index); } f ...
- js中函数对象创建的总结
在JavaScript的函数对象创建方法中,可以分为三种情况: 1:第一种是使用function语句定义函数 <script type="text/javascript"&g ...
- JavaScript基础一(js基础函数与运算符)
[使用js的三种方式] 1.在HTML标签中,直接内嵌js(并不提倡使用) <button onclick=" alert('点就点')"> 点我啊</butto ...
- js基础 -函数
函数 定义 var a =function (){...}; 匿名函数方式定义function a(){} 直接定义 函数的参数arguments 可以接收任意个参数,是个像数组的内容,可for in ...
- js基础-函数基础
js 先对函数进行解析 然后在执行函数 定义一个函数 实现求两个数的乘 function mult(a,b){ return a*b; } mult(1,3) 计算1 - n 的和 封装成函数 fun ...
- js基础-函数-var和let的区别
javaScript简介 javaScript历史 1995年,Netscape公司是凭借Navigator浏览器成为当时第一代互联网公司. 网景公司希望在HTML界面上加一点动态效果,于是叫Bren ...
- js基础例子动态创建table实例
<style> table{ width:500px; font-weight: bold; border: 1px solid #000; border-collapse:collaps ...
- JS基础函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块 <script> function demo(){ var a = 10; var b = 25; var sum = a + ...
随机推荐
- Trie图和Fail树
Trie图和AC自动机的区别 Trie图是AC自动机的确定化形式,即把每个结点不存在字符的next指针都补全了.这样做的好处是使得构造fail指针时不需要next指针为空而需要不断回溯. 比如构造ne ...
- Sesson禁止使用Cookie
于WebRoot文件夹MEAT-INF新建文件夹context.xml 增加<context path="XXX" cookies='false"> 更改To ...
- ecshop 后台批量上传商品 完整上传
ecshop 后台批量上传商品,之所以无法上传,是因为后台上传php文件方法中没有导入商品原图路径 将ecshop根目录中的admin/goods_batch.php文件全部修改为 <?php ...
- JAVA insert() 插入字符串 reverse() 颠倒 delete()和deleteCharAt() 删除字符 replace() 替换 substring() 截取子串
insert() 插入字符串 StringBuffer insert(int index,String str) StringBuffer insert(int index,char ch) Stri ...
- MySQL 改动用户password及重置rootpassword
为数据库用户改动password是DBA比較常见的工作之中的一个.对于MySQL用户账户的password改动,有几种不同的方式.推荐的方式使用加密函数来改动password. 本文主要描写叙述了通过 ...
- Android---53---多线程下载
采用HttpURLConnection HttpURLConnection从继承URLConnection,它也可以被用来发送到指定的网站GET求 POST求. 办法: int getResponse ...
- jquery实现仿select列表的即时搜索及拼音搜索
这里提到select,其实不是select,而是用<li><input>标签去仿造一个select,以实现对已有“option”的快速检索功能. 以<input>标 ...
- BZOJ 1269 文本编辑器 Splay
题目大意:维护一个文本编辑器,支持下列操作: 1.将光标移动到某一位置 2.在光标后插入一段字符串 3.删除光标后的一段字符 4.翻转光标后的一段字符 5.输出光标后的一个字符 6.光标-- 7.光标 ...
- hibernate学习——Set集合配置
Set集合的配置 数据表的创建:表关系一个员工拥有多个身份 create table EMPLOYEE ( id INT NOT NULL auto_increment, first_name VAR ...
- 第五章_JSTL
5.1.下载JSTL http://jstl.java.net 5.2.JSTL类库 类别 下属功能 URI 前缀 Core 变量支持 http://java.sun.com/jsp/jstl/cor ...