Array.prototype.reverse()

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

試してみましょう

構文

js

reverse()

返値

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

解説

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

reverse は意図的に汎用性を持たせています。つまり、このメソッドは配列に類似したオブジェクトに対して呼び出すこともできます。ゼロから始まる数値プロパティであり、連続した連なりの最後を反映している 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]

配列風オブジェクトの要素を反転させる

次の例は、3 つの要素と length プロパティを含む配列風オブジェクト obj を作成し、その配列風オブジェクトを反転させます。reverse() の呼び出しは、反転した配列風オブジェクト obj への参照を返します。

js

const obj = {0: 1, 1: 2, 2: 3, length: 3};
console.log(obj); // {0: 1, 1: 2, 2: 3, length: 3}

Array.prototype.reverse.call(obj); //apply() を使用するのと同じ構文
console.log(obj); // {0: 3, 1: 2, 2: 1, length: 3}

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() など）が行うようにシャローコピーした配列を返すようにするには、 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

仕様書

Specification
ECMAScript Language Specification
# sec-array.prototype.reverse

ブラウザーの互換性

BCD tables only load in the browser

関連情報