JavaScript数据迭代方法差别

js有很多总迭代方法，ES6之后又新增了几个；

这里主要讨论数组迭代遍历的方法所以不会细讲for...in...

ES5、ES6数组迭代方法有：

• forEach
• map
• filter
• some
• every
• reduce/reduceRight
• find/findIndex   (ES6新增)
• for...of...  (ES6新增)

forEach

forEach对数组的每个元素执行一次提供的函数。forEach方法无法中断执行总是会将所有成员遍历完，如果希望符合某种条件时就中断的话遍历时要使用传统for循环，forEach无法 使用break,continue跳出循环，使用return时效果和在for循环中使用continue一样。最为重要的一点是可以添加第二个参数，为一个数组而且回调函数中的this会指向这个数组而如果没有第二个参数则this会指向window，严格模式下是undefined。

var arr = [1, 2, 3];

arr.forEach(function (element, index, array) {
  console.log(element, index, array)
})

//output
1 0 [1, 2, 3]
2 1 [1, 2, 3]
3 2 [1, 2, 3]

map

map方法的作用就是将原数组按照一定的规则映射成一个新的数组。再将其返回，是返回一个新的数组，而不是将原数组直接改变。使用方法和参数都跟forEach相似。值得注意的是map需要有返回值，

没有的话某些情况下返回数组中元素为undefined

var data = [1, 2, 3];
var arrayOfSquares = data.map(function (element) {
  return element * element;
});
console.log(arrayOfSquares); //[1, 4, 9]

filter

filter返回过滤后的新数组。用法和参数跟map差不多。与map方法不同的是，filter方法的callback函数需要返回弱等于true或false的值。如果为true，则通过，否则，不通过。

var arr = [0, 1, 2, 3];
var newArr = arr.filter(function (element, index, array) {
  return e;
})
var newArr2 = arr.filter(function (element, index, array) {
  return e>=2; 
})
console.log(newArr); // [1, 2, 3]
console.log(newArr2); // [2, 3]

some

some方法是只要数组中的某个值，符合你给定的判断条件就返回true；否则，返回false。用法和参数跟前面的方法一样。

function isBigEnough(element, index, array) {
  return element >= 4;
}
var passed = [1, 2, 3].some(isBigEnough);
var passed2 = [1, 2, 3, 4].some(isBigEnough);

console.log(passed); // false
console.log(passed2); // true

every

every方法与some方法相对，every方法是数组中的所有值都符合你给定的判断条件的时候才会返回true，否则就返回false。

function isBigEnough(element, index, array) {
  return element >= 3;
}
var passed = [2, 3, 4].every(isBigEnough);
var passed2 = [3, 4, 5].every(isBigEnough);

console.log(passed); // false
console.log(passed2); // true

reduce/reduceRight

reduce/reduceRight相对比较复杂，其接收两个参数，第一个是回调，第二个是初始值初始值不写的话默认就是回调中的第一个参数。

array.reduce(callback,[initialValue])

其中callback可以依次接受四个参数：

• accumulator上一次调用回调返回的值，或者是提供的初始值（initialValue）

• currentValue数组中正在处理的元素

• currentIndex数组中正在处理的元素索引，如果提供了initialValue ，从0开始；否则从1开始。

• array数组对象本身

var sum = [0,1,2,3,4].reduce(function(accumulator, currentValue, currentIndex, array){
  console.log(accumulator, currentValue, currentIndex, array)
  return accumulator + currentValue;
});
console.log(sum);

// output
0 1 1 [0, 1, 2, 3, 4]
1 2 2 [0, 1, 2, 3, 4]
3 3 3 [0, 1, 2, 3, 4]
6 4 4 [0, 1, 2, 3, 4]
10

传入第二个参数的时候

var sum = [0,1,2,3,4].reduce(function(accumulator, currentValue, currentIndex, array){
  console.log(accumulator, currentValue, currentIndex, array)
  return accumulator + currentValue;
}, 10);
console.log(sum);

// output
10 0 0 [0, 1, 2, 3, 4]
10 1 1 [0, 1, 2, 3, 4]
11 2 2 [0, 1, 2, 3, 4]
13 3 3 [0, 1, 2, 3, 4]
16 4 4 [0, 1, 2, 3, 4]
20

从上面的情况可以看出：不提供initialValue ，reduce方法会从索引1的地方开始执行callback方法，跳过第一个索引。提供 initialValue，从索引0开始。
同时，是否提供initialValue对于回调函数第一次执行时，accumulator和currentValue的取值有两种情况：调用reduce时提供initialValue，accumulator取值为initialValue，currentValue取数组中的第一个值；没有提供initialValue ，accumulator取数组中的第一个值，currentValue取数组中的第二个值。

reduceRight与reduce类似，不同之处在于它是从最后一个值开始计算的。

find / findIndex

find方法用于找出第一个符合条件的数组成员。它的参数跟forEach方法是一样的；所有数组成员依次执行回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。findIndex方法和find相似；不过它返回数组中符合条件的元素的索引。如果所有成员都不符合条件，则返回-1。

find

var value = [1, 5, 10, 15].find(function(element, index, array) {
  return element > 9;
});
var value2 = [1, 5, 10, 15].find(function(element, index, array) {
  return element > 20;
});

console.log(value); // 10
console.log(value2); // undefined

findIndex

var value = [1, 5, 10, 15].findIndex(function(element, index, array) {
  return element > 9;
});
var value2 = [1, 5, 10, 15].findIndex(function(element, index, array) {
  return element > 20;
});

console.log(value); // 2
console.log(value2); // -1

for...of...

for...of...是ES6新增的一个循环遍历方式用法跟for...in...差不多但是这个常用于数组操作

var arr = [0, 1, 2, 3];

for(let i of arr) {
    console.log(i*2)
}
//0
//2
//4
//6

for...of...也可以遍历字符串

var str = "string"

for(let s of str) {
    console.log(s)
}
// s
// t
// r
// i
// n
// g

以上就是常见一些数据(基本上是数组)迭代遍历的一些API，有不对的欢迎大家指正