Home > Article > Web Front-end > Javascript array loop traversal (forEach detailed explanation)

Javascript array loop traversal (forEach detailed explanation)

亚连Original: 2018-05-19 14:17:089183browse

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>

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

Because IE's Array does not have this method

alert(Array.prototype.forEach);

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++; 
    } 
  }; 
}

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>

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; 
  } 
})

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;
});

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：js in-depth understanding of closures (code attached)Next article：js in-depth understanding of closures (code attached)

See more

Javascript array loop traversal (forEach detailed explanation)

Related articles