`

改进一下Array.forEach方法。

阅读更多
Ruby能轻易实现的一个功能在JavaScript里用不了,比较让人郁闷:
[1,2,3,4,5].each{|item| puts item; break if item > 3;}

1.6版本的JavaScript为Array实现了一个forEach方法,在MooTools中它有个alias叫each,但用起来不是那么方便,好像没有办法实现上面ruby代码的功能。
[1,2,3,4,5].forEach(function(item){
    alert(item);
    if(item>3) //return?没效果,只是跳出这个匿名function而已,本来代码就已经执行完了,加个return明显多余。break?没有这样用的。
});

仔细一想,反正这个匿名函数的返回值也没有用处,不如直接用作判断跳出循环的条件吧,于是写出如下代码:
Array.prototype.forEach = function(fn, bind){
	for(var i=0; i<this.length; i++){
		var result = fn.call(bind, this[i], i, this);
		if(result!==undefined && !result) break;
	}
};

使用:
example 1
[1,2,3,4,5].forEach(function(item){
	alert(item);
});

example 2
[1,2,3,4,5].forEach(function(item, index, arr){
	alert('数组['+arr+']的第'+(index+1)+'个元素是'+item);
	return item<=3;//返回false则跳出循环
});
分享到:
评论
5 楼 RednaxelaFX 2009-08-22  
def foo
  [1,2,3,4,5].each {|item| puts item; break if item > 3;}
end

这种写法里,block就是一个匿名函数,在其内部的跳转自然是局部跳转,但block里的break是跳转到block之外的,就是一个非局部跳转。
想像一下一般函数调用栈的状况。如果调用了foo,在block中执行的时候,调用栈的状况如下:
frame for `block' // stack top
frame for Enumerable#each
frame for foo
// ...other frames

如果是局部跳转,那么调用栈的结构不需要有任何变化。但对非局部跳转来说,跳到函数外了,那对应的栈帧也该消失了。于是执行break之后,调用栈会变成这样:
frame for foo // stack top
// ...other frames

不光是block的栈帧,连Enumerable#each的栈帧被break也一口气消了。这跟普通的break的局部跳转语义不同,跟return也不同。非局部跳转要没有语言直接支持的情况下要实现都挺烦的……Java里的惯用法是抛合适的异常来实现这类跳转。
4 楼 yuan 2009-08-22  
晕,我试了一下for in
for(var i in a)
  document.write(i);

输出的这个i还不是数组a的内容,而是它的每个下标,那我觉得还不如直接
for(var i=0; i<a.length, i++)


p.s:FX说的我看得稀里糊涂的……哈哈
3 楼 yuan 2009-08-22  
全冠清 写道
感觉还不如for in来的直接

for in遍历数组好像会有副作用吧?
2 楼 全冠清 2009-08-16  
感觉还不如for in来的直接
1 楼 RednaxelaFX 2009-07-22  
这就是要求在JavaScript里实现非局部跳转语义(non-local jump semantics)。当然JavaScript的function是不支持非局部跳转的,所以只能想办法模拟。我想起了这系列的文:http://community.bartdesmet.net/blogs/bart/archive/2009/07/12/bart-s-control-library-not-what-you-think-it-is-part-1.aspx,例子是C#的,不过要解决的问题类似,都是非局部跳转。

