本文主要讲解一些关于函数,数组的高级用法
一。首先看下函数的一些用法
1.) arguments
arguments在函数中返回的是所有实参的信息,
arguments.length是指实参的个数
arguments[0]是指第一个实参,以此类推
举例:
<script type="text/javascript">
function fun1(){
alert(arguments.length);
for(var i=0;i<arguments.length;i++){
alert(arguments[i]);
}
}
//调用方法
fun1('a','b','c');
//输出 3
//输出a b c;
</script>
2.)arguments.callee
arguments.callee在函数中指的是函数本身,就是说alert(arguments.callee)方法可以打印这个函数提的内容
而arguments.callee.length却是指函数的形参个数。
3.)caller
caller看表面意思应该就能够理解了,指的是调用者的意思,可能你还没有理解是什么意思,看了下面的列子就应该可以明白了
<script type="text/javascript">
function fun2(){
alert(fun2.caller);
}
</script>
<input type="button" value="测试" onclick="fun2('zhangsan')" />
当点击"测试"按钮时会打印
function anonymous(){
fun1('zhangsan');
}
anonymous意思是匿名的意思,因为当前没有函数调用fun2,所以属于匿名调用了
再看下面的例子
<script type="text/javascript">
function fun2(){
alert(fun2.caller);
}
fun3(){
fun2('zhangsan');
}
</script>
<input type="button" value="测试" onclick="fun3()" />
当点击"测试"按钮时会打印
fun3(){
fun2('zhangsan');
}
就是把fun3代码打印出来了,这些子应该理解了,就是指谁调用了我,没有人调用就是匿名了,不过如果直接在js中调用fun2();会打印null的
。
4.)call
call方法JScript参考中的说明:调用一个对象的一个方法,以另一个对象替换当前对象。call([thisObj[,arg1[, arg2[, [,.argN]]]]])
call方法真的很神奇的,不仅可以用call来调用一个方法,而且js的继承也可用call来实现,讲解起来比较难以理解,我们还是来看看几个列
子吧
<script type="text/javascript">
function fun3(str){
alert("the param is "+str);
}
function fun4(){
fun3.call(this,"aaa");
}
</script>
<input type="button" value="测试" onclick="fun4()" />
当点击"测试"按钮时会打印
the param is aaa
我们可以在别的方法中用call来调用另一个方法其实fun2.call(this,"aaa") 和 fun2("aaa")效果是差不多的
从这点列子我们还看不出太多的门道,继续放下看
<script type="text/javascript">
function fun3(str){
this.arg=str;
this.fun3_f1=function(){
alert(this.arg);
}
}
function fun4(){
fun3.call(this,"aaa");
this.fun3_f1();
}
</script>
<input type="button" value="测试" onclick="fun4()" />
当点击"测试"按钮时会打印
aaa
为什么呢,你看懂了吗
当我们在fun4中调用fun3.call(this,"aaa");后fun4就具有了fun3对象的所有权限,fun4就可以调用fun3中所有的方法和属性,
其实就是fun4已经继承了fun3,
这里的this可以换成其他的对象,如果换成其他对象的话,fun4就不再继承fun3了,而是被替换的对象继承,例如
<script type="text/javascript">
function fun3(str){
this.arg=str;
this.fun3_f1=function(){
alert(this.arg);
}
}
function fun4(){
var f5=new Function();
fun3.call(f5,"aaa");
alert(this.arg);
alert(f5.arg);
}
</script>
<input type="button" value="测试" onclick="fun4()" />
当点击"测试"按钮时会打印
undefined
aaa
其他的就不用再多说了吧
5.)apply
apply方法JScript参考中的说明:应用某一对象的一个方法,用另一个对象替换当前对象。apply([thisObj[,argArray]])
从构造函数看,其实它和call基本差不多的,只是它的参数是个数组而已,开一个简单的例子
<script type="text/javascript">
function fun3(str){
this.arg=str;
this.fun3_f1=function(){
alert(this.arg);
}
}
function fun4(){
var f5=new Function();
fun3.apply(f5,["aaa"]);
alert(this.arg);
alert(f5.arg);
}
</script>
<input type="button" value="测试" onclick="fun4()" />
打印结果和上面的例子一样,看出来区别了吗,呵呵,就是把"aaa",换成了数组["aaa"];其他的我不想再多说了,还是自己练习下吧。
二、我们看看一点点数组的用法吧,别看js数组功能可不少我,我在这里只是说其中的一部分,因为我也不都知道,呵呵
一般初学者用数组怎么用呢,一般都是这样用:
var arr=new Array();
arr[0]="aaa";
arr[1]="bbb";
或者高级点
for(var i=0;i<10;i++){
arr[i]=i*3;
}
等等;那数组到底有哪些好用的方法呢,我们就来看几个吧
1.)push方法 想数组中添加一个元素
var arr = new Array();
arr.push("aaa");
arr.push("bbb");
arr.push("ccc");
这样数组就有了三个元素了,简单吧,以后就不用arr[0]...赋值了 呵呵
2.)shift()方法,干什么的呢,它是用来删除并返回数组中的第一项(如果数组为空,则返回null);
var arr = new Array();
arr.push("aaa");
arr.push("bbb");
arr.push("ccc");
var a1=arr.shift();
alert(arr.length);
alert(a1);
打印
2
aaa
3.)sort()方法,不用说给数组排序了
不过这个方法需要一个“排序器”参数,什么是排序器呢compare,我来写个吧,其实和java的很像的
<script type="text/javascript">
var arr = new Array();
arr.push("aaa");
arr.push("ddd");
arr.push("bbb");
arr.push("ccc");
//自定义排序器
var compare=function (param1,param2){
if(param1>param2){
return 1;
}else if(param1<param2){
return -1;
}else{
return 0;
}
}
alert("排序前");
alertArr(arr);
arr.sort(compare);
alert("排序后");
alertArr(arr);
function alertArr(arr){
for(var i=0;i<arr.length;i++){
alert(arr[i]);
}
}
</script>
结果自己运行下了,排序好了,呵呵,自定义排序器你可以自己随便写,只要返回值为 1 0 -1 就OK了,和java差不多吧
4.)join(param)方法
这个方法很简单哦,就是把你所有数组中的变量用param分割开来,最常用的就是url后面的参数表达式了
var arr = new Array();
arr.push("aaa");
arr.push("ddd");
arr.push("bbb");
arr.push("ccc");
var str=arr.join("&");
alert(str);
结果
aaa&ddd&bbb&ccc
简单吧
5.)slice()方法
该slice方法返回数据的指定区段。该slice方法不会改变原始的数组,返回的是一个全新的数组拷贝,而不是原始数组引用,所以无论是改变
原始数组还是新数组,双方均不受影响。该slice方法通过由零开始计算的数组下标来确定切割的部分,创建一个由下标begin开始,到下标
end-1止的新数组(如果end未被指定,默认为最后一个元素)。如:
代码:
var trees = ["aaa", "bbb", "ccc", "ddd", "eee"];
alert(trees.slice(1,4));
输出:
bbb,ccc,ddd
该slice方法的参数问题。如果使用负数的end,则返回由下标begin到下标length-ABS(end)-1(注:ABS(end)表示绝对值的end)的新数组;同理
,使用负数的begin类同:下标为length-ABS(begin)。
三、实例说明
好了说的够多了了,手都写累了,最后结合上面说的,举一个实用的例子吧
大家都用过setTimeout吧,setTimeout在对调用函数传参数的时候比较麻烦,那我们就来从写setTimeout吧,然参数传递变得简单
(这个例子是引用别人的,现在看起来是不是很简单了,以后自己用什么不方便的话,就重写吧)
var st = window.setTimeout;
window.setTimeout = function(fun, params) {
if(typeof fun== 'function'){
var args = Array.prototype.slice.call(arguments,2);
var f = function(){
fun.apply(null, args);
};
return st(f, params);
}
return st(fun,params);
}
function test(str){
alert(str);
}
window.setTimeout(test,1000,'aaa');
这个例子原理就不解释了,只做一点点说明Array.prototype.slice.call其实就是调用数组的slice()方法,不过这里用
arguments.slice(2)不行,会有异常的(具体什么原因我还没搞清楚,可能arguments中是对象的原因)
你可以通过
var arr=new Array();
for(var i=0;i<arguments.length;i++){
arr.push(arguments[i]);
}
var args=all.slice(2);
这样可以的
好了就到这里吧,如果上面有什么不对的,希望回帖帮我指出,或者又补充的都可以....
相关推荐
本书是一本全面、深入介绍JavaScript语言的学习指南。本书共分四个部分,第1部分帮助读者快速入手,掌握基本的JavaScript编程要点;第2部分介绍JavaScript的发展和技术背景;第3部分深入探索JavaScript,介绍了语法...
javascript array list into setjavascript array list into setjavascript array list into setjavascript array list into setjavascript array list into setjavascript array list into setjavascript array ...
深入理解 JavaScript 异步
深入学习JavaScript中的函数 javascript 入门教材
HTML开发中的Javascript中Array 对象相关的几个方法学习总结
深入理解JavaScript系列(49):Function模式(上篇) 深入理解JavaScript系列(50):Function模式(下篇) 深入理解JavaScript系列(结局篇)">深入理解JavaScript系列(1):编写高质量JavaScript代码的基本...
主要介绍了Javascript实现Array和String互转换的方法,涉及JavaScript中toString方法与split方法的使用技巧,需要的朋友可以参考下
深入理解JavaScript深入理解JavaScript深入理解JavaScript
目前为止可以说是公认的最好的javascript教材,从入门到深入,十分经典。这本书网上可以说很少有中文版下载的。分两部分
里面有三个js文件,都是需要引入的。具体的方法,可以看源码。
本资源为《深入学习javascript开发与实例》收集归档完整版。
这一篇就可以学会JavaScript Array 数组对象方法
深入理解Javascript系列
目前为止可以说是公认的最好的javascript教材,从入门到深入,十分经典。这本书网上可以说很少有中文版下载的。分两部分
深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点 深入理解JavaScript系列(2):揭秘命名函数表达式 深入理解JavaScript系列(3):全面解析Module模式 深入理解JavaScript系列(4):立即调用...
如果你是一个JavaScript初学者,当你想更深入的了解和学习JavaScript时,建议你可以读读这片文章。【精华】
javascript object array方法使用详解.docx
自己设计的用JavaScript实现Array 和Map 里面有三个Js文件,都需要引入.