js常见几种遍历

以数组为例，JavaScript 提供多种遍历语法。最原始的写法就是for循环。

var arr = [1, 2, 3];
for (var i= 0; index < arr.length; i++) { // i指数组下标
  console.log(arr[i]); // 1,2,3
  console.log(i); // 0,1,2
}

可以使用临时变量将数组长度存起来，避免重复获取数组长度。

var arr = [1, 2, 3];
var len = arr.length;
for (var i= 0; index < len; i++) {
  console.log(arr[i]); // 1,2,3
}

//或者
var arr = [1, 2, 3];
for (var i= 0,len = arr.length; index < len; i++) {
  console.log(arr[i]);  // 1,2,3
}

这一类型的for循环可以通过用break来中断循环

var arr = [1,2,3];
for (var i= 0; index < arr.length; i++) {
	if(i==1){
		break;
	}
 	console.log(i);// 0,1,2
}

最原始的for循环写法比较麻烦，因此数组提供内置的forEach方法。

var arr = [1, 2, 3, 4];
arr.forEach(function (value，index) {
	// value是值，index指数组下标
 	console.log(value); // 1,2,3,4 
 	console.log(index); // 0,1,2,3
});

注：forEach方法无法中途跳出forEach循环，break命令或return命令都不能奏效。forEach循环不能遍历字符串、对象。

for…in循环可以遍历数组的键名。

var arr = [1, 2, 3];
for (var i in arr) {
  console.log(i); // 0,1,2
}

for…in循环有几个缺点：
1、数组的键名是数字，但是for…in循环是以字符串作为键名“0”、“1”、“2”等等。
2、for…in循环不仅遍历数字键名，还会遍历手动添加的其他键，甚至包括原型链上的键。
3、某些情况下，for…in循环会以任意顺序遍历键名。
4、for…in遍历会改变原数据顺序。
5、不可遍历不能遍历 Set、Map。
总之，for…in循环主要是为遍历对象而设计的，不适用于遍历数组。

for…of循环相比上面几种做法，有一些显著的优点。

var arr = [1, 2, 3];
for (let value of arr) {
  console.log(value);  // 1,2,3
}

优点：
1、有着同for…in一样的简洁语法，但是没有for…in那些缺点。
2、不同于forEach方法，它可以与break、continue和return配合使用。
3、提供了遍历所有数据结构的统一操作接口，即for…of循环不仅支持数组、大多数伪数组对象，也支持字符串遍历，此外还支持 Map 和 Set 对象遍历。

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

var arr = [1, 2, 3];
arr.map(item => { // item为数组的元素
    console.log(item); // 1, 2, 3
    return item * 2; // 返回一个处理过的新数组[2, 4, 6]
})

注：map() 方法按照原始数组元素顺序依次处理元素。这种方式用的比较广泛，虽然用起来比较优雅，但实际效率还比不上forEach循环。