Home > Web Front-end > JS Tutorial > body text

Detailed explanation of forEach in Javascript array loop traversal

高洛峰
Release: 2016-12-07 14:15:23
Original
861 people have browsed it

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>
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

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++;
    }
  };
}
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 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>
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, 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;
});
Copy after login


Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template