ホームページ > 記事 > ウェブフロントエンド > Javascript 配列ループトラバーサルの forEach の詳細な説明
Javascript 配列ループトラバーサルの forEach の詳細な説明
- 高洛峰オリジナル
- 2016-12-07 14:15:23826ブラウズ
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 も同じです。
以下のテストコードは私が追加したものです。