JavaScript配列メソッド早見表（ライブ実行）
JavaScript配列メソッド早見表
JavaScript配列メソッド早見表（各メソッドをその場で実行） | We.Inc
自分のリストを入力すると、map、filter、reduce、find、sort、spliceなど30以上の配列メソッドがその場で実行されます。元の配列を変更するメソッドには、すべてはっきり目印を付けています。
配列メソッドは2つの陣営に分かれます。push、pop、splice、sort、reverseのように、呼び出した配列そのものを変更するもの。そしてmap、filter、slice、toSorted、reduceのように、新しい配列や値を返して元の配列には手を付けないものです。下のリストを編集すると、すべてのメソッドがあなたの値で再実行されます。
よくある配列の処理と対応するメソッド
- すべての要素を変換する
- arr.map(fn)
- しない
- 条件を満たす要素を残す
- arr.filter(fn)
- しない
- 1つの値にまとめる
- arr.reduce(fn, start)
- しない
- 条件に一致する最初の要素
- arr.find(fn)
- しない
- 並べ替えたコピー
- arr.toSorted(fn)
- しない
多くの早見表は、メソッド名と決まりきった例を1つ並べるだけです。ここでは、例が自分で操作できるリストに対して実行されるので、重複がある場合、空のリスト、要素が1つだけの場合に何が起きるかを確認できます。各行には、メソッドがデータを書き換えるかどうかがひと目でわかるタグが付いています。これはReactなどのライブラリで状態のバグを生む大きな原因です。
- ボックスにカンマ区切りのリストを入力します。各要素の前後の空白は取り除かれます。
- すべての行が再計算されます。配列を変更するメソッドは毎回新しいコピーに対して実行され、行には戻り値と実行後の配列の両方が表示されます。
- 名前で絞り込むか、「検索」や「変換」などのグループを選んで表を絞り込みます。
- 下にスクロールすると、メソッドチェーンの例、lengthプロパティ、変更系とコピー系の対応表があります。
- Reactの状態では、sortなどの破壊的なメソッドではなく、toSorted、toReversed、toSpliced、withを使いましょう。古い配列を変更すると、Reactが更新に気づかないことがあるためです。
- reduceには初期値を渡しましょう。初期値がないと、空の配列でTypeErrorが発生します。
- forEachは常にundefinedを返し、breakで止められません。途中で止めたい場合は、for...of、some、findを使いましょう。
- map、filter、sliceがコピーするのは1階層だけです。新しい配列の中のオブジェクトは、元と同じオブジェクトです。
よくある質問
JavaScriptで配列の長さを取得するには？
arr.lengthを読み取ります。メソッドではなくプロパティなので、括弧は付けません。値は最大のインデックスより1大きく、通常の配列では要素数と同じです。arr.length = 0と設定すると配列が空になり、小さい数を設定すると末尾の要素が切り捨てられます。
mapとforEachの違いは何ですか？
mapは、各要素に対して関数が返した値から新しい配列を作るので、変数に代入したり、さらにメソッドをつなげたりできます。forEachは関数を呼び出すだけで、undefinedを返します。結果が欲しいときはmapを、ログ出力などの副作用だけが目的のときはforEachを使いましょう。
元の配列を変更する配列メソッドはどれですか？
push、pop、shift、unshift、splice、sort、reverse、fill、copyWithinは、配列をその場で変更します。lengthやインデックスに直接値を設定した場合も同様です。この早見表のそれ以外のメソッドは、元の配列に手を付けません。
配列を変更せずに要素を削除するには？
値で削除するならarr.filter((x) => x !== 'kiwi')のようにfilterを、位置で削除するならtoSpliced(index, 1)を使います。どちらも新しい配列を返し、元の配列はそのまま残ります。
mapがundefinedを返すのはなぜですか？
コールバックが何も返していません。波括弧を使ったアロー関数には明示的なreturnが必要です。(x) => x * 2または(x) => { return x * 2; }と書きましょう。returnがないと、その位置はundefinedになります。
チェーンを左から右へ読む
- コピー系のメソッドは配列を返すので、その結果にそのまま別のメソッドを呼び出せます。orders.filter(isPaid).map(toTotal).reduce(add, 0)のようなチェーンは、支払い済みの注文を残し、それぞれを数値にし、合計する、という文章のように読めます。
- 長いチェーンは読みやすい反面、ステップごとにリストを1回ずつ走査します。数千件程度なら問題になりませんが、非常に大きなデータでは、3つの処理をまとめて行う1つのfor...ofループのほうが速くなります。
検索メソッドが返すものはそれぞれ違う
- includesは「ある」か「ない」かを答えます。indexOfとfindIndexは位置を返し、-1は見つからなかったことを意味します。findとfindLastは要素そのもの、またはundefinedを返します。someとeveryは、判定関数についての「はい」か「いいえ」の問いに答えます。
- includesとindexOfは厳密等価で比較するので、内容でオブジェクトを探すことはできません。その場合は、判定関数を渡したfindやsomeを使いましょう。
破壊的メソッドと対応するコピー系メソッド
Reactの状態や関数の引数など、元の配列に触れてはいけない場合は、左の列を右の列に置き換えましょう。
その場で変更か、コピーか
- arr.sort(fn)
- arr.toSorted(fn)
- arr.reverse()
- arr.toReversed()
- arr.splice(i, n, ...items)
- arr.toSpliced(i, n, ...items)
- arr[i] = value
- arr.with(i, value)
- arr.push(a, b)
- [...arr, a, b] または arr.concat([a, b])
- arr.unshift(a)
- [a, ...arr]
- arr.pop()
- arr.slice(0, -1)
map、filter、reduceをつなげる
支払い済み注文の合計を1つのチェーンで
各ステップが新しい配列を返すので、次のメソッドはそれに対して実行されます。元のordersリストは一切変更されません。
lengthの読み取りと設定
lengthはただのプロパティです。小さくすると末尾の要素が削除されるため、配列の変更とみなされます。
変更せずにReactの状態を更新する
コピー系のメソッドはReactに新しい配列を渡すので、コンポーネントが再レンダリングされます。状態の配列にsortやpushを呼び出しても再レンダリングされません。
- 要素の数
- 最初の要素
- 末尾から数えた最後の要素
- 値が含まれていればtrue
- 値が最初に現れる位置、なければ-1
- 値が最後に現れる位置、なければ-1
- 条件を満たす最初の要素
- 条件を満たす最初の要素の位置
- 条件を満たす最後の要素
- 1つでも条件を満たせばtrue
- すべてが条件を満たせばtrue
- 各コールバックの結果からなる新しい配列
- 条件を満たす要素からなる新しい配列
- リストを1つの値にまとめる
- mapしてから1階層平坦化する
- 位置1と2のコピー
- 末尾に要素を追加した新しい配列
- 区切り文字でつないだ1つの文字列
- 並べ替えたコピー（文字列順）
- 逆順にしたコピー
- 位置1を削除したコピー
- 位置0を置き換えたコピー
- その場で並べ替え、同じ配列を返す
- その場で逆順にする
- 末尾に追加し、新しい長さを返す
- 最後の要素を削除して返す
- 先頭に追加し、新しい長さを返す
- 最初の要素を削除して返す
- 位置1から削除し、削除した要素を返す
- 位置1から末尾までを上書きする
- 配列の一部を別の部分にコピーする
- 位置のイテレーター（ここでは展開して表示）
- [位置, 要素]のペアのイテレーター
すべて
読み取り
検索
変換
並べ替え
追加と削除
反復
ライブ配列メソッド表
カンマ区切りのリストを入力すると、編集に合わせて下のすべてのメソッドが実行されます。
リスト（arr）
メソッドを絞り込む
例：find、sort
メソッドのグループ
この表のすべてのメソッド
{n}件を表示
呼び出し
グループ
元の配列を変更するか
役割
結果
する
しない
エラー：{v}
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る