JavaScript配列のイテレーション
- 前のページ JS 配列ソート
- 次のページ JS 配列 Const
配列イテレーションメソッドは各配列要素に対して操作を行います。
Array.forEach()
forEach() メソッドは各配列要素に対して一度関数を呼び出します（コールバック関数）。
例
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value, index, array) {
txt = txt + value + "<br>";
}
注記：この関数は3つの引数を受け取ります：
- 項目値
- 項目索引
- 配列自体
上記の例ではvalueパラメータのみを使用しました。この例は以下のように書き換えられます：
例
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value) {
txt = txt + value + "<br>";
}
すべてのブラウザがサポートしています Array.forEach()、Internet Explorer 8 またはそれ以前のバージョンを除いて：
| はい | 9.0 | はい | はい | はい |
Array.map()
map() メソッドは配列の各要素に対して関数を実行し、新しい配列を作成します。
map() メソッドは値を持たない配列要素に対して関数を実行しません。
map() メソッドは元の配列を変更しません。
この例では、各配列値を2倍にします：
例
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value, index, array) {
return value * 2;
}
この関数には3つの引数があります：
- 項目値
- 項目索引
- 配列自体
コールバック関数がvalueパラメータのみを使用する場合、インデックスと配列パラメータを省略できます：
例
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value) {
return value * 2;
}
すべてのブラウザがサポートしています Array.map()、Internet Explorer 8 またはそれ以前のバージョンを除いて：
| はい | 9.0 | はい | はい | はい |
Array.filter()
filter() メソッドはテストを通過した配列要素を含む新しい配列を作成します。
この例では、値が18以上の要素を使用して新しい配列を作成します：
例
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
この関数は 3 つのパラメータを受け取ります：
- 項目値
- 項目索引
- 配列自体
上記の例では、コールバック関数はindexとarrayパラメータを使用しないため、省略できます：
例
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value) {
return value > 18;
}
すべてのブラウザがサポートしています Array.filter()、Internet Explorer 8 またはそれ以前のバージョンを除いて：
| はい | 9.0 | はい | はい | はい |
Array.reduce()
reduce() メソッドは配列の各要素に関数を実行し、単一の値を生成（減少させる）します。
reduce() メソッドは配列内で左から右に動作します。reduceRight()も参照してください。
reduce() メソッドは元の配列を減少させません。
この例では、配列内のすべての数字の合計を確定します：
例
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value, index, array) {
return total + value;
}
この関数は4つの引数を受け取ります：
- 合計（初期値/前回返された値）
- 項目値
- 項目索引
- 配列自体
前例では、indexとarrayパラメータを使用していません。以下のように書き換えることができます：
例
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value) {
return total + value;
}
reduce() メソッドは初期値を受け取ることができます：
例
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction, 100);
function myFunction(total, value) {
return total + value;
}
すべてのブラウザがサポートしています Array.reduce()、Internet Explorer 8 またはそれ以前のバージョンを除いて：
| はい | 9.0 | はい | はい | はい |
Array.reduceRight()
reduceRight() メソッドは配列の各要素に関数を実行し、単一の値を生成（減少させる）します。
reduceRight() メソッドは配列内で右から左に動作します。reduce()も参照してください。
reduceRight() メソッドは元の配列を減少させません。
この例では、配列内のすべての数字の合計を確定します：
例
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value, index, array) {
return total + value;
}
この関数は4つの引数を受け取ります：
- 合計（初期値/前回返された値）
- 項目値
- 項目索引
- 配列自体
前例では、indexとarrayパラメータを使用していません。以下のように書き換えることができます：
例
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
return total + value;
}
すべてのブラウザがサポートしています Array.reduceRight()、Internet Explorer 8 またはそれ以前のバージョンを除いて：
| はい | 9.0 | はい | はい | はい |
Array.every()
every() メソッドは配列のすべての値がテストを通過するかどうかをチェックします。
この例では、配列のすべての値が18より大きいかどうかをチェックしています：
例
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
この関数は 3 つのパラメータを受け取ります：
- 項目値
- 項目索引
- 配列自体
コールバック関数が最初の引数（値）のみを使用する場合、他の引数は省略できます：
例
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
function myFunction(value) {
return value > 18;
}
すべてのブラウザがサポートしています Array.every()、Internet Explorer 8 またはそれ以前のバージョンを除いて：
| はい | 9.0 | はい | はい | はい |
Array.some()
some() メソッドは配列の値の一部がテストを通過するかどうかをチェックします。
この例では、配列の値の一部が18より大きいかどうかをチェックしています：
例
var numbers = [45, 4, 9, 16, 25];
var someOver18 = numbers.some(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
この関数は 3 つのパラメータを受け取ります：
- 項目値
- 項目索引
- 配列自体
すべてのブラウザがサポートしています Array.some()、Internet Explorer 8 またはそれ以前のバージョンを除いて：
| はい | 9.0 | はい | はい | はい |
Array.indexOf()
indexOf() メソッドは配列内で要素の値を検索し、その位置を返します。
注記：最初の項目の場所は0、2番目の項目の場所は1、それ以此類推です。
例
配列内の「Apple」項目を検索：
var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
すべてのブラウザがサポートしています Array.indexOf()、Internet Explorer 8 またはそれ以前のバージョンを除いて：
| はい | 9.0 | はい | はい | はい |
文法
array.indexOf(item, start)
| item | 必須。検索する項目。 |
| start | オプション。検索を開始する場所。 |
項目が未找到の場合、Array.indexOf() 未找到項目の場合、-1を返します。
項目が複数回出现する場合、最初に出现した位置を返します。
Array.lastIndexOf()
Array.lastIndexOf() および Array.indexOf() 同様ですが、配列の終わりから検索を開始します。
例
配列内の「Apple」項目を検索：
var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");
すべてのブラウザがサポートしています Array.lastIndexOf()、Internet Explorer 8 またはそれ以前のバージョンを除いて：
| はい | 9.0 | はい | はい | はい |
文法
array.lastIndexOf(item, start)
| item | 必須。検索する項目。 |
| start | オプション。検索を開始する場所。負の値は、終わりから始まる指定された位置から開始し、先頭にまで検索します。 |
Array.find()
find() このメソッドは、テスト関数を通じてテストされた最初の配列要素の値を返します。
この例では、18 より大きな最初の要素の値（返します）：
例
var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
この関数は 3 つのパラメータを受け取ります：
- 項目値
- 項目索引
- 配列自体
古いブラウザはサポートしていません Array.find()以下は、このメソッドを完全にサポートする最初のブラウザバージョンを示します：
| 45 | 12 | 25 | 8 | 32 |
Array.findIndex()
findIndex() このメソッドは、テスト関数を通じてテストされた最初の配列要素のインデックスを返します。
この例では、18 より大きな最初の要素のインデックスを検索します：
例
var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
この関数は 3 つのパラメータを受け取ります：
- 項目値
- 項目索引
- 配列自体
古いブラウザはサポートしていません Array.findIndex()以下は、このメソッドを完全にサポートする最初のブラウザバージョンを示します：
| 45 | 12 | 25 | 8 | 32 |
- 前のページ JS 配列ソート
- 次のページ JS 配列 Const
