js 数组实现一个类似ruby的迭代器

分为如下几节:

·基本实现

·在迭代中引用原来的对象，或者直接改变数组的值而不是返回一个新数组

·向迭代传入无限多的参数

·基本实现
今天突然发现js的数组处理起来真是麻烦,代码一些就是一大堆,相比起ruby的迭代器来真是逊色不少,主要是要写的代码太多了,也许是js有特殊的处理数组的方式,真是我不知道而已,但是我真的想自己给js实现一个类似ruby的迭代器的东东,而且实现起来也不难,那就开始动手吧.

真的应该庆幸js是动态语言啊,如果是静态语言,实现起来很不方便(别说要我重新定义一个继承自array的类),不过用js实现起来就简单多了,直接给Array对象加一个方法即可,如下:

额呵呵,迭代器其实已经实现了......好简单啊,是啊,不过这样的确方便了不少哦,看下面的用法就知道了:

首先我们定义一个数组:

1:用法一:

迭代使用每个数组元素:

声明:这里可以缩写成:aa.each(function(val){alert(val)});,以下的也同理,为了清晰,分开写的

执行结果是依次弹出每个数组元素的值,哦呵,就是这么简单,不用写可恶的for,如果代码很多的时候,这点节省也会省出不少的代码量哦

2:用法二:

迭代处理每个数组元素并返回一个处理后哦数组:

结果如何?如你所想,首先弹出的是"1,2,3,4",之后弹出的是"2,4,6,8",每个元素都被处理了,并且作为新数组返回,额呵呵,很简单的功能,如果你觉得没什么用的话,那好吧,还是去写for循环吧,如果你喜欢这种写法,那好吧,还有很多可以改进的地方,也留给大家去探索,反正这样目前对我来说已经足够用来节省很多代码了.

3:更多:

还可以给数组增加更多有用的方法,例如:随机打乱顺序(棋牌游戏?)等,不过真希望js可以在方法名中包含更多的标点符号,那样就可以定义 each?或者each!这种警示性方法了,可惜可惜

·在迭代中引用原来的对象，或者直接改变数组的值而不是返回一个新数组

我这里有一个可以说是改进版的迭代器,因为我突然要在func函数里引用原来的迭代对象,于是做了如下修改

变化并不大,也兼容前面所讲的所有功能,而且增加了对数组对象的引用

我们可以在func函数里引用原来的数组对象,和当前元素的索引位置,这样可以增加很多功能哦,首先可以直接修改原来数组的值,！！！不过如果你在func函数里删除了某个数组元素,可能会出现不可预料的错误哦！！！,下面来做个试验,看看会出现什么结果:

哦,我们在func函数里删除了值为2的元素,结果呢,依次弹出1,3,4,undefined,也就是迭代函数无法知道你的数组长度改变了,多循环了一次,如何解决这个问题呢?

初步想法是,判断一下元素是否为空,如果为空,就不做任何操作,&&操作符的前面如果为假,就不会执行后面的语句.今天发现这种方法有所欠考虑,因为我漏处理了一个元素,仔细想想就知道了,所以需要在处理函数里加一个offset变量,指引当前的偏移量,每次删除元素就将offset变量减一,索引以index+offset为准,这样可以解决删除元素的问题,但是不能解决增加元素的问题,所以这个迭代器里不能动态增加数组元素,否则会出现错误,注意注意

先到此为止吧.

·向迭代传入无限多的参数

又回来了,这次我们要让这个迭代可以传递更多的有用的自定义参数,而不是系统自定的,当然,前面的所有操作都是被兼容的,所有的修改都不会破坏前面的操作的兼容性.

我们将主方法修改如下:

OK,加了个参数,只是一个参数,没有什么大惊小怪,但是它已经可以完成所有的参数传递了,看例子:

还是刚才的例子,我们要删除数组中的一个元素,我们通过传递进来的参数来确定删除哪个值,我们用一个对象作为参数传进来,这个对象是个json对象,欧耶,json可以承载任意多的参数,想传多少就传多少,不是很简单么,好像我们已经实现了很多功能了.但是还没有完,更多的需要自己去探索.

只用拓展ie的forEach就行了，ff下已经支持了，而且你这种写法貌似效率很低

赞 (0)

