使用数组总是会碰到数组的遍历（迭代）操作。说到迭代，可能会立马想起 for 语句对数组进行迭代。比如需要迭代出下面数组 peoples 年龄( age )大于 30 的人名( name )。
var peoples = [ { name: 'Agraj', gender:'M', age: 29, address: { city: 'Delhi', pincode: '110064' } }, { name: 'Mark', gender:'M', age: 35, address: { city: 'West Bengal', pincode: '220013' } }, { name: 'Lance', gender:'M', age: 39, address: { city: 'Chandigarh', pincode: '201201' } }, { name: 'Vikas', gender:'M', age: 21, address: { city: 'Noida', pincode: '201301' } }, { name: 'Kanika', gender:'F', age: 21, address: { city: 'Noida', pincode: '201301' } }];for (var i = 0; i < peoples.length; i++ ) { if (peoples[i].age > 30) { console.log(peoples[i].name + ':' + peoples[i].age); }}
Chrome浏览器输出的结果：
Mark:35Lance:39
其实ES5为数组定义了五个迭代方法：
- forEach() ：没有返回值，只是针对每个数组项调用指定的函数( callbackfn )
- every() : 返回一个布尔值( true 或 false )，判断每个数组项是否符合指定函数的条件，符合为 true ，反之为 false
- some() : 返回一个布尔值( true 或false),判断每个数组项是否符合指定函数的条件，只要有任何一项返回为 true ，就会返回 true
- filter() : 每个数组项调用指定的函数，条件为 true 的将返到一个新数组中
- map() : 每个数组项调用指定的函数，返回每次函数调用的结果组成一个新数组
这五个数组迭代的方法中，其中 forEach() 、 every() 和 some() 方法不生成一个新数组，而 filter() 和 map() 方法将会生成一个新数组（符合条件）。并且这些方法都会调用指定的函数 callbackfn 。回调函数 callbackfn 语法如下：
function callbackfn (value, index, array) {...}
可以使用三个参数来声明回调函数 callbackfn :
- value : 数组元素的值
- index : 数组元素在数组中的索引值
- array : 包含该元素的数组对象
今天主要一起了解这五个数组迭代方法是如何使用？在接下来的内容中都将以开头的数组为例。
forEach() 方法
forEach() 方法让数组的每一项都执行一次给定的函数。
语法
array.forEach(callbackfn[, thisArg])
参数
| 参数 | 说明 |
|---|---|
| array | 必选。一个数组对象。比如示例中的 peoples 数组 |
| callbackfn | 必选。最多可以接受三个参数的函数。对于数组中的每个元素， forEach 都会调用 callbackfn 函数一次。 |
| thisArg | 可选。 callbackfn 函数中的 this 关键字可引用的对象。如果省略 thisArg ，则 undefined 将用作 this 值。 |
forEach() 方法按升序为数组中含有效值的每一项执行一次 callbackfn 函数，那些已删除或者从未赋值的项将被跳过（但不包括哪些值为 undefined 的项）。
示例
开头使用 for 语句遍历出年龄大于 30 岁的名称，并且输出 people 的 name 和 age 。其实使用 forEach() 方法也可以实现：
peoples.forEach(function (people) { if (people.age > 30) { console.log(people.name + ':' + people.age); }});
Chrome浏览器输出的结果：
Mark:35Lance:39
在此基础上，你可以做很多事情，比如说，将数组 peoples 中的 name 遍历出来，然后重新创建一个新数组 names ，可以这样做：
var names = [];var peoplesDb = peoples.forEach(function (people, index) { names.push(people.name);});console.log(names); // ["Agraj", "Mark", "Lance", "Vikas", "Kanika"]
内部实现
看看 forEach() 方法内部实现的方法：
Array.prototype.forEach = function(fun /*, thisp*/) { var len = this.length; if (typeof fun != "function") throw new TypeError(); var thisp = arguments[1]; for (var i = 0; i < len; i++) { if (i in this) fun.call(thisp, this[i], i, this); }};
every() 方法
every() 方法测试数组的所有元素是否都符合指定函数的条件，只要有有一个元素不符合，返回的都会是 false 。
语法
array.every(callbackfn[, thisArg])
every() 方法为数组中的每个元素执行一次 callbackfn 函数，直到它找到一个使 callbackfn 返回 false （表示可转换为布尔值 false 的值）的元素。如果发现了一个这样的元素， every() 方法将会立即返回 false 。否则， callbackfn 为每一个元素返回 true ， every() 就会返回 true 。 callbackfn 只会为那些已经被赋值的索引调用。不会为那些被删除或从来没被赋值的索引调用。
示例
还是上面开头的数组，如果每一位的年龄都大于或等于 30 ,就会返回“都大于或等于30岁了”,反之返回“不是所有人都大于30岁了”。
function bigAge(ele,index,arr){ return (ele.age >= 30);}var isBigPeople = peoples.every(bigAge);if (isBigPeople) { console.log('都大于或等于30岁了');} else { console.log('不是所有人都大于30岁了');}
Chrome浏览器输出的结果：
// 不是所有人都大于30岁了
内部实现
Array.prototype.every = function(fun /*, thisp*/) { var len = this.length; if (typeof fun != "function") throw new TypeError(); var thisp = arguments[1]; for (var i = 0; i < len; i++) { if (i in this && !fun.call(thisp, this[i], i, this)) return false; } return true;};
some() 方法
some() 方法和 every() 方法类似，不同的是， some() 方法在调用指定的函数 callbackfn 指定的条件符合就会返回 true ，不符合则返回 false 。
语法
array.some(callbackfn[, thisArg])
示例
只要数组中年龄 age 有一个大于或等于 30 ，就会返回“有部分人还是年纪大了”，反之返回“你们都还很年轻”:
function OldAge(ele,index,array){ return (ele.age >= 30);}var isOldPeople = peoples.some(OldAge);if (isOldPeople) { console.log('有部分人还是年纪大了');} else { console.log('你们都还年轻');}
内部实现
Array.prototype.some = function(fun /*, thisp*/) { var len = this.length; if (typeof fun != "function") throw new TypeError(); var thisp = arguments[1]; for (var i = 0; i < len; i++) { if (i in this && fun.call(thisp, this[i], i, this)) return true; } return false;};
map() 方法
map() 方法返回一个由原数组中的每个元素调用一个指定函数 callbackfn 后的返回值组成的新数组。如果符合 callbackfn 会返回符合条件的一个值，将所有返回的值再创建一个新数组。
语法
array.map(callbackfn[, thisArg])
map() 方法会给原数组中的每个元素都按顺序调用一次 callbackfn 函数。 callbackfn 每次执行后的返回值组合起来形成一个新数组。 callbackfn 函数只会在有值的索引上被调用；那些从来没被赋过值或者使用 delete 删除的索引则不会被调用。
示例
使用 map() 方法遍历数组 peoples ，并且让 index 在以前的 index 增加 1 :
var usersDb = peoples.map(function (user, index) {user.id = index + 1; return user; }); console.table(usersDb);
Chrome浏览器输出的结果：
内部实现
Array.prototype.map = function(fun /*, thisp*/) { var len = this.length; if (typeof fun != "function") throw new TypeError(); var res = new Array(len); var thisp = arguments[1]; for (var i = 0; i < len; i++) { if (i in this) res[i] = fun.call(thisp, this[i], i, this); } return res;};
filter() 方法
filter() 方法使用指定的函数 callbackfn 测试所有元素，并创建一个包含所有通过测试的元素的新数组。
语法
array.filter(callbackfn[, thisArg])
filter() 为数组中的每个元素调用一次 callbackfn 函数，并利用所有使得 callbackfn 返回 true 或 等价于 true 的值 的元素创建一个新数组。 callbackfn 只会在已经赋值的索引上被调用，对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通过 callbackfn 测试的元素会被跳过，不会被包含在新数组中。
示例
遍历出数组中 gender 为 M 的相关数组项：
var guys = peoples.filter(function (user) { return user.gender === 'M';});console.table(guys);
Chrome浏览器输出的结果：
内部实现
Array.prototype.filter = function(fun /*, thisp*/) { var len = this.length; if (typeof fun != "function") throw new TypeError(); var res = new Array(); var thisp = arguments[1]; for (var i = 0; i < len; i++) { if (i in this) { var val = this[i]; // in case fun mutates this if (fun.call(thisp, val, i, this)) res.push(val); } } return res;};
总结
今天主要学习了数组的五个遍历方法： forEach() 、 every() 、 some() 、 map() 和 filter() 。其中 forEach() 、 every() 和 some() 方法不会改变原数组，而 map() 和 filter() 方法会根据指定的函数 callbackfn 创建一个新数组。其中 filter() 方法将符合 callbackfn 函数条件创建一个新数组，而 some() 将数组的每一项都是在原数组中的对应项上运行传入的函数 callbackfn 。另外， every() 和 some() 方法根据指定的函数 callbackfn 返回 true 或 false 值，其中 every() 方法，只要有一项不符合 callbackfn 指定的条件就会返回 false ， some() 方法，将根据 callbackfn 函数指定的条件，只要符合就返回 true ，不符合则返回则返回 false 。
初学者学习笔记，如有不对，还希望高手指点。如有造成误解，还希望多多谅解。
大漠
常用昵称“大漠”，W3CPlus创始人，目前就职于手淘。中国Drupal社区核心成员之一。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《 图解CSS3：核心技术与案例实战 》。
