JS迴圈遍歷方法總結

常用的迴圈遍歷方法

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

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

 item: 元素
index: 元素索引
  arr: 陣列本身複製程式碼

  [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, …}複製程式碼

  [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複製程式碼

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：水平有限，如有錯誤，望指出。