JavaScriptの配列メソッド一覧｜破壊的・非破壊的の違いと使い分けを実行結果つきで解説

JavaScriptの配列（Array）には、追加・削除のpush/pop、検索のincludes/find、変換のmap/filter/reduce、並べ替えのsort/toSortedなど、静的メソッドを含めて40以上のメソッドがあります。使い分けで一番大事なのは「元の配列を書き換える（破壊的）か、新しい配列を返すか」で、下の一覧表でまとめて確認できます。

この記事では、MDNのArray リファレンスに載っているメソッドを用途別の一覧表にし、よく使うものはNode.js 24で実行した結果つきで説明します。ブラウザの開発者ツール（F12）のコンソールに貼り付けても同じように動きます。

JavaScriptの配列メソッド一覧（用途別）

MDNのArrayページに載っているインスタンスメソッドと静的メソッドを、用途ごとに並べました（2026年10月15日確認）。「元の配列を変更」が「する」のものは、呼び出した配列そのものが書き換わります。

分類	メソッド	何をするか	戻り値	元の配列を変更
追加・削除	push / pop	末尾に追加 / 末尾を取り出す	新しい長さ / 取り出した要素	する
追加・削除	unshift / shift	先頭に追加 / 先頭を取り出す	新しい長さ / 取り出した要素	する
追加・削除	splice	位置を指定して削除・挿入・置換	削除した要素の配列	する
追加・削除	toSpliced	spliceの非破壊版	新しい配列	しない
取り出し	slice	範囲を切り出す（コピー）	新しい配列	しない
取り出し	at	位置の要素を取る（-1で末尾）	要素	しない
検索	indexOf / lastIndexOf	値の位置を探す	位置（なければ-1）	しない
検索	includes	値があるか	true / false	しない
検索	find / findLast	条件に合う最初 / 最後の要素	要素（なければundefined）	しない
検索	findIndex / findLastIndex	条件に合う最初 / 最後の位置	位置（なければ-1）	しない
判定	some / every	1つでも / すべてが条件に合うか	true / false	しない
変換・集計	map	各要素を変換	新しい配列	しない
変換・集計	filter	条件に合う要素だけ残す	新しい配列	しない
変換・集計	reduce / reduceRight	左から / 右から畳み込んで1つの値に	任意の値	しない
変換・集計	flat / flatMap	入れ子をならす / 変換してならす	新しい配列	しない
繰り返し	forEach	各要素に処理をする	undefined	しない
並べ替え	sort / reverse	並べ替え / 逆順	同じ配列	する
並べ替え	toSorted / toReversed	sort / reverseの非破壊版	新しい配列	しない
置き換え	with	1か所だけ変えたコピー	新しい配列	しない
置き換え	fill / copyWithin	同じ値で埋める / 配列内でコピー	同じ配列	する
結合・文字列	concat	配列をつなぐ	新しい配列	しない
結合・文字列	join / toString	文字列にする	文字列	しない
反復子	keys / values / entries	位置・値・組を順に取り出す	イテレーター	しない
静的メソッド	Array.from / Array.of	配列に変換 / 引数から配列を作る	新しい配列	―
静的メソッド	Array.isArray	配列かどうか	true / false	―
静的メソッド	Array.fromAsync	非同期の反復可能オブジェクトから配列を作る	Promise	―

このほか toLocaleString()（地域に合わせた文字列化）もあります。文字列の split() や Object.groupBy() は配列のメソッドではありませんが、配列と組み合わせてよく使います。

追加・削除：push・pop・shift・unshift・splice

末尾の操作がpush/pop、先頭の操作がunshift/shiftです。pushとunshiftの戻り値は「追加した要素」ではなく「新しい長さ」なので注意してください。spliceは位置・削除数・挿入する値を指定する万能メソッドで、戻り値は削除された要素の配列です。

const fruits = ["りんご", "バナナ"];
console.log(fruits.push("みかん"));   // 戻り値は新しい長さ
console.log(fruits.unshift("いちご"));
console.log(fruits);
console.log(fruits.pop(), fruits.shift());
console.log(fruits);

const nums = [1, 2, 3, 4, 5];
const removed = nums.splice(1, 2, "a", "b", "c"); // 1番目から2個消して3個入れる
console.log(removed, nums);

実行結果：

3
4
[ 'いちご', 'りんご', 'バナナ', 'みかん' ]
みかん いちご
[ 'りんご', 'バナナ' ]
[ 2, 3 ] [ 1, 'a', 'b', 'c', 4, 5 ]

