Javascript 配列ループトラバーサルの forEach の詳細な説明-jsチュートリアル-php.cn

Javascript 配列ループトラバーサルの forEach の詳細な説明

高洛峰

リリース： 2016-12-07 14:15:23

オリジナル

861 人が閲覧しました

1.js 配列ループトラバーサル。

配列ループ変数というと、最初に思い浮かぶのは for(var i=0;i

さらに、より単純な forEach メソッド

2.forEach 関数を使用することもできます。

FirefoxとChromeのArray型にはforEach関数があります。次のように使用します:

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

ログイン後にコピー

ただし、上記のコードは IE では正しく動作しません。

IEのArrayにはこのメソッドがないからです

alert(Array.prototype.forEach);

ログイン後にコピー

上記の文を実行すると「未定義」となり、IEにはArrayにforEachメソッドがないことを意味します。

3. IE を forEach メソッドと互換性のあるものにする

IE の Array には forEach メソッドがないため、このプロトタイプメソッドを手動で追加します。

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

ログイン後にコピー

詳細な紹介については、以下を参照してください:
https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/forEach

4. ループから抜け出す方法は?

Js この状況では、forEach は、次の 2 つのメソッドを使用できます:

1. if ステートメント制御

2. return ステートメント制御 (return true または return false)

、return も同様です continue の役割

次の例は、配列内の 2 と 3 の倍数を取り出すことです。

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

ログイン後にコピー

上記の効果を達成するには return を使用します

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

ログイン後にコピー

としてブレークに似たエフェクトの書き方については、現時点ではこれより良い方法が見つかっていません。

個人的な意見: Java であっても C# 構文であっても、forEach はすべての値を走査することです

検索したところ、return false が実現できると書かれていたので試してみましたが、return false の効果は同じでした。 return と同じです。return true も同じです。
以下のテストコードは私が追加したものです。

りー