相关推荐

    es5-shim.js

    2. **数组方法**:ES5引入了`Array.prototype.forEach`, `Array.prototype.map`, `Array.prototype.filter`, `Array.prototype.reduce`, `Array.prototype.some` 和 `Array.prototype.every`等方法,这些在`es5-shim...

    ES规范-ECMA-262_5.1_edition_june_2011.pdf.zip

    4. **数组的扩展**:增加了`Array.prototype.forEach()`、`Array.prototype.map()`、`Array.prototype.filter()`等方法,使得对数组的迭代操作更为便捷。此外,还有`Array.isArray()`用于检测一个值是否为数组,以及...

    javascript 5

    4. **新增方法和属性**:包括`Array.prototype.forEach()`、`Array.prototype.map()`、`Array.prototype.filter()`、`Array.prototype.reduce()`等方法,这些增强了数组操作的能力。还有`Object.keys()`返回对象所有...

    basic.js 的改进版

    3. **修复了特定的语法或函数问题**:IE9可能不支持ES5及以上版本的一些语法,比如Array.prototype.forEach、let关键字等,改进版可能已经将这些语法替换为IE9支持的替代方案。 4. **优化了DOM操作**:IE9的DOM操作...

    ECMAScript-Edition5-小试

    - **数组方法**:如 `Array.isArray()` 用于判断参数是否为数组类型,还有 `Array.prototype.forEach()`, `Array.prototype.map()`, `Array.prototype.filter()`, `Array.prototype.reduce()` 等一系列实用方法,极...

    ES5新增数组的实现方法

    ES5(ECMAScript 5)是JavaScript的一个重要版本,它在2009年发布,为开发者提供了许多新的功能和改进。在这篇文章中,我们将重点讨论ES5新增的数组方法,这些方法为数组的操作和处理提供了更为强大和灵活的工具。 ...

    JQuery.js 源码(1.1 和2.x)

    2. **ECMAScript 5支持**:JQuery 2.x全面采用ES5特性,如`Array.prototype.forEach()`,这使得代码更现代,但同时也要求目标浏览器必须支持这些新特性。 3. **更好的DOM遍历**:2.x版本中,DOM遍历方法如`next()`,...

    js5笔记.rarjs5笔记.rar

    JS5增加了`Array.prototype.forEach()`、`map()`、`filter()`、`reduce()`和`reduceRight()`等方法,使数组操作更加便利。同时,新增的`Object.keys(obj)`返回对象的所有可枚举属性的数组。 4. **JSON支持**: ...

    Javascript5.5语言参考.rar

    10. **ES5.1和5.2的新特性**:例如`Array.prototype.forEach()`, `Array.prototype.map()`, `Function.prototype.bind()`, `Object.keys()`, `JSON.parse()`和`JSON.stringify()`等。 11. **API帮助**:由于标签中...

    javascript 5 范例

    - `Array.prototype.forEach()` 方法提供了一种更简洁的遍历数组的方式。 8. **异步编程(Asynchronous Programming)** - 在ES5中,主要依赖回调函数、定时器(`setTimeout` 和 `setInterval`)以及事件监听来...

    EcmaScript_fifth_edition

    - **数组操作方法**:包括`forEach()`, `map()`, `filter()`, `reduce()`, `reduceRight()`等,这些方法提供了更简洁的语法来处理数组。 ##### 3. 对象和属性访问的改进 - **`Object.create()`**:此方法可以创建...

    jdk-8u281-windows-x64.zip

    9. **Parallel Array Operations**:Java 8提供了并行数组操作,如`Arrays.parallelSort()`,利用多核处理器提高排序等操作的性能。 10. **改进的类型推断**:Java 8增强了编译器的类型推断能力,使得在使用泛型和...

    es5-shim-master.zip

    1. **数组扩展**: 包括`forEach`、`map`、`filter`、`some`、`every`、`reduce`、`reduceRight`等方法,这些都是ES5中新增的数组迭代方法,对于数据处理非常有用。 2. **对象扩展**: 提供了`Object.create`用于创建...

    ECMA-262-5.1中文版

    同时,ES5也改进了数组的处理能力,例如Array.prototype.forEach()等方法的引入。 ECMAScript的这一版本对Web应用开发有着深远的影响。它不仅为现有的JavaScript开发者提供了一个更加健壮和完善的开发环境,还为...

    分享19个JavaScript 有用的简写写法

    另外,Array.forEach 方法提供了一种更简洁的迭代数组的方式。 6. 短路评价: 短路评价可用于快速提供默认值: ``` dbHost = process.env.DB_HOST || 'localhost'; ``` 如果环境变量 DB_HOST 存在,则使用其值,...

    HTML5新的WEB标准和浏览器支持[参考].pdf

    接着,ECMAScript 5为Array对象增加了多个实用方法,例如`forEach()`, `map()`, `filter()`, `every()`, `some()`, `indexOf()`, `lastIndexOf()`等。这些方法在函数式编程中扮演着重要角色,提高了代码的可读性和...

    JavaScript 5中文版(CHM格式)

    4. **数组扩展**:提供了`Array.prototype.forEach`、`map`、`filter`、`reduce`等方法,便于数组操作和转换。 5. **对象扩展**:增加了`Object.create`来创建新对象,使用指定的原型对象和属性描述符;`Object....

    jQuery1.8.0、W3CSchool、JavaScript API

    例如,`Array.prototype.forEach()`方法用于遍历数组,`document.getElementById()`用于获取页面中特定ID的元素,这些都是JavaScript编程中常用的方法。 jQuery1.8.0与JavaScript API之间的关联在于,jQuery库是对...

    前端Javascript相关面试基础问答整理md

    - 不具备 `Array` 的所有方法。 - 拥有 `length` 属性和索引元素,但不具有 `push`、`pop` 等方法。 **转换成数组**: - 使用 `Array.from()` 或 `[].slice.call(arrayLike)`。 #### 4. 数组的常见 API - `map`, ...

    PHP7新特性foreach 修改示例介绍

    在PHP编程语言中,`foreach`循环是一种常用的遍历数组或集合的方法。随着PHP的版本更新,特别是PHP7,`foreach`循环引入了一些新的特性和行为变化,这使得代码的执行更加高效且易于理解。以下是关于PHP7 `foreach`新...

Global site tag (gtag.js) - Google Analytics