js各种遍历总结
2017-11-19 本文已影响0人
aermin
tips：接下去会在github写博客，简书不再更新和修改文章，欢迎大家逛逛我的新博客点击查看 ，我会尽量用更容易理解的方式写好每一篇博客,大家一起学习交流😄。
最近忙着写项目，是时候来一波总结了。
因为项目中数据交互炒！鸡！多！，遍历很常用，本篇对js的遍历做一次总结
一 、普通for循环 (只能遍历数组和字符串)
- 遍历数组
var arr = [1,2,3,4,5];
for(var i = 0 ; i < arr.length; i++){
console.log(i); //1 2 3 4 5
}
不足：重复获取数组长度
优化
var arr = [1,2,3,4,5];
for(var i = 0 ; len = arr.length ; i < len; i++){
console.log(i); //1 2 3 4 5
}
使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显。
这种方法基本上是所有循环遍历方法中性能最高的一种
- 遍历字符串
var str = "for循环遍历字符串" ;
for (var i = 0; i < str.length; i++) {
console.log(str[i]+'=='+str.charAt(i)+'=='+str.charCodeAt(i));
//f==f==102
o==o==111
r==r==114
循==循==24490
环==环==29615
遍==遍==36941
历==历==21382
字==字==23383
符==符==31526
串==串==20018
}
- 遍历对象 不能使用
二、 for..in..循环 （可以遍历字符串、对象、数组）
这个循环很多人爱用，可以用来枚举对象的属性，但实际上，经分析测试，在众多的循环遍历方式中
它的效率是最低的
- 遍历数组
var arr = [2,3,4]
for (var i in arr) {
console.log(arr[i]);//2 3 4
}
- 遍历对象
var obj = {name:"xiaoming",
age:"18"
}
for (var prop in obj) {
console.log(prop); // name age
}
for (var prop in obj) {
console.log(obj[prop]); // xiaoming 18
}
- 遍历字符串
var str = "循环遍历字符串";
for(var i in str){
console.log(i+"~"+str[i]);
}
//0~循
1~环
2~遍
3~历
4~字
5~符
6~串
三、 forEach 循环(不能遍历字符串、对象)
- 遍历数组
var arr = [1,2,3,4,5];
arr.forEach(function(e){
console.log(e); //1 2 3 4 5
})
var arr = [3,4,5];
arr.forEach(function(ele,index,arr){
console.log(ele+'~'+index); //3 ~ 0 4~1 5~2
console.log(arr[index]); // 3 4 5
});
数组自带的foreach循环，使用频率较高，实际上性能比普通for循环弱
- forEach遍历字符串 不能使用
- forEach遍历对象 不能使用
四、 for..of..循环 (需要ES6支持,且不能遍历对象)
- 遍历数组
var str = [2,3,4,5];
for (var ele of str) {
console.log(ele); // 2 3 4 5
}
- 遍历对象 不能遍历，需要实现Symbol.interator接口
- 遍历字符串
var str = "循环遍历字符串";
for (var ele of str) {
console.log(ele);// 循 环 遍 历 字 符 串
}
这种方式是es6里面用到的，性能要好于forin，但仍然比不上普通for循环
ps：个人感觉数组的用法和forEach挺相似，都是操作数组的元素
五、map
- 遍历数组
function pow(x) {
return x * x;
}
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var results = arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]
console.log(results);
map是操作每一个arr的元素，如上例子中对数组的每一个元素执行pow方法。最后的结果仍是数组。
这种方式也是用的比较广泛的，虽然用起来比较优雅，但实际效率还比不上foreach
图文无直接关系
推荐阅读
