浅谈js中的for、for...in、for...of、forEach及map等常用遍历方法

1.最常用的（最标准的）for循环：

语法：for(var i = 0; i < arr.length; i++){}
举例子：
var n = [];
console.time('for');    //计时器开始
for(var i = 0; i < 100000; i++){
  n.push(i+1);
}
console.timeEnd('for');   //计时器结束
打印结果：
for:7.921ms

优化后的for循环：

for(var i = 0, len = arr.length; i < len; i++){}

2.for in 遍历对象：循环遍历对象的key值

一般不建议使用for in来遍历数组。因为for in遍历后的顺序不能保证，并且原型链上的属性也会被遍历到。举例子如下：

语法：for(var index in arr){ do something }
参数说明： index：当前元素的下标，即键值key，为string类型
举例子：
var arr = [1,2,3,4];
arr.comp = 'compare';  //我们给arr添加comp属性
for(var index in arr){
 console.log(index);  //打印出key值
}
打印出结果：
// "1"
// "2"
// "3"
// "4"
// "comp"  这是我们给arr新添加的属性，也会遍历出来
【总结】：for in 效率较低，强烈建议不要使用for in遍历数组

3.for of 遍历对象：循环遍历对象的value值

语法：for(var value of arr){ do something }
参数说明： value：当前元素
举例子：
var arr = [11,22,33,44];
arr.desc = 'desc';   //我们给arr添加desc属性
for(var value of arr){
 console.log(value);  //打印出value值
}
打印出结果：
// 11
// 22
// 33
// 44

该方法避开了for in循环的不足之处，是最简洁的遍历数组元素的方法。

4.forEach 遍历数组：

forEach()方法的定义，个人理解为：将数组的元素依次传入函数体进行运算。

forEach方法没有返回值

语法：arr.forEach(function(value,index,arr){ do something })
参数说明：(支持3个参数)
  value：当前元素
  index：当前元素的索引
  arr：原始数组
【注意】:
(1) forEach()方法没有返回值
(2) 匿名函数找那个的this，指全局window对象
举例子：
var sum=0;
var str=arr.forEach(function(item,index,arr){
   sum+=item;
   console.log("sum的值是："+sum);
})
打印出结果：
// sum的值是：1
// sum的值是：3
// sum的值是：6

5.map()方法：

map：'映射'，可以解读为：将一个数组映射为另一个新的数组。
根据map方法的定义，个人的理解是：将原数组元素按顺序处理后，返回一个新的数组。

map()方法有返回值

语法：
arr.map(function(item,index,arr){ do something })
参数说明：(支持3个参数)
  item：当前元素
  index：当前元素的索引
  arr：原始数组
【注意】:
(1) 原数组值不会发生改变
(2) map()方法有返回值，会返回一个新数组
(3) 元素按照原始顺序进行处理
(4) map()不会对空数组进行检测
(5) 匿名函数中的this指的是全局window对象。
举例子：
var arr = [1,2,3];
var arr2 = arr.map(function(item,index,arr){
  return item*2
})
console.log('原数组arr',arr);
console.log('新数组arr2',arr2);
打印出结果:
// 原数组arr,[1,2,3]
// 新数组arr2,[2,4,6]