js各种循环的用法与区别

1.for循环

适合于数组的循环,性能一般，还有优化的空间

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

2.for key in 循环 与 for value of

适合json对象的循环

for（var key in obj）{
  // key 键，obj代表每个对象，obj[key]代表相对应的值
} 
for（var value of obj）{
  // value代表键，obj代表每个对象
} 

let aArray = ['a',123,{a:'1',b:'2'}]
for(let key in aArray){
    console.log(key); //返回 0 1 2
}
for(var value of aArray){
    console.log(value); a 123 {a:'1',b:'2'}
}

以上2者区别：

①推荐在循环对象属性的时候，使用for...in,在遍历数组的时候的时候使用for...of。
②for...in循环出的是key，for...of循环出的是value
③注意，for...of是ES6新引入的特性。修复了ES5引入的for...in的不足
④for...of不能循环普通的对象，需要通过和Object.keys()搭配使用,可终止循环

3.foreach

属于ES5的语法，能够同时获取到key value 数组本身
不能用break,continue语句跳出循环,不能跳过或者终止循环
不能函数内使用return语句

let array = ['a','b','c']
array.forEach((currentValue, index, arr)=>{
  console.log(currentValue); // a b c  必选参数
  console.log(index); //0 1 2 可选参数
  console.log(arr); // abc abc abc 可选参数
})

4.map()

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

array.map(function(currentValue,index,arr){
   console.log(currentValue); // a b c  必选参数
  console.log(index); //0 1 2 可选参数
  console.log(arr); // abc abc abc 可选参数
})

以上2者区别：

①map有返回值返回新数组，forEach没有，forEach()允许callback更改原始数组的元素。map()返回新的数组。
②forEach适合于你并不打算改变数据的时候，而只是想用数据做一些事情 – 比如存入数据库或则打印出来。
③map()适用于你要改变数据值的时候。不仅仅在于它更快，而且返回一个新的数组。这样的优点在于你可以使用复合(composition)(map(), filter(), reduce()等组合使用)来玩出更多的花样。
④map的性能优于forEach，快将近70%

5.jquery 中的each

$(selector).each(function(index,element){
  //都是必须的参数
  //index - 选择器的 index 位置
  //element - 当前的元素（也可使用 "this" 选择器）
})

6.filter

filter为“过滤”、“筛选”之意。指数组filter后，返回过滤后的新数组。用法跟map极为相似：
filter的callback函数需要返回布尔值true或false

var arr = [
  {"name":"apple", "count": 2},
  {"name":"orange", "count": 5},
  {"name":"pear", "count": 3},
  {"name":"orange", "count": 16},
];
var newArr = arr.filter((value,index,arr)=>{
  // value 当前元素的值 例如 {"name":"apple", "count": 2}
  // index 0 1 2 等
  // arr 整个数组
  return value.name === "orange"; //返回2个name是orange的数组
});

另外还有一些 reduce,some,every等不常用的方法，
有兴趣可以查阅相应的api了解。