JS loop traversal method summary

A common method of loop traversal

arr.forEach(function(item,index,arr){... }) arr.map(function(item,index,arr){... }) item: element index: arr: array itselfCopy the code

[1, 2]. ForEach (function(item,index,arr){console.log('This points to:',this); }) this indicates: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, } this point to: Window {ƒ : ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, } [1, 2]. The map (function(item,index,arr){console.log('This points to:',this); }) this indicates: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, } this point to: Window {ƒ : ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, }Copy the code

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

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]Copy the code

for… In () & for… Of ()

Similarities:

1. This in anonymous functions refers to window

2. Break out of the loop.

Difference:

for.. In is a new loop method in ES5.

for.. Of is a new loop method in ES6.

for.. In: Iterates over the key value of an object and accesses enumerable properties of the object. Somewhat similar to object.keys ()

var obj={a:'1',b:'2',c:'3'};
for(item inobj){ console.log(item); Var a= object.keys (obj) a=>["a"."b"."c"]

var b = Object.values(obj)
b => ["1"."2"."3"]
Copy the code

for… When in traverses an array, it returns the index of the array, which accesses the elements, and for–in returns a string!

var arr = ['a'.'b'.'c'];
for(item inarr){ console.log(item,arr[item],typeof(item)); } => 0 a string 1 b string 2 c stringCopy the code

for.. In uses break to break out of the loop.

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

=>0 a stringCopy the code

for… of:

Es6 introduces a new iterable type. Array,Map, and Set are all iterable types.

Collections that have types of Iterable can be passed through for.. Of loops over

for.. Of can be used to break a loop, and all loops can be broken. 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


Copy the code

The iterable type can also be 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 has no index, so the first two arguments to the callback function are elements themselves; 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"}Copy the code

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); // The Map callback takes value, key, and m itself. 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"}Copy the code

Break the interrupt for.. Of circulation

var a = ["A"."B"."C"];
for (var x of a){
     if(x==='B') {break; } console.log(x); } => ACopy the code

jquery–$.each()

$.each(), by the way $().each()

$().each() is more commonly used in the DOM

$("input[type='checkbox']").each(function(i){
  if($(this).attr('checked') = =true) {... }}Copy the code

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

$. Each traverses both groups of numbers and objects.

This in the anonymous function refers to the current element

1. Traverse the object

var arr= ['a'.'b'.'c'.'d'];
var a = $.each(arr,function(index,item,arr){//index: index item: element. console.log(index,item); console.log('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"] returns arR itself, even if changes are made to item. Because $.each() is a consumable function and does not care about the return value,returnIs to stop the cycle.Copy the code

In $. Each, return or return false is used to break the loop, similar to the break effect in for.

Var b = $. Each (); var b = $. Each ();function(index,item){
        if(item === 3){return false}
        console.log(item+1)
})
=>
2
3
b=>
[1, 2, 3, 4]
Copy the code

2. Traverse the object

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

=>
key: a value: item
key: b value: item
Copy the code

Conclusion:

Map (),forEach(),for.. of,$.each()

Traversal objects are often used for.. in,$.each

Only the anonymous function $.each() has this pointing to the element itself, and everything else points to the window

Map () and forEach() can only exit loops with a return, like continue

for.. in,for.. Break out of the loop

$.each() can only break out of the loop with return, like 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 )

Supplement: an interesting picture from Zhihu

Ps: the level is limited, if there is any mistake, please point out.