ホームページ > 記事 > ウェブフロントエンド > JS_javascript スキルのEach、$.each、およびmapメソッドに推奨
forEach は、ECMA5 の新しい Array メソッドの中で最も基本的なもので、トラバーサルとループです。たとえば、次の例:
[1, 2,3, 4].forEach(alert);
次の for ループと同等
var array = [1, 2, 3, 4]; for (var k = 0, length = array.length; k < length; k++) { alert(array[k]); }
配列 ES5 の新しいメソッドでは、パラメータはすべて関数型であり、forEach メソッドの関数コールバックは 3 つのパラメータをサポートします。対応する配列のインデックス。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(); 基本的な使用法は 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]
if (typeof Array.prototype.forEach != "function") { Array.prototype.forEach = function() { /* 实现 */ }; }