【JavaScript】reverse()で配列の順序を逆転! 実践的な例で学ぼう

「reverse()」はJavaScriptの配列メソッドで、要素を逆順に並べ替える便利な機能です。この記事では基本的な使い方から実用的な例まで紹介しています。しかし、注意が必要で、元の配列が変更される点や、連鎖的なメソッド呼び出しに注意が必要です。適切に利用すれば、配列操作の幅が広がります。

3行で要約すると:

reverse()はJavaScriptの配列の順序を逆転させるメソッドです。
文字列や数値、2次元配列など、多様な使用例を通して配列を効果的に操作できます。
元の配列が変更されるため、使用時には注意が必要です。

「reverse()」の基本的な使い方

「reverse()」とは？

reverse()はJavaScriptの配列のメソッドの一つで、配列の要素を逆の順序に並べ替えます。基本的な使い方は非常にシンプルで、配列に対してこのメソッドを実行するだけです。

let fruits = ["apple", "orange", "banana"];
fruits.reverse();
console.log(fruits); // ["banana", "orange", "apple"]

上の例では、fruitsという配列の要素が逆の順序になりました。

「reverse()」の使用例4パターン

文字列を逆順にする

JavaScriptでは文字列に直接reverse()は使用できませんが、配列として変換してから逆転させることができます。

let str = "hello";
let reversedStr = str.split("").reverse().join("");
console.log(reversedStr); // "olleh"

数値の配列を逆順にする

数値を要素とする配列も、同様に逆順にすることができます。

let numbers = [1, 2, 3, 4, 5];
numbers.reverse();
console.log(numbers); // [5, 4, 3, 2, 1]

2次元配列を逆順にする

2次元配列の場合も、外側の配列の要素の順序を逆にすることができます。

let matrix = [[1, 2], [3, 4], [5, 6]];
matrix.reverse();
console.log(matrix); // [[5, 6], [3, 4], [1, 2]]

配列の順序を保存しつつ逆順に表示する

reverse()は元の配列を変更してしまいます。元の配列を保持したい場合は、一旦コピーしてから逆転させる必要があります。

let original = ["A", "B", "C"];
let copied = [...original].reverse();
console.log(original); // ["A", "B", "C"]
console.log(copied);   // ["C", "B", "A"]

「reverse()」と「slice()」

「slice()」とは？

slice()は、配列から指定した部分を取り出して新しい配列を生成するメソッドです。これを利用して元の配列を変更せずにコピーを作ることができます。

let fruits = ["apple", "orange", "banana"];
let copiedFruits = fruits.slice().reverse();

「reverse()」と「slice()」の違い

reverse()は元の配列を直接変更しますが、slice()は新しい配列を作成します。そのため、reverse()の前にslice()を使用して配列をコピーすることで、元の配列を変更せずに逆順の配列を得ることができます。

「reverse()」を使用する際の注意点

元の配列も変更される

reverse()は破壊的メソッドであり、元の配列の内容を直接変更します。これは予期しない動作を引き起こす可能性があります。

let originalArray = [1, 2, 3];
let reversedArray = originalArray.reverse();
console.log(originalArray); // [3, 2, 1]
console.log(reversedArray); // [3, 2, 1]