JS循环遍历方法总结

常用的循环遍历方法

1. for()循环
   
2. forEach
   
3. map()
   
4. for..in
   
5. for..of
   
6. jquery:$.each()

forEach（） & map（）

forEach(),map()是es5新增的循环遍历方法。

相同点：

1.写法相似

arr.forEach(function(item,index,arr){...})

arr.map(function(item,index,arr){...})

 item: 元素
index: 元素索引
  arr: 数组本身复制代码

2.都只能遍历数组

3.匿名函数中的this都指向window

  [1,2].forEach(function(item,index,arr){console.log('this指向：',this);})

  this指向： Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
  this指向： Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
[1,2].map(function(item,index,arr){console.log('this指向：',this);})

this指向： Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
this指向： Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}复制代码

4. 在forEach和map中，不能使用 continue 和 break ，可以使用 return 或 return false 跳出循环，效果与 for 中 continue 一样。但是即使使用return跳出循环，也不能一次结束所有循环。类似于continue。

  [1,3,4,24,5,6].forEach(function(item){if(item === 24){return;} console.log(item);})   
  =>
  1
  3
  4
  5
  6

[1,3,4,24,5,6].map(function(item){if(item === 24){return;} console.log(item);})   
=>
1
3
4
5
6复制代码

不同点：

   map()返回一个新数组，并且不会改变原数组的值.map()这类是转换型函数，需要关心返回值。

   forEach()没有返回值，也不改变原数组

   

var arr = [1,2,3,4,5];
var add = arr.map(function(item){
   return item + 1;
})
=> 
add: [2, 3, 4, 5, 6]
arr: [1, 2, 3, 4, 5]

var add2 = arr.forEach(function(item){
   return item + 1;
})
=>
add2: undefined
arr: [1, 2, 3, 4, 5]复制代码

for...in（） & for...of（）

相同点：

1.匿名函数中的this都指向window

2.都是用break来跳出循环，中断所有。

不同点：

for..in 是es5新增的循环方法 。

for..of是es6新增的循环方法。

for..in： 遍历对象的key值，访问对象的可枚举属性。有点类似于Object.keys()

var obj={a:'1',b:'2',c:'3'};
for(item in obj){
    console.log(item);
}
=>
a
b
c

补充：
var a = Object.keys(obj)
a=>["a", "b", "c"]

var b = Object.values(obj)
b => ["1", "2", "3"]
复制代码

for...in遍历数组时，返回数组的下标，可通过下标访问元素，并且for--in返回的是string类型！

var arr = ['a','b','c'];
for(item in arr){
    console.log(item,arr[item],typeof(item));          //可通过arr[item]访问元素
}
=>
0 a string
1 b string
2 c string复制代码

for..in使用break跳出循环，中断所有。

var arr = ['a','b','c'];
for(item in arr){
if(item === '1'){return}
    console.log(item,arr[item],typeof(item));        
}

=>0 a string复制代码

for...of: 

es6引入了新的iterable(迭代)类型，Array,Map,Set都属于iterable类型。

具有iterable类型的集合可以通过for..of循环来遍历

for..of可用break来中断循环，并且可中断所有循环，不能用return/return false！

var a = ["a","b","c"];
var s = new Set(["a","b","c"]);
var m = new Map([[1,"x"],[2,"y"],[3,"z"]]);

a=>
(3) ["a", "b", "c"]

s=>
Set(3) {"a", "b", "c"}

m=>
Map(3) {1 => "x", 2 => "y", 3 => "z"}

-----------------------------------------------------------
for (var item of a){
      console.log(item);
}
=>
a
b
c
------------------------------------------------------------
for (var item of s){
      console.log(item);
}
=>
a
b
c
-----------------------------------------------------------
for (var item of m){
     console.log(item[0]+ "=" + item[1]);
}
=>
1=x
2=y
3=z


复制代码

iterable类型也可以用forEach: 

Set: 

var s = new Set(["A","B","C"]);
s
=> Set(3) {"a", "b", "c"}

s.forEach((item,index,arr)=>{
    console.log('item',item);
    console.log('index',index);        //Set没有索引，因此回调函数的前两个参数都是元素本身；
    console.log('arr',arr)})               
=>
item a
index a
arr Set(3) {"a", "b", "c"}

item b
index b
arr Set(3) {"a", "b", "c"}

item c
index c
arr Set(3) {"a", "b", "c"}复制代码

Map

var m = new Map([[1,'x'],[2,'y'],[3,'z']])
m
=> Map(3) {1 => "x", 2 => "y", 3 => "z"}

m.forEach((item,index,arr)=>{
    console.log('item',item);                   //Map的回调函数参数依次是value、key和m本身。
    console.log('index',index);
    console.log('arr',arr)})
=>
item x
index 1
arr Map(3) {1 => "x", 2 => "y", 3 => "z"}

item y
index 2
arr Map(3) {1 => "x", 2 => "y", 3 => "z"}

item z
index 3
arr Map(3) {1 => "x", 2 => "y", 3 => "z"}复制代码

break中断for..of循环

var a = ["A","B","C"];
for (var x of a){
     if(x==='B'){break;} console.log(x);
}
=>
A复制代码

jquery--$.each()

说到$.each()就要顺便说一下$().each()

$().each()在dom上用的比较多

$("input[type='checkbox']").each(function(i){
  if($(this).attr('checked')==true){
    ........  }
}复制代码

$.each(function(index,item){...})

$.each即可以遍历数组，也可以遍历对象。

  匿名函数中的this指向当前元素

1.遍历对象

var arr= ['a','b','c','d'];
var a = $.each(arr,function(index,item,arr){    //index:索引 item: 元素。
      console.log(index,item);
      console.log('this',this);  //this指向当前元素
})
=>
0 'a' this String {0: "a", length: 1, [[PrimitiveValue]]: "a"}
1 'b' this String {0: "b", length: 1, [[PrimitiveValue]]: "b"}
2 'c' this String {0: "c", length: 1, [[PrimitiveValue]]: "c"}
a=>
["a", "b", "c", "d"]
 返回的是arr本身，即使对item做修改。
 因为$.each()是消费型函数，不关心返回值，return的作用就是终止循环。
复制代码

在$.each中，同样是使用 return 或 return false 跳出循环，效果类似效果与 for 中 break，结束所有循环。

var arr2 = [1,2,3,4]
var b = $.each(arr2,function(index,item){
        if(item === 3){return false}
        console.log(item+1)
})
=>
2
3
b=>
[1, 2, 3, 4]
复制代码

2.遍历对象

$.each({a:'1',b:'2'}, function(index, item){
    console.log('key:',index,'value:','item')
})

=>
key: a value: item
key: b value: item
复制代码

总结：

除for()外，遍历数组常用map(),forEach(),for..of,$.each()

遍历对象常用for..in,$.each

只有$.each()匿名函数中this指向元素本身，其他都指向window

map(),forEach()只能使用return跳出循环，只能跳出当前循环，类似continue

for..in,for..of用break跳出循环，跳出所有

$.each()只能使用return跳出循环，跳出所有，类似break

map(function(item,index,arr){})

forEach(function(item,index,arr){})

forEach(function(item,item,Set){})

forEach(function(value,key,Map))

for(item in obj){}/for(item in arr)

for(item of arr)

for(item of arr )

补充：从知乎上扒了张有意思的图

ps：水平有限，如有错误，望指出。