Javascript array loop traversal (forEach detailed explanation)-JS Tutorial-php.cn

Javascript array loop traversal (forEach detailed explanation)

亚连

Release： 2018-05-19 14:17:08

Original

9115 people have browsed it

This article mainly introduces the detailed explanation of forEach in Javascript array loop traversal. It is very helpful for learning forEach. If you need it, you can learn more.

1.js array loop traversal.

Array loop variables, the first thing that comes to mind is for(var i=0;i

In addition, you can also use the simpler forEach method

2.forEach function.

The Array types of Firefox and Chrome both have forEach functions. Use the following:

<!--Add by oscar999--> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Author" CONTENT="oscar999"> 
</HEAD> 
 
<BODY> 
<script> 
var arryAll = []; 
arryAll.push(1); 
arryAll.push(2); 
arryAll.push(3); 
arryAll.push(4); 

//匿名方式
arryAll.forEach(function(e){ 
  alert(e); 
}) 

function t1(arg){alert(arg);}
//非匿名方式
arryAll.forEach(t1,arryAll);

</script> 
</BODY> 
</HTML>

Copy after login

However, the above code does not work properly in IE.

Because IE's Array does not have this method

alert(Array.prototype.forEach);

Copy after login

When executing the above sentence, the result is "undefined", which means that in There is no forEach method in Array in IE.

3. Make IE compatible with the forEach method

Since IE’s Array does not have a forEach method, we will manually add this prototype method to it.

//Array.forEach implementation for IE support.. 
//https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/forEach 
if (!Array.prototype.forEach) { 
  Array.prototype.forEach = function(callback, thisArg) { 
    var T, k; 
    if (this == null) { 
      throw new TypeError(" this is null or not defined"); 
    } 
    var O = Object(this); 
    var len = O.length >>> 0; // Hack to convert O.length to a UInt32 
    if ({}.toString.call(callback) != "[object Function]") { 
      throw new TypeError(callback + " is not a function"); 
    } 
    if (thisArg) { 
      T = thisArg; 
    } 
    k = 0; 
    while (k < len) { 
      var kValue; 
      if (k in O) { 
        kValue = O[k]; 
        callback.call(T, kValue, k, O); 
      } 
      k++; 
    } 
  }; 
}

Copy after login

For detailed introduction, please refer to:
https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/ forEach

#4. How to break out of the loop?

Js ForEach in this situation cannot use continue, break; You can use the following two methods:

1. if statement control

2. Return statement control (return true or return false)

In fact, return has a similar function to continue

The following An example is to take out the multiples of 2 and 3 in the array;

<!--Add by oscar999--> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Author" CONTENT="oscar999"> 
</HEAD> 
 
<BODY> 
<script> 
if (!Array.prototype.forEach) { 
  Array.prototype.forEach = function(callback, thisArg) { 
    var T, k; 
    if (this == null) { 
      throw new TypeError(" this is null or not defined"); 
    } 
    var O = Object(this); 
    var len = O.length >>> 0; // Hack to convert O.length to a UInt32 
    if ({}.toString.call(callback) != "[object Function]") { 
      throw new TypeError(callback + " is not a function"); 
    } 
    if (thisArg) { 
      T = thisArg; 
    } 
    k = 0; 
    while (k < len) { 
      var kValue; 
      if (k in O) { 
        kValue = O[k]; 
        callback.call(T, kValue, k, O); 
      } 
      k++; 
    } 
  }; 
} 
 
var arryAll = []; 
arryAll.push(1); 
arryAll.push(2); 
arryAll.push(3); 
arryAll.push(4); 
arryAll.push(5);
arryAll.push(6); 
arryAll.push(7); 
 
 
var arrySpecial = []; 
 
arryAll.forEach(function(e){ 
  if(e%2==0) 
  { 
    arrySpecial.push(e); 
  }else if(e%3==0) 
  { 
    arrySpecial.push(e); 
  } 
}) 
 
</script> 
</BODY> 
</HTML>

Copy after login

Use return to achieve the above effect

arryAll.forEach(function(e){ 
  if(e%2==0) 
  { www.jb51.net
    arrySpecial.push(e); 
    return; 
  } 
  if(e%3==0) 
  {   
    arrySpecial.push(e); 
    return; 
  } 
})

Copy after login

As for how to write an effect similar to break, a better way has not yet been found.

Personal opinion: Whether it is java or C# syntax, forEach is to traverse all values

I searched and some said that return false can be achieved. I gave it a try , the effect of return false is the same as return, and the effect of return true is the same.
The following test code was added by myself.

var arryAll = []; 
arryAll.push(1); 
arryAll.push(2); 
arryAll.push(3); 
arryAll.push(4); 
arryAll.push(5);
arryAll.push(6);
arryAll.push(7);

arryAll.forEach(function(e){
alert(e);
if(e>3)
return false;
});

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

js code for traversing the properties of objects_javascript skills

js Detailed explanation of DOM instance traversal

js code for traversing the properties of objects

The above is the detailed content of Javascript array loop traversal (forEach detailed explanation). For more information, please follow other related articles on the PHP Chinese website!