在ES5中常用的10种数组遍历方法:(以下脚本可复制黏贴到浏览器的console中查看效果)
1、原始的for循环语句
2、Array.prototype.forEach数组对象内置方法 优点不用定义额外的参数变量,缺点:
- 性能不如for循环
- 不能用return结束循环
- 不生成新数组
- ie不支持(alert(Array.prototype.forEach)返回undefined)
- 数组元素为数值时不改变原数组,元素为对象、数组时改变原数组。
例1:
var oldArr = [3, 6, 8]; var newArr = oldArr.forEach((value,key,arr) => { console.log('value:' + value + ',key:' + key+',arr:' + arr); return value += 1; }) console.log('oldArr:' + oldArr); // [3,6,8] console.log('newArr:' + newArr); // undefined
例2:
var oldArr = [ {id:1, score:10}, {id:2, score:20}, {id:3, score:30} ]; var newArr = oldArr.forEach((value,key,arr) => { value.score += 5; }) console.log('oldArr:' + JSON.stringify(oldArr)); // [{"id":1,"score":15},{"id":2,"score":25},{"id":3,"score":35}] console.log('newArr:' + newArr); // undefined
3、Array.prototype.map数组对象内置方法,特点:
- 不改变原数组
- 不能用return结束循环,但用return可生成新数组
- 常用于修改数组的值,并且不破坏原数组。
var oldArr = [3, 6, 8]; var newArr = oldArr.map((value,key,arr) => { console.log('value:' + value + ',key:' + key+',arr:' + arr); return value+1; }) console.log('oldArr:' + oldArr); // [3,6,8] console.log('newArr:' + newArr); // [4,7,9]
4、Array.prototype.filter数组对象内置方法,特点:
- 不改变原数组
- 必须用return true添加到新数组中,或用return false不添加到新数组中
- 直接返回return表示不添加到新数组中,相当于return false
- 常用于去掉不要的值
var oldArr = [3, 6, 8]; var newArr = oldArr.filter((value,key,arr) => { console.log('value:' + value + ',key:' + key+',arr:' + arr); if (value === 6) { return false; } return true; }) console.log('oldArr:' + oldArr); // [3,6,8] console.log('newArr:' + newArr); // [3,8]
5、Array.prototype.reduce数组对象内置方法,特点:
- 不改变原数组
- 第一个参数是函数累加器,数组中的每个值(从左到右)开始合并,最终返回一个值。
- 第二个参数(选填)如果有,函数累加器从第二个参数开始。
var oldArr = [3, 6, 8]; var newArr = oldArr.reduce((pre, cur, index, array) => { console.log('pre:' + JSON.stringify(pre) + ',cur:' + cur+',index:' + index + ',array:' + array); pre[cur] = 1; return pre; }, {}) console.log('oldArr:' + oldArr); // [3, 6, 8] console.log('newArr:' + JSON.stringify(newArr)); // {3: 1, 6: 1, 8: 1} // 例1:将数组所有项相加 var total = [0, 1, 2, 3].reduce(function(a, b) { console.log('a=' + a + ',b=' + b); return a + b; }); console.log(total) // 6 // 例2:数组扁平化 var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) { console.log('a=' + a + ',b=' + b); return a.concat(b); }); console.log(flattened) // [0, 1, 2, 3, 4, 5]
6、Array.prototype.some数组对象内置方法
- 不改变原数组
- 判断数组中是否至少有一个元素满足条件,判断逻辑:只要有一个满足就返回true,只有都不满足时才返回false。类似逻辑运算符||。
var oldArr = [3, 6, 8]; var newArr = oldArr.some((value,key,arr) => { console.log('value:' + value + ',key:' + key+',arr:' + arr); return value === 6; }) console.log('oldArr:' + oldArr); //[3, 6, 8] console.log('newArr:' + newArr); // true
// 例:判断数组是否有大于3的元素 var arr = [ 1, 2, 3, 4, 5, 6 ]; console.log(arr.some( function( item, index, array ){ console.log( 'item=' + item + ',index='+index+',array='+array ); return item > 3; }));
7、Array.prototype.every数组对象内置方法
- 不改变原数组
- 判断数组中是否每个元素都满足条件,判断逻辑:只有都满足条件才返回true,只要有一个不满足就返回false。类似逻辑运算符&&。
var oldArr = [3, 6, 8]; var newArr = oldArr.every((value,key,arr) => { console.log('value:' + value + ',key:' + key+',arr:' + arr); return value === 6; }) console.log(oldArr); //[3, 6, 8] console.log(newArr); // false
// 例:判断数组元素是否都小于5 var arr = [ 1, 2, 3, 4, 5, 6 ]; console.log(arr.every( function( item, index, array ){ console.log( 'item=' + item + ',index='+index+',array='+array ); return item < 5; }));
8、Array.prototype.indexOf数组对象内置方法 在数组循环过程中会和传入的参数比对,比对成功返回对比成功的下标并终止循环,比对失败返回-1。
var oldArr = [3, 6, 8]; var newArr = oldArr.indexOf(6) console.log(oldArr); //[3, 6, 8] console.log(newArr); // 1
9、Array.prototype.lastIndexOf数组对象内置方法 与indexOf类似,只不过查找顺序是逆向的。
10、for...in循环语句
- for循环变量i表示数组的下标是number类型,而for...in循环的变量key是string类型。
- 遍历数组是遍历数组的下标值,遍历对象是遍历对象的key值。
var arr = [3, 6, 8]; for(const value in arr){ console.log(typeof(value)) console.log(value) // 结果依次为0,1,2 }
ES6中新增加了一种:
1.for...of循环语句
for(const value of [3, 6, 8]){ console.log(value) // 结果依次为3,6,8 }
小结: forEach,for,for...in,for...of方法仅仅只是为了循环,并不可以帮你做额外的事情; map方法是做循环改变数组值; filter方法是做循环剔除数组值; reduce方法相当于循环遍历对象做统计(累加或者累减之类的); some和every方法相当于循环找到指定值,分别返回的是true和false; indexOf和lastIndexOf方法相当于循环找到指定值,返回给你它的门牌号(索引)。