相关推荐

  • JS的数组迭代方法

    本文实例讲述了JS的数组迭代方法.分享给大家供大家参考.具体实现方法如下: <!doctype html> <html> <head lang="zh"> <meta charset="utf-8"> <title>js数组迭代</title> <meta name="renderer" content="webkit"> <script

  • js数组的五种迭代方法及两种归并方法(推荐)

    js数组的五种迭代方法及两种归并方法(推荐) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht

  • JavaScript数组迭代方法

    最近工作中经常涉及到数据的处理,数组尤其常见,经常需要对其进行遍历.转换操作,网上的文章零零散散,不得已自己又找出红宝书来翻出来看,顺便记一笔,便于以后查询. 数组常用的迭代方法 ECMAScript5为数组定义了5个迭代方法.每个方法都接受两个参数:要在每一项上运行的函数fn和(可选的)运行该函数的作用域对象--影响 `this` 的值. 传入这些方法中的函数(fn)会接收3个参数:item .index .array; 如: array.forEach(function(item,index

  • javaScript数组迭代方法详解

    本文为大家介绍了javaScript数组迭代方法,供大家参考,具体内容如下 每个方法都接收两个参数:要在每一项上运行的函数  和  (可选的)运行该函数的作用域对象. 传入这些方法中的函数会接收三个参数:数组项的值,该项在数组中的位置,数组对象本身. forEach()  对数组中的每一项运行 给定函数.该方法没有返回值. every()  对数组中的每一项运行 给定函数,如果数组的每一项都返回true,则返回true. some()  对数组中的每一项运行 给定函数,如果数组的任意一项返回tr

  • 详谈JS中数组的迭代方法和归并方法

    数组的迭代方法 ES5中为数组定义了5个迭代方法.每个方法都要接收两个参数:要在每一项上面运行的函数和(可选的)运行该函数的作用域对象---影响this的值. 传入方法中的函数会介绍三个参数:1.数组项的值 2. 该项在数组的中位值 3. 数组对象本身: every()和some()方法 every():对数组中的每一项运行给定函数,如果每一项都返回true,则返回true,否则false: some():对数组中的每一项运行给定函数,如果至少有一项返回true,则返回true,否则false:

  • JavaScript数组迭代器实例分析

    本文实例讲述了JavaScript数组迭代器用法.分享给大家供大家参考.具体如下: 这里注意:如果数组中有0.false."".null.NaN迭代器将会停止 function createIterator(x) { var i = 0; return function(){ return x[i++]; }; } var iterator=createIterator(['a','b','c','d','e','f','g']); var current; while(current

  • JavaScript数组的5种迭代方法

    ES5为数组定义了5个迭代方法.每种方法都接收两个参数.要在每一项上运行的函数和(可选的)运行该函数的作用域对象--影响this的值.//其中(可选的)这个参数暂时未遇到过. 其中,函数都接收三个参数(数组中的每一项.每一项的索引值.数组对象本身). 下面是5中方法的介绍: every() : 对数组中的每一项执行函数,如果每一项都返回 true ,则该方法返回 true. some():     对数组中的每一项执行函数,只要有一项返回了 true ,则该方法返回 true. filter()

  • 深入JavaScript高级程序设计之对象、数组（栈方法，队列方法，重排序方法，迭代方法）

    继承是OO语言中的一个最为人津津乐道的概念. 许多OO语言都支持两种继承方式:接口继承和实现继承. 接口继承只继承方法签名,而实现继承则继承实际的方法. 如其所述,由于函数没有签名,在ECMAScript中无法实现接口继承. ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现的. 1.使用对象字面量定义对象 var person={}; 使用这种方式创建对象时,实际上不会调用Object构造函数. 开发人员更喜欢对象字面量的语法. 2.有时候需要传递大量可选参数的情形时,一

  • javascript中Array数组的迭代方法实例分析

    本文实例讲述了javascript迭代的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: //filter() 利用指定的函数确定是否返回数组中包涵的某一项 var num = [1,2,3,4,5,6,12]; num.filter(function(item, index, array){ return (item > 2); //[3, 4, 5, 6, 12] }); //map() 返回一个数组,数组中每一项都是在原始数组中的对应项上运行传入参数的结果 var nu

  • js 数组实现一个类似ruby的迭代器

    js 数组实现一个类似ruby的迭代器

    分为如下几节: ·基本实现 ·在迭代中引用原来的对象,或者直接改变数组的值而不是返回一个新数组 ·向迭代传入无限多的参数 ·基本实现 今天突然发现js的数组处理起来真是麻烦,代码一些就是一大堆,相比起ruby的迭代器来真是逊色不少,主要是要写的代码太多了,也许是js有特殊的处理数组的方式,真是我不知道而已,但是我真的想自己给js实现一个类似ruby的迭代器的东东,而且实现起来也不难,那就开始动手吧. 真的应该庆幸js是动态语言啊,如果是静态语言,实现起来很不方便(别说要我重新定义一个继承自arr

  • 用js写了一个类似php的print_r输出换行功能

    复制代码 代码如下: <script type="text/javascript"> <!-- var my={ str:'', deep:0, block:' ', get_pre:function(n) { pre=''; for(i=0;i<n;i++) { pre+=this.block; } return pre; }, show_obj:function(obj) { for(k in obj) { if(typeof(obj[k])!='objec

  • js数组与字符串常用方法总结

    最近在梳理js的基础,首先从数组和字符串开始. string 常用方法: 1.substring(start开始位置的索引,end结束位置索引) 截取的位置不包含结束位置的字符,只写一个参数表示从开始位置截取到最后 var str='abcdefg'; str.substring(1) //得到bcdefg str.substring(1,3) //得到bc 输入负值时将负值变为0,哪个较小作为开始位置 str.substing(-1,1)  =>str.substring(0,1) //a  

  • Js数组的操作push,pop,shift,unshift等方法详细介绍

    js中针对数组操作的方法还是比较多的,今天突然想到来总结一下,也算是温故而知新吧.不过不会针对每个方法进行讲解,我只是选择其中的一些来讲. 首先来讲一下push和pop方法,这两个方法只会对数组从尾部进行压入或弹出,而且是在原数组进行操作,任何的改动都是会影响到操作的数组.push(args)可以每次压入多个元素,并返回更新后的数组长度.pop()函数每次只会弹出最后一个结尾的元素,并返回弹出的元素,如果是对空组数调用pop()则返回undefined. 如果参数是数组则是将整个数组当做一个元素

  • JS数组扁平化、去重、排序操作实例详解

    JS数组扁平化、去重、排序操作实例详解

    本文实例讲述了JS数组扁平化.去重.排序操作.分享给大家供大家参考,具体如下: 在网上看到一个校招题目,已知一个数组var arr = [[1, 3, 2, 1],[5, 3, 4, 8, 5, 6, 5],[6, 2, 8, 9, [4, 11, 15, 8, 9, 12, [12, 13, [10], 14]]], 16],用js编写一个程序将这个数组扁平化,并得到一个升序且无重复值的数组.得到最终结果为:[1,2,3,4,5,6,8,9,10,11,12,13,14,15,16].下面对数

  • js数组的 entries() 获取迭代方法

    目录 1.entires() 方法语法详解 2.entires() 方法常见使用及注意 2.1 返回迭代器对象 2.2 for...of...的使用 2.3 二维数组行排序 1.entires() 方法语法详解 entries() 方法返回一个数组的迭代对象,该对象包含数组的键值对 (key/value) . 迭代对象中数组的索引值作为 key, 数组元素作为 value.它的原型(__proto__:Array Iterator)上有一个next方法,可用用于遍历迭代器取得原数组的[key,v

  • JS数组在内存中的效率问题浅析

    JS数组在内存中的效率问题浅析

    目录 JS数组 效率比较 举个栗子 非连续内存问题 总结 JS数组 我们所熟知的JS数组的结构和其他语言数组结构类似,即物理内存是连续的,所以这也就导致了数组成员移动次数越少,其效率越高,一般数组会被分配到一段连续的内存中,像这样 大家可能会疑问,你为啥要给画一个边框呢,其实我们的数组在定义的时候默认了它的长度,即当我们像要在数组中添加元素的时候,就需要对它的长度做出改变. 效率比较 JS提供了几个api来让我们便捷地向数组中添加元素,比如说push,unshift push()是添加一个元素在

  • js数组去重的常用方法总结

    js数组去重的常用方法总结

    JS实现数组去重(重复的元素只保留一个) 1.遍历数组法 1.遍历数组法 它是最简单的数组去重方法(indexOf方法) 实现思路:新建一个数组,遍历去要重的数组,当值不在新数组的时候(indexOf为-1)就加入该新数组中: 例子1 function unique(arr) { if (!Array.isArray(arr)) { console.log('type error!') return } var array = []; for (var i = 0; i < arr.length

  • JSON用法之将PHP数组转JS数组，JS如何接收PHP数组

    JSON用法之将PHP数组转JS数组，JS如何接收PHP数组

    首先下载下面这个文件(这是一段是别人写出来专门解析json的代码),然后引入这个文件! http://pan.baidu.com/s/1dD8qVr7 现在当我们需要用ajax与后台进行交互时,怎样将php的数组传送到js文件并且并js所识别? 先看php文件,当我们获取到$arr这个数组后 foreach ($arr as $value) { $json .= json_encode($value) . ','; } echo '[' . substr($json,0,strlen($json

  • js数组如何添加json数据及js数组与json的区别

    JSON(JavaScript Object Notation )是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,JSON是JavaScript原生数据格式. 下面给大家介绍js数组添加json数据的两种方式. // 第一种方式 personInfo : [], for(var i = 0; i < _STAGE.passengerInfoArray.length; i++){ var name = _STAGE.passengerInfoArray[i]; var person =

随机推荐