Widely available すべての主要ブラウザで対応済み。安心して使用可能。

概要

配列の反復処理メソッドは、ループを使わずに宣言的にデータを処理できます。map(変換)、filter(絞り込み)、reduce(集約)、forEach(副作用)、some/every(判定)が代表的です。

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
1
12
1.5
3
18
1
ビルトインオブジェクト

filter() は Array インスタンスのメソッドで、指定された配列の中から指定された関数で実装されているテストに合格した要素だけを抽出したシャローコピーを作成します。

1
12
1.5
3
18
1

forEach() メソッドは、与えられた関数を、配列の各要素に対して一度ずつ実行します。

1
12
1.5
3
18
1

indexOf() は Array インスタンスのメソッドで、引数に与えられた内容と同じ内容を持つ最初の配列要素の添字を返します。存在しない場合は -1 を返します。

1
12
1.5
3
18
1

lastIndexOf() は Array インスタンスのメソッドで、配列中で与えられた要素が見つかった最後の添字を返します。もし存在しなければ -1 を返します。配列は fromIndex から逆向きに検索されます。

1
12
1.5
3
18
1

map() は Array インスタンスのメソッドで、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。

1
12
1.5
3
18
1

reduce() は Array インターフェイスのメソッドで、配列のそれぞれの要素に対して、ユーザーが提供した「縮小」コールバック関数を呼び出します。その際、直前の要素の計算結果の返値を渡します。配列のすべての要素に対して「縮小」コールバック関数を実行した最終結果は、単一の値となります。

3
12
3
4
18
3.2

reduceRight() は Array インスタンスのメソッドで、アキュームレーターと配列のそれぞれの値に対して(右から左へ)関数を適用して、単一の値にします。

3
12
3
4
18
3.2

some() は Array インスタンスのメソッドで、指定された関数で実装されているテストに、配列の中の少なくとも 1 つの要素が合格するかどうかを判定します。配列の中で指定された関数が true を返す要素を見つけた場合は true を返し、そうでない場合は false を返します。配列は変更しません。

1
12
1.5
3
18
1
1+対応 (バージョン) 未対応 注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

JAVASCRIPT
const nums = [1, 2, 3, 4, 5];

nums.map(n => n * 2);        // [2, 4, 6, 8, 10]
nums.filter(n => n > 3);     // [4, 5]
nums.reduce((a, b) => a + b); // 15
nums.some(n => n > 4);       // true
nums.every(n => n > 0);      // true

ライブデモ

Value Convert with map

Array. eachelement 2 to newarray create..

プレビュー全画面表示

condition clip with filter

3 than bignumberonly extract..

プレビュー全画面表示

all itemscheck with every

all. Element that 0 than big or inspect it..

プレビュー全画面表示

実務での使いどころ

  • Array iteration methods の活用

    配列の反復処理メソッド群。map, filter, reduce, forEach, some, every などを提供。

注意点

  • 特になし。すべての主要ブラウザで安定して動作する。

アクセシビリティ

  • JavaScript による動的更新時は、aria-live リージョンで変更をスクリーンリーダーに通知する。

Powered by web-features