Array.prototype.reverse()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.

reverse() は Array のメソッドで、配列の要素をその場 (in-place) で反転させ、その配列への参照を返します。最初の要素が最後の要素に、最後の要素が最初の要素になります。言い換えれば、配列内の要素順序を、先に述べた方向とは逆に向かわせます。

元の配列を変更せずに配列の要素を反転させるには toReversed() を使用してください。

試してみましょう

const array = ["one", "two", "three"];
console.log("array:", array);
// 予想される結果: "array:" Array ["one", "two", "three"]

const reversed = array.reverse();
console.log("reversed:", reversed);
// 予想される結果: "reversed:" Array ["three", "two", "one"]

// 注意: reverse は破壊的です。元の配列が変更されます。
console.log("array:", array);
// 予想される結果: "array:" Array ["three", "two", "one"]

構文

reverse()

引数

なし。

返値

元の配列を反転されたものへの参照です。なお、配列はその場 (in-place) で反転され、コピーは作られません。

解説

reverse() メソッドは、呼び出した配列オブジェクトの要素を反転し、書き換えられた配列の参照を返します。

reverse() メソッドは空のスロットを維持します。元の配列が疎配列である場合、空のスロットに対応する新しいインデックスは削除され、空のスロットになります。

reverse() メソッドは汎用的です。これは this 値に length プロパティと整数キーのプロパティがあることだけを期待します。文字列も配列風ですが、文字列は不変であるため、このメソッドを適用するのは適切ではありません。

例

配列の要素を反転させる

次の例は、3 つの要素を含む配列 items を作成し、その配列を反転させます。reverse() の呼び出しは、反転した配列 items への参照を返します。

js
const items = [1, 2, 3];
console.log(items); // [1, 2, 3]

items.reverse();
console.log(items); // [3, 2, 1]

reverse() メソッドは同じ配列への参照を返す

reverse() メソッドは元の配列への参照を返すので、返された配列を変更すると、元の配列も変更されます。

js
const numbers = [3, 2, 4, 1, 5];
const reversed = numbers.reverse();
// numbers and reversed are both in reversed order [5, 1, 4, 2, 3]
reversed[0] = 5;
console.log(numbers[0]); // 5

reverse() で元の配列を変更せず、他の配列メソッド（map() など）が行うようにシャローコピーした配列を返すようにするには、 toReversed() メソッドを使用してください。他にも、 reverse() を呼び出す前にスプレッド構文か Array.from() を使用してシャローコピーを行っておくこともできます。

js
const numbers = [3, 2, 4, 1, 5];
// [...numbers] はシャローコピーを作成するので、 reverse() は元の配列を変更しない
const reverted = [...numbers].reverse();
reverted[0] = 5;
console.log(numbers[0]); // 3

疎配列に対する reverse() の使用

疎配列は reverse() を呼び出しても疎配列のままです。空のスロットは空のスロットとしてそれぞれの新しいインデックスにコピーされます。

js
console.log([1, , 3].reverse()); // [3, empty, 1]
console.log([1, , 3, 4].reverse()); // [4, 3, empty, 1]

配列以外のオブジェクトに対する reverse() の呼び出し

reverse() メソッドは this の length プロパティを読み込みます。そして、 0 から length / 2 までの整数のキーを持つ各プロパティを参照し、両端の対応する 2 つのインデックスを入れ替えます。出力先のプロパティで、参照元のプロパティが存在しないものは削除します。

js
const arrayLike = {
  length: 3,
  unrelated: "foo",
  2: 4,
  3: 33, // length が 3 であるため reverse() 空は無視される
};
console.log(Array.prototype.reverse.call(arrayLike));
// { 0: 4, 3: 33, length: 3, unrelated: 'foo' }
// 元々インデックス 0 が存在しなかったため、インデックス 2 は削除される
// 長さが 3 であるため、インデックス 3 は変更されない