枚举 循环 Arrays的迭代

枚举... 噢!噢!

你知道，我们都是这样来做循环的，建一个Array，用elements组织它们，再建一个循环结构（例如for,foreach,while)通过index数字来访问每一个element，再用这个element做一些动作。

当你想到这时，你会发现几乎每次写循环代码你都会迟早用到一个Array。那么，如果Array对象能够提供更多的功能给它们的迭代器使用不是很爽吗？确实是这样，事实上很多的编程语言都在它们的Array或其它类似的结构中（如Collections,Lists）提供一些这样的功能。

现在好了，prototype.js了给我们一个 Enumerable对象，它实现了很多和可迭代数据进行交互的窍门。和原有的JS对象相比prototype.js更上一层楼，它对Array 类s扩展了所有枚举要用的函数。

循环, Ruby样式的

在标准的javascript中，如果你想把一个array中的所有elements显示出来，你可以像下面代码这样写得很好：

<script>
function showList(){
var simpsons = ['Homer', 'Marge', 'Lisa', 'Bart', 'Meg'];
            for(i=0;i<simpsons.length;i++){
alert(simpsons[i]);
}
}</script><input type="button" value="Show List" onclick="showList();" >

使用我们新的最好的朋友，prototype.js，我们可以把它生写成这样

      function showList(){
var simpsons = ['Homer', 'Marge', 'Lisa', 'Bart', 'Meg'];
            simpsons.each( function(familyMember){
alert(familyMember);
});
}

你可能会想“非常奇怪的方式...相对旧的，这种语法太怪异了”。哦，在上面的例子，确实什么也没有，在这个简单得要死例子中，也没有改变太多啊，尽管如此，请继续读下去。

在继续下面内容之前，你注意到那个被做为一个参数传递给each函数的函数？我们把它理解成迭代器函数。

Your arrays on steroids

就如我们上面提到的，把你的Array中的elements当成相同的类型使用相同的属性和函数是很通用(Common,不知该翻译成通用还是庸俗)的。让我们看看怎么样利用我们新的马力强劲的Arrays的迭代功能吧。

依照标准找到一个element。

 

<script>
function findEmployeeById(emp_id){
var listBox = $('lstEmployees')
var options = listBox.getElementsByTagName('option');
options = $A(options);
var opt = options.find( function(employee){
return (employee.value == emp_id);
});
alert(opt.innerHTML); //displays the employee name
}
</script>
<select id="lstEmployees" size="10" >
<option value="5">Buchanan, Steven</option>
<option value="8">Callahan, Laura</option>
<option value="1">Davolio, Nancy</option>
</select>
<input type="button" value="Find Laura" onclick="findEmployeeById(8);" >

现在我们再下一城，看看如何过滤一个Array中的元素，从每个元素中得到我们想要的成员。

 

<script>
function showLocalLinks(paragraph){
paragraph = $(paragraph);
var links = $A(paragraph.getElementsByTagName('a'));
//find links that do not start with 'http'
var localLinks = links.findAll( function(link){
var start = link.href.substring(0,4);
return start !='http';
});
//now the link texts
var texts = localLinks.pluck('innerHTML');
//get them in a single string
var result = texts.inspect();
alert(result);
}
</script>
<p id="someText">
This <a href="http://othersite.com/page.html">text</a> has
a <a href="#localAnchor">lot</a> of
<a href="#otherAnchor">links</a>. Some are
<a href="http://wherever.com/page.html">external</a>
and some are <a href="#someAnchor">local</a>
</p>
<input type=button value="Find Local Links" onclick="showLocalLinks('someText')">

上面的代码仅仅是一点小小的实践让人爱上这种语法。请参看 Enumerable和Array的所有函数