検索・判定：indexOf・includes・find・some・every

値そのものを探すならindexOfかincludes、「年齢が26より上」のような条件で探すならfind系を使います。findは見つからないと undefined、indexOfとfindIndexは -1 を返します。

const users = [
  { name: "田中", age: 25 },
  { name: "佐藤", age: 31 },
  { name: "山田", age: 28 },
];
const colors = ["赤", "青", "緑", "青"];

console.log(colors.indexOf("青"), colors.lastIndexOf("青"), colors.indexOf("紫"));
console.log(colors.includes("緑"));
console.log(users.find(u => u.age > 26));
console.log(users.findIndex(u => u.age > 26));
console.log(users.findLast(u => u.age > 26));
console.log(users.some(u => u.age >= 30), users.every(u => u.age >= 20));
console.log([NaN].indexOf(NaN), [NaN].includes(NaN));

実行結果：

1 3 -1
true
{ name: '佐藤', age: 31 }
1
{ name: '山田', age: 28 }
true true
-1 true

最後の行のとおり、NaN はindexOfでは見つからず、includesでは見つかります。「含まれているか」だけを知りたいときはincludesを使うのが確実です。後ろから探すfindLastとfindLastIndexは、配列を反転させずに最後の一致を取れます。

変換・集計：map・filter・reduce

配列メソッドの中心がこの3つです。mapは要素を1対1で変換、filterは条件で絞り込み、reduceは全要素を1つの値（合計やオブジェクトなど）にまとめます。どれも新しい配列や値を返し、元の配列は変わりません。戻り値をそのまま次のメソッドにつなげる「メソッドチェーン」もよく使います。

const items = [
  { name: "ノート", price: 300, category: "文具" },
  { name: "ペン", price: 120, category: "文具" },
  { name: "りんご", price: 180, category: "食品" },
  { name: "パン", price: 250, category: "食品" },
];

const names = items.map(item => item.name);
console.log(names);

const cheap = items.filter(item => item.price < 200);
console.log(cheap.map(item => item.name));

const total = items.reduce((sum, item) => sum + item.price, 0);
console.log(total);

// 文具だけ税込にして、名前と価格の文字列にする（メソッドチェーン）
console.log(
  items
    .filter(item => item.category === "文具")
    .map(item => `${item.name}:${Math.floor(item.price * 1.1)}円`)
    .join(", ")
);

// カテゴリごとにまとめる（ES2024のObject.groupBy）
const grouped = Object.groupBy(items, item => item.category);
console.log(Object.keys(grouped), grouped["食品"].length);

実行結果：

[ 'ノート', 'ペン', 'りんご', 'パン' ]
[ 'ペン', 'りんご' ]
850
ノート:330円, ペン:132円
[ '文具', '食品' ] 2

カテゴリ別にまとめる処理は、以前はreduceで書くのが定番でしたが、今は Object.groupBy() が使えます。MDNでは2024年3月から主要ブラウザで使えるとされています（Object.groupBy()、2026年10月15日確認）。

並べ替え：sortの落とし穴とtoSorted

sortは比較関数を渡さないと、要素を文字列に変換して辞書順に並べます。数値を並べるときは (a, b) => a - b を必ず渡しましょう。また、sortとreverseは元の配列を書き換えます。

const scores = [40, 100, 9, 25];

console.log([...scores].sort());              // 文字列として比べる
console.log([...scores].sort((a, b) => a - b)); // 数値の昇順

const sorted = scores.toSorted((a, b) => b - a); // 元の配列は変わらない
console.log(sorted, scores);

console.log(scores.toReversed(), scores.with(0, 50), scores.toSpliced(1, 1));
console.log(scores.at(-1));

実行結果：

[ 100, 25, 40, 9 ]
[ 9, 25, 40, 100 ]
[ 100, 40, 25, 9 ] [ 40, 100, 9, 25 ]
[ 25, 9, 100, 40 ] [ 50, 100, 9, 25 ] [ 40, 9, 25 ]
25

toSorted・toReversed・toSpliced・withは、元の配列を変えずに新しい配列を返す「コピー版」です。MDNではtoSortedが2023年7月から主要ブラウザで使えるとされています（Array.prototype.toSorted()、2026年10月15日確認）。ReactのstateのようにCopy-on-Writeで扱いたいデータでは、こちらを使うと [...arr].sort() のようなコピーの手間が省けます。at(-1) は末尾の要素を取る書き方で、arr[arr.length - 1] より短く書けます。

