JS中使用变量保存arguments对象的方法

 更新时间:2016年06月03日 11:56:52   转载 作者:脚后跟着猫  
这篇文章主要介绍了JS中使用变量保存arguments对象的方法的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下

迭代器(iterator)是一个可以顺序存取数据集合的对象。其一个典型的API是next方法。该方法获得序列中的下一个值。

迭代器示例

题目:希望编写一个便利的函数,它可以接收任意数量的参数,并为这些值建立一个迭代器。

测试代码好下:

var it=values(,,,,,,,,);
it.next();//
it.next();//
it.next();// 

分析:由于values函数需要接收任意多个参数,这里就需要用到上一节讲到的构建可变参数的函数的方法。然后里面的迭代器对象来遍历arguments对象的元素。

初步编码

function values(){
var i=,n=arguments.length;
return {
hasNext:function(){
return i<n;
},
next:function(){
if(this.hasNext()){
return arguments[i++];
}
throw new Error("已经到达最后啦");
}
}
}

用上面的测试代码进行测试

var it=values(,,,,,,,,);
it.next();//undefined
it.next();//undefined
it.next();//undefined 

错误分析

代码运行结果并不正确,下面就对初始的编码程序进行分析。

function values(){
var i=,n=arguments.length;//这里没有错误,arguments是values里的内置对象
return {
hasNext:function(){
return i<n;
},
next:function(){
if(this.hasNext()){
return arguments[i++];//错误出现在这里,arguments是next方法函数的内置对象。
}
throw new Error("已经到达最后啦");
}
}
} 

这里的指代错误,很像是另一个让人头痛的对象this。处理this的指向时,通常是使用变量和保存正确的this。然后在其它地方使用这个变量。那么arguments对象的解决方案就出来了,借助一个变量来存储,这样arguments对象的指代就没有问题了。

再次编码

function values(){
var i=,n=arguments.length,arg=arguments;
return {
hasNext:function(){
return i<n;
},
next:function(){
if(this.hasNext()){
return arg[i++];
}
throw new Error("已经到达最后啦");
}
}
} 

运行测试代码

var it=values(,,,,,,,,);
it.next();//
it.next();//
it.next();// 

结果和预期的相同。

提示

当引用arguments时当心函数嵌套层级

绑定一个明确作用域的引用到arguments变量,从而可以在嵌套的函数中引用它

附录一:迭代器

迭代器(iterator)有时又称游标(cursor)是程序设计的软件设计模式,可在容器上遍历的接口,设计人员无需关心容器的内容。

迭代器UML类图


迭代器js实现

对设计模式了解一点点,但具体项目中,有得多的也就是工厂模式,其它很少用,下面是一个简单的实现,不对的地方,欢迎交流。

代码如下

function List(){
this.data=[];
}
List.prototype={
add:function(){
var args=[].slice.call(arguments)
this.data=this.data.concat(args); 
},
remove:function(i){
this.data.splice(i,);
},
iterator:function(){
return new Iterator(this);
}
}
function Iterator(list){
this.list=list;
this.cur=;
};
Iterator.prototype={
hasNext:function(){
return this.cur<this.list.data.length-;
},
next:function(){
if(this.hasNext()){
return this.list.data[this.cur++];
}
throw new Error('已经到底了~');
},
remove:function(){
this.list.remove(this.cur);
}
}
var list=new List();
var it=list.iterator();
list.add(,,,,,,,,);
it.next();//
it.next();//
it.next();// 

以上所述是小编给大家介绍的JS中使用变量保存arguments对象的方法,希望对大家有所帮助!

相关文章

  • 原生js实现弹出层登录拖拽功能

    原生js实现弹出层登录拖拽功能

    这篇文章主要为大家详细介绍了使用原生JavaScript实现弹出层登录拖拽功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • JavaScript实现多维数组的方法

    JavaScript实现多维数组的方法

    这篇文章主要介绍了JavaScript实现多维数组的方法,有需要的朋友可以参考一下
    2013-11-11
  • js图片跟随鼠标移动代码

    js图片跟随鼠标移动代码

    大家浏览网页的时候,见到过图片跟随鼠标移动的js特效,效果非常好,是怎么实现的呢,实现这个功能很简单,感兴趣的朋友一起看看吧
    2015-11-11
  • 通过函数作用域和块级作用域看javascript的作用域链

    通过函数作用域和块级作用域看javascript的作用域链

    这篇文章给大家分享了通过函数作用域和块级作用域看javascript的作用域链的相关知识点内容,有兴趣的朋友参考学习下。
    2018-08-08
  • JS实现留言板功能

    JS实现留言板功能

    这篇文章主要为大家详细介绍了JS实现留言板功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • JavaScript实现的多种鼠标拖放效果

    JavaScript实现的多种鼠标拖放效果

    这篇文章主要介绍了JavaScript实现的多种鼠标拖放效果,涉及JavaScript响应鼠标事件动态变换页面元素属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • 微信小程序封装分享与分销功能过程解析

    微信小程序封装分享与分销功能过程解析

    这篇文章主要介绍了微信小程序封装分享与分销功能过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • javascript replace()方法的简单分析

    javascript replace()方法的简单分析

    javascript中replace()在javascript中,String的函数replace()简直太让人喜爱了。它灵活而强大的字符替换处理能力,让我不禁想向大家介绍它。
    2008-11-11
  • JavaScript实现兼容IE6的收起折叠与展开效果实例

    JavaScript实现兼容IE6的收起折叠与展开效果实例

    这篇文章主要介绍了JavaScript实现兼容IE6的收起折叠与展开效果,结合具体实例形式分析了javascript事件响应及针对页面元素属性的动态操作相关实现技巧,需要的朋友可以参考下
    2017-09-09
  • JS+CSS实现电子商务网站导航模板效果代码

    JS+CSS实现电子商务网站导航模板效果代码

    这篇文章主要介绍了JS+CSS实现电子商务网站导航模板效果代码,涉及JavaScript结合css动态操作页面元素属性的相关技巧,非常具有实用价值,需要的朋友可以参考下
    2015-09-09

最新评论