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。
1 var arr = [1, 2, 3]; 2 3 arr.forEach(function (element, index, array) { 4 console.log(element, index, array) 5 }) 6 7 //output 8 1 0 [1, 2, 3] 9 2 1 [1, 2, 3] 10 3 2 [1, 2, 3]
map
map方法的作用就是将原数组按照一定的规则映射成一个新的数组。再将其返回,是返回一个新的数组,而不是将原数组直接改变。使用方法和参数都跟forEach相似。值得注意的是map需要有返回值,
没有的话某些情况下返回数组中元素为undefined
1 var data = [1, 2, 3]; 2 var arrayOfSquares = data.map(function (element) { 3 return element * element; 4 }); 5 console.log(arrayOfSquares); //[1, 4, 9]
filter
filter返回过滤后的新数组。用法和参数跟map差不多。与map方法不同的是,filter方法的callback函数需要返回弱等于true
或false
的值。如果为true
,则通过,否则,不通过。
1 var arr = [0, 1, 2, 3]; 2 var newArr = arr.filter(function (element, index, array) { 3 return e; 4 }) 5 var newArr2 = arr.filter(function (element, index, array) { 6 return e>=2; 7 }) 8 console.log(newArr); // [1, 2, 3] 9 console.log(newArr2); // [2, 3]
some
some方法是只要数组中的某个值,符合你给定的判断条件就返回true
;否则,返回false
。用法和参数跟前面的方法一样。
1 function isBigEnough(element, index, array) { 2 return element >= 4; 3 } 4 var passed = [1, 2, 3].some(isBigEnough); 5 var passed2 = [1, 2, 3, 4].some(isBigEnough); 6 7 console.log(passed); // false 8 console.log(passed2); // true
every
every方法与some方法相对,every方法是数组中的所有值都符合你给定的判断条件的时候才会返回true
,否则就返回false
。
1 function isBigEnough(element, index, array) { 2 return element >= 3; 3 } 4 var passed = [2, 3, 4].every(isBigEnough); 5 var passed2 = [3, 4, 5].every(isBigEnough); 6 7 console.log(passed); // false 8 console.log(passed2); // true
reduce/reduceRight
reduce/reduceRight相对比较复杂,其接收两个参数,第一个是回调,第二个是初始值初始值不写的话默认就是回调中的第一个参数。
array.reduce(callback,[initialValue])
其中callback
可以依次接受四个参数:
-
accumulator
上一次调用回调返回的值,或者是提供的初始值(initialValue
) -
currentValue
数组中正在处理的元素 -
currentIndex
数组中正在处理的元素索引,如果提供了initialValue
,从0开始;否则从1开始。 -
array
数组对象本身
1 var sum = [0,1,2,3,4].reduce(function(accumulator, currentValue, currentIndex, array){ 2 console.log(accumulator, currentValue, currentIndex, array) 3 return accumulator + currentValue; 4 }); 5 console.log(sum); 6 7 // output 8 0 1 1 [0, 1, 2, 3, 4] 9 1 2 2 [0, 1, 2, 3, 4] 10 3 3 3 [0, 1, 2, 3, 4] 11 6 4 4 [0, 1, 2, 3, 4] 12 10
传入第二个参数的时候
1 var sum = [0,1,2,3,4].reduce(function(accumulator, currentValue, currentIndex, array){ 2 console.log(accumulator, currentValue, currentIndex, array) 3 return accumulator + currentValue; 4 }, 10); 5 console.log(sum); 6 7 // output 8 10 0 0 [0, 1, 2, 3, 4] 9 10 1 1 [0, 1, 2, 3, 4] 10 11 2 2 [0, 1, 2, 3, 4] 11 13 3 3 [0, 1, 2, 3, 4] 12 16 4 4 [0, 1, 2, 3, 4] 13 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
1 var value = [1, 5, 10, 15].find(function(element, index, array) { 2 return element > 9; 3 }); 4 var value2 = [1, 5, 10, 15].find(function(element, index, array) { 5 return element > 20; 6 }); 7 8 console.log(value); // 10 9 console.log(value2); // undefined
findIndex
1 var value = [1, 5, 10, 15].findIndex(function(element, index, array) { 2 return element > 9; 3 }); 4 var value2 = [1, 5, 10, 15].findIndex(function(element, index, array) { 5 return element > 20; 6 }); 7 8 console.log(value); // 2 9 console.log(value2); // -1
for...of...
for...of...是ES6新增的一个循环遍历方式用法跟for...in...差不多但是这个常用于数组操作
1 var arr = [0, 1, 2, 3]; 2 3 for(let i of arr) { 4 console.log(i*2) 5 } 6 //0 7 //2 8 //4 9 //6
for...of...也可以遍历字符串
1 var str = "string" 2 3 for(let s of str) { 4 console.log(s) 5 } 6 // s 7 // t 8 // r 9 // i 10 // n 11 // g
以上就是常见一些数据(基本上是数组)迭代遍历的一些API,有不对的欢迎大家指正