几种遍历数据方法及性能

forEach()

数组中的每个元素都会通过forEach进行一些改变，会改变原数组。

peoples.forEach(function (people) {
  people.doSomething();
});

 

map()

数组中的元素通过map进行一些改变后返回一个新数组，新数组中的元素都是原数组中的元素doSomething()后的结果，元素顺序一一对应。(return是必须的)

var newPeoples = peoples.map(function (people) {
  return people.doSomething();
});

 

 

以上方法中的回调支持3个参数，value遍历的每一项；index对应的数组索引，array数组本身。

[].forEach/map(function(value, index, array) {});

 

reduce()

通常用于数组求和，回调必须接收两个参数，简单说就是第一项和第二项相加后的结果再和第三项相加以此类推直到最后一项。

var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
  return x + y;
}); // 25

 

filter()

通常用于过滤，把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素，返回一个过滤后的新数组。

var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {
return x % 2 !== 0;
});
r; // [1, 5, 9, 15]

 

for...in

用于遍历数组下标或者对象的属性（对数组下标或对象的属性进行循环操作）

for...of

用于遍历数组值或者对象的值

for...in / for...of区别演示：

let arr = [3, 5, 7];
arr.foo = "hello";

for (let i in arr) {
console.log(i); // logs "0", "1", "2", "foo"
}

for (let i of arr) {
console.log(i); // logs "3", "5", "7" // 注意这里没有 hello
}

 

性能方面

只谈性能，显然是 for > forEach > map

map 会返回一个等长数组，forEach 不会，所以 forEach 大于 map。

如果你需要将数组按照某种规则映射为另一个数组，就应该用 map。

如果你需要进行简单的遍历，用 forEach 或者 for of。

如果你需要对迭代器进行遍历，用 for of。

如果你需要过滤出符合条件的项，用 filter。

如果你需要先按照规则映射为新数组，再根据条件过滤，那就用一个 map 加一个 filter。不要担心这样会慢，你那点数据量浏览器根本不 care。

如果你真的需要考虑性能，或者有 break 的需求，就用 for 吧。