破壊的メソッドと非破壊的メソッドの対応表

MDNは、元の配列を変更するメソッドと、その代わりに使える非破壊的な書き方を次のように整理しています（Array – MDN）。

破壊的メソッド	非破壊的な代わり
push(v1, v2)	concat([v1, v2])
pop()	slice(0, -1)
shift()	slice(1)
unshift(v1, v2)	toSpliced(0, 0, v1, v2)
splice()	toSpliced()
sort()	toSorted()
reverse()	toReversed()
fill()・copyWithin()	1つのメソッドでの代わりはない（先に [...arr] でコピーする）

なお、非破壊的なメソッドが作るのは「浅いコピー」です。要素がオブジェクトの場合、新旧の配列は同じオブジェクトを指しているので、中身を書き換えると両方に反映されます。

配列の作成・平坦化・その他の便利なメソッド

console.log([1, [2, [3, [4]]]].flat());
console.log([1, [2, [3, [4]]]].flat(Infinity));
console.log(["a b", "c d e"].flatMap(s => s.split(" ")));
console.log(Array.from("abc"), Array.from({ length: 3 }, (_, i) => i * 10));
console.log(Array.of(7), new Array(7).length);
console.log(Array.isArray([]), typeof []);
console.log(new Array(3).fill(0));
console.log([...new Set([3, 1, 3, 2, 1])]);
for (const [i, v] of ["x", "y"].entries()) console.log(i, v);

実行結果：

[ 1, 2, [ 3, [ 4 ] ] ]
[ 1, 2, 3, 4 ]
[ 'a', 'b', 'c', 'd', 'e' ]
[ 'a', 'b', 'c' ] [ 0, 10, 20 ]
[ 7 ] 7
true object
[ 0, 0, 0 ]
[ 3, 1, 2 ]
0 x
1 y

• flat() は既定で1段だけならし、Infinity を渡すとすべての段をならす
• Array.from() は文字列やNodeList（querySelectorAll の結果）などを配列に変える。第2引数で変換もできる
• new Array(7) は「長さ7の空の配列」になるので、要素が1つの配列を作りたいときは Array.of(7) か [7]
• typeof は配列でも "object" を返すため、配列かどうかの判定は Array.isArray() を使う
• 重複を取り除くには [...new Set(arr)] が定番

どれを使うか迷ったときの選び方

やりたいこと	使うメソッド
全要素を別の形にしたい	map
条件に合うものだけ残したい	filter
条件に合う1件だけ欲しい	find（位置なら findIndex）
あるかないかだけ知りたい	includes（条件なら some）
合計や集計をしたい	reduce
元の配列を残したまま並べ替えたい	toSorted
結果を使わず処理だけしたい（ログ出力など）	forEach または for...of

forEachは途中で抜けられない（breakが使えない）ので、途中で止めたい場合は for...of か、some・find を使います。

テックジムは東京・永田町に本校がある通学型のプログラミングスクールで、自分のペースで課題を進め、詰まったらその場でトレーナーに質問できます。プログラミングの基礎から始めたい方は無料Python講座も用意しています。

よくある質問

Q. JavaScriptの配列メソッドはいくつありますか？

MDNのArrayリファレンスでは、インスタンスメソッドが38個、静的メソッドがArray.from・Array.fromAsync・Array.isArray・Array.ofの4個載っています（2026年10月15日確認）。

Q. 元の配列を変更するメソッドはどれですか？

push・pop・shift・unshift・splice・sort・reverse・fill・copyWithinの9個です。元の配列を残したい場合はtoSorted・toReversed・toSplicedなどのコピー版や、sliceやスプレッド構文でコピーしてから使います。

Q. mapとforEachの違いは？

mapは各要素を変換した新しい配列を返し、forEachは何も返しません（undefined）。結果の配列が必要ならmap、処理だけしたいならforEachかfor…ofを使います。

Q. 配列に値が含まれているか調べるには？

includes()を使います。trueかfalseが返ります。条件で調べたい場合はsome()、位置が必要な場合はindexOf()を使います。

Q. 数値の配列をsort()すると順番がおかしくなるのはなぜ？

比較関数を渡さないsort()は、要素を文字列にして辞書順で並べるためです。数値の昇順なら(a, b) => a – bを渡します。

あわせて読みたい

言語やフレームワークの違いは似たプログラミング言語の違いで比較しています。