Home > Article > Web Front-end > Detailed explanation of forEach in Javascript array loop traversal

Detailed explanation of forEach in Javascript array loop traversal

高洛峰Original: 2016-12-07 14:15:23861browse

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 type of Firefox and Chrome both have forEach function. Use as follows:

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

Executing the above sentence will result in "undefined", which means that Array does not have a forEach method 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 In this situation, forEach 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 is similar The role of continue

The following 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, currently Haven't found a better way yet.

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

I searched, and some said return false can be achieved. I tried it, and the effect of return false is the same as return, and it is also the same as return. return true is the same.
The test code below 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;
});

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：Jquery requests NodeJS through ajax to return json data instanceNext article：Jquery requests NodeJS through ajax to return json data instance

See more

Detailed explanation of forEach in Javascript array loop traversal

Related articles