JavaScript配列の反復
配列反復法は、すべての配列項目で機能します。
JavaScript配列forEach（）
このforEach()メソッドは、配列要素ごとに1回関数（コールバック関数）を呼び出します。
例
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value, index, array) {
txt += value + "<br>";
}
関数は3つの引数を取ることに注意してください。
- アイテムの値
- アイテムインデックス
- アレイ自体
上記の例では、valueパラメーターのみを使用しています。この例は次のように書き直すことができます。
例
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value) {
txt += value + "<br>";
}
JavaScript配列map（）
このmap()メソッドは、各配列要素に対して関数を実行することにより、新しい配列を作成します。
このmap()メソッドは、値のない配列要素に対して関数を実行しません。
このmap()メソッドは元の配列を変更しません。
この例では、各配列値に2を掛けます。
例
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
function myFunction(value, index, array) {
return value * 2;
}
関数は3つの引数を取ることに注意してください。
- アイテムの値
- アイテムインデックス
- アレイ自体
コールバック関数が値パラメーターのみを使用する場合、インデックスパラメーターと配列パラメーターは省略できます。
例
const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);
function myFunction(value) {
return value * 2;
}
JavaScript配列filter（）
このfilter()メソッドは、テストに合格した配列要素を含む新しい配列を作成します。
この例では、値が18より大きい要素から新しい配列を作成します。
例
const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
関数は3つの引数を取ることに注意してください。
- アイテムの値
- アイテムインデックス
- アレイ自体
上記の例では、コールバック関数はインデックスと配列のパラメーターを使用しないため、省略できます。
例
const numbers = [45, 4, 9, 16, 25];
const over18 =
numbers.filter(myFunction);
function myFunction(value) {
return value > 18;
}
JavaScript配列reduce（）
このreduce()メソッドは、各配列要素に対して関数を実行して、単一の値を生成（縮小）します。
このreduce()メソッドは、配列内で左から右に機能します。も参照してくださいreduceRight()。
このreduce()メソッドは元の配列を縮小しません。
この例では、配列内のすべての数値の合計を求めます。
例
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
function myFunction(total, value, index, array) {
return total + value;
}
関数は4つの引数を取ることに注意してください。
- 合計（初期値/以前の戻り値）
- アイテムの値
- アイテムインデックス
- アレイ自体
上記の例では、インデックスパラメータと配列パラメータを使用していません。次のように書き直すことができます。
例
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);
function myFunction(total, value) {
return total + value;
}
メソッドはreduce()初期値を受け入れることができます：
例
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction,
100);
function myFunction(total, value) {
return total + value;
}
JavaScript配列reduceRight（）
このreduceRight()メソッドは、各配列要素に対して関数を実行して、単一の値を生成（縮小）します。
reduceRight()配列内で右から左に動作します。も参照してくださいreduce()。
このreduceRight()メソッドは元の配列を縮小しません。
この例では、配列内のすべての数値の合計を求めます。
例
const numbers = [45, 4, 9, 16, 25];
let sum = numbers1.reduceRight(myFunction);
function myFunction(total, value, index, array) {
return total + value;
}
関数は4つの引数を取ることに注意してください。
- 合計（初期値/以前の戻り値）
- アイテムの値
- アイテムインデックス
- アレイ自体
上記の例では、インデックスパラメータと配列パラメータを使用していません。次のように書き直すことができます。
例
const numbers = [45, 4, 9, 16, 25];
let sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
return total + value;
}
JavaScript配列every（）
このevery()メソッドは、すべての配列値がテストに合格するかどうかをチェックします。
この例では、すべての配列値が18より大きいかどうかを確認します。
例
const numbers = [45, 4, 9, 16, 25];
let allOver18 =
numbers.every(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
関数は3つの引数を取ることに注意してください。
- アイテムの値
- アイテムインデックス
- アレイ自体
コールバック関数が最初のパラメーター（値）のみを使用する場合、他のパラメーターは省略できます。
例
const numbers = [45, 4, 9, 16, 25];
let allOver18 =
numbers.every(myFunction);
function myFunction(value) {
return
value > 18;
}
JavaScript配列some（）
このsome()メソッドは、いくつかの配列値がテストに合格するかどうかをチェックします。
この例では、一部の配列値が18より大きいかどうかを確認します。
例
const numbers = [45, 4, 9, 16, 25];
let someOver18 = numbers.some(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
関数は3つの引数を取ることに注意してください。
- アイテムの値
- アイテムインデックス
- アレイ自体
JavaScript配列indexOf（）
このindexOf()メソッドは、配列で要素値を検索し、その位置を返します。
注：最初の項目の位置は0、2番目の項目の位置は1というように続きます。
例
配列でアイテム「Apple」を検索します。
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.indexOf("Apple") + 1;
構文
array.indexOf(item, start)
| item | Required. The item to search for. |
| start | Optional. Where to start the search. Negative values will start at the given position counting from the end, and search to the end. |
Array.indexOf() アイテムが見つからない場合は-1を返します。
アイテムが複数回存在する場合、最初に出現した位置を返します。
JavaScript配列lastIndexOf（）
Array.lastIndexOf()と同じですArray.indexOf()が、指定された要素の最後の出現位置を返します。
例
配列でアイテム「Apple」を検索します。
const fruits = ["Apple", "Orange", "Apple", "Mango"];
let position = fruits.lastIndexOf("Apple") + 1;
構文
array.lastIndexOf(item, start)
| item | Required. The item to search for |
| start | Optional. Where to start the search. Negative values will start at the given position counting from the end, and search to the beginning |
JavaScript配列find（）
このfind()メソッドは、テスト関数に合格した最初の配列要素の値を返します。
この例では、18より大きい最初の要素を検索（の値を返します）します。
例
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.find(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
関数は3つの引数を取ることに注意してください。
- アイテムの値
- アイテムインデックス
- アレイ自体
ブラウザのサポート
find()ES6の機能（JavaScript 2015）です。
最新のすべてのブラウザでサポートされています。
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
find()InternetExplorerではサポートされていません。
JavaScript配列findIndex（）
このfindIndex()メソッドは、テスト関数に合格した最初の配列要素のインデックスを返します。
この例では、18より大きい最初の要素のインデックスを検索します。
例
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
関数は3つの引数を取ることに注意してください。
- アイテムの値
- アイテムインデックス
- アレイ自体
ブラウザのサポート
findIndex()ES6の機能（JavaScript 2015）です。
最新のすべてのブラウザでサポートされています。
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
findIndex()InternetExplorerではサポートされていません。
JavaScript Array.from（）
このArray.from()メソッドは、lengthプロパティを持つ任意のオブジェクトまたは任意の反復可能なオブジェクトからArrayオブジェクトを返します。
例
文字列から配列を作成します。
Array.from("ABCDEFG");
ブラウザのサポート
from()ES6の機能（JavaScript 2015）です。
最新のすべてのブラウザでサポートされています。
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
from()InternetExplorerではサポートされていません。
JavaScript配列キー（）
このArray.keys()メソッドは、配列のキーを含むArrayIteratorオブジェクトを返します。
例
Create an Array Iterator object, containing the keys of the array:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
for (let x of keys) {
text += x + "<br>";
}
Browser Support
keys() is an ES6 feature (JavaScript 2015).
It is supported in all modern browsers:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
keys() is not supported in Internet Explorer.
JavaScript Array includes()
ECMAScript 2016 introduced Array.includes() to arrays.
This allows us to check if an element is present in an array (including NaN, unlike indexOf).
Example
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.includes("Mango"); // is true
Syntax
array.includes(search-item)
Array.includes() allows to check for NaN values. Unlike Array.indexOf().
Array.includes() is not supported in Internet Explorer and Edge 12/13.
The first browser versions with full support are:
Browser Support
includes() is an ECMAScript 2016 feature.
It is supported in all modern browsers:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
includes() is not supported in Internet Explorer.
Complete Array Reference
For a complete Array reference, go to our:
Complete JavaScript Array Reference.
The reference contains descriptions and examples of all Array properties and methods.