JavaScriptのforEach、$.each、mapメソッドの詳細説明

前回の記事では、PHPのforeachステートメントの詳細な説明と、foreachとeachの使い方を紹介しましたので、今日はorEach、$.eachの詳細な説明を紹介します。 、そして JS のマップメソッド!

forEach は、ECMA5 の新しい Array メソッドの中で最も基本的なもので、トラバーサルとループです。たとえば、次の例:

[1, 2 ,3, 4].forEach(alert);

は、次の forloop

var array = [1, 2, 3, 4];
for (var k = 0, length = array.length; k < length; k++) {
 alert(array[k]);
}

Array と同等です。ES5 の新しいメソッドでは、パラメータはすべて関数型であり、パラメータはデフォルトで関数コールバックに渡されます。 forEach メソッドは 3 つのパラメータをサポートし、最初のパラメータは走査される配列の内容、2 番目のパラメータは対応する配列インデックス、3 番目のパラメータは配列自体です。

それで、次のようになります:

[].forEach(function(value, index, array) {
  // ...
});

jQuery の $.each メソッドを比較してください:

$.each([], function(index, value, array) {
  // ...
});

最初と 2 番目のパラメーターはまったく逆であることがわかります。誰もが注意して覚えてはいけません。間違っている。 。 $.map など、後の同様のメソッドにも同じことが当てはまります。

var data=[1,3,4] ; 
var sum=0 ;
data.forEach(function(val,index,arr){
  console.log(arr[index]==val);  // ==> true
  sum+=val            
})
console.log(sum);          // ==> 8

map

ここでいう地図とは「地図」ではなく「地図」のことです。 [].map(); 基本的な使い方は forEach メソッドと似ています:

array.map(callback,[ thisObject]);

コールバックのパラメータも似ています:

[].map(function(value, index, array) {
  // ...
});

map メソッドの機能は「マッピング」です。つまり、元の配列が対応する新しい配列に「マッピング」されます。次の例は、数値項目の 2 乗を求める例です:

var data=[1,3,4]

var Squares=data.map(function(val,index,arr){
  console.log(arr[index]==val);  // ==> true
  return val*val           
})
console.log(Squares);        // ==> [1, 9, 16]

注: forEach と map は ECMA5 の新しい配列メソッドであるため、ie9 以下のブラウザーはまだサポートしていません (最悪の IE)。ただし、Array プロトタイプは使用できます。拡張機能は、forEach メソッドなど、上記のすべての関数を実現できます:

if (typeof Array.prototype.forEach != "function") {
  Array.prototype.forEach = function() {
    /* 实现 */
  };
}

概要:

この記事では、JavaScript の forEach、$.each、map メソッドを詳しく紹介します。それらの使用法は基本的に似ています。 、ニーズに合わせて選択できます！
関連する推奨事項:

JS の foreach と each の簡単な紹介

JavaScript の Foreach 構文の詳細な説明

の使用例JavaScript の FOREACH 配列メソッド

以上がJavaScriptのforEach、$.each、mapメソッドの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。