blog js各种遍历总结(2017.11.19)

一、普通for循环 (只能遍历数组和字符串)

可以break停止循环，可以读写。但是用return 需要外面套一层函数, 如图。

遍历数组

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];
var len = arr.length;
for(var i = 0; 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..循环（可以遍历字符串、对象、数组）

这个循环很多人爱用，可以用来枚举对象的属性，但实际上，经分析测试，在众多的循环遍历方式中，它的效率是最低的(但在枚举对象属性上性能最好 via @liby的comment)，所以一般枚举对象的属性的时候用它

遍历数组

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 循环(不能遍历字符串、对象)

不能break停止循环，可以读写。

没有办法中止或者跳出 forEach() 循环，除了抛出一个异常。如果你需要这样，使用 forEach() 方法是错误的。

若你需要提前终止循环，你可以使用：

简单循环 for...of 循环 Array.prototype.every() Array.prototype.some() Array.prototype.find() Array.prototype.findIndex()

遍历数组

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支持,且不能遍历对象)

对于for...of的循环，可以由break, throw continue 或return终止，但只读不能写。

遍历数组

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);//  循  环  遍  历  字  符  串
}

在数组的用法和forEach挺相似，都是操作数组的元素

打断一下，如果要用forEach 和 for of 遍历对象咋整？

不能直接遍历对象，但是可以结合Object.entries获取index

const object1 = {
  a: 'somestring',
  b: 42
};

for (const [key, value] of Object.entries(object1)) {
  console.log(`${key}: ${value}`);
}

Object.entries(object1).forEach(([key, value]) => {
    console.log(`${key}: ${value}`);
})

实际上也是通过 Object.entries去把对象{key, value} 转成[[key, value]], 实际上操作的还是数组

五、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方法(需要是个有return的function)。最后的结果仍是数组。这种方式也是用的比较广泛的，虽然用起来比较优雅，但实际效率还比不上foreach