JavaScriptのtoReversedの使い方！【配列】

JavaScriptで配列の要素の順番を逆にした新しい配列を返すtoReversedメソッドについて書いています。

toReversedメソッドを使うと、元の配列を変更せずに、要素の順番が逆になった新しい配列を作成できます。
配列の要素を逆順に処理したり、逆順にした配列を別の処理に渡したりする場合に便利です。

実際に動くサンプルを使って、以下の操作を解説します。

toReversedメソッドの基本的な使い方

toReversedメソッドは、配列の要素の順番を逆にした新しい配列を返します。
元の配列は変更されません。
基本的な構文は以下のとおりです。

array.toReversed()

配列要素の順番を逆にした新しい配列を作成する

toReversedメソッドを使って、配列を逆順にしてみます。

const fruits = ['apple', 'banana', 'orange'];
const reversedFruits = fruits.toReversed();

console.log(fruits); // 結果：['apple', 'banana', 'orange'] (元の配列は変わらない)
console.log(reversedFruits); // 結果：['orange', 'banana', 'apple'] (新しい配列)

fruits配列を作成して、toReversedを呼び出しています。

そして、配列要素の順番がtoReversedメソッドによって、逆順になった新しい配列reversedFruitsが作成されています。
元のfruits配列は変更されていません。

toReversedメソッドを使うメリット

toReversedメソッドを使う主なメリットは以下のとおりです。

• 元の配列を変更せずに逆順にした新しい配列を作成できる: 元の配列を変更せずに、逆順にした新しい配列を作成できます。
• 可読性の向上: toReversedメソッドを使うことで、配列を逆順にする処理がより明確になり、コードの可読性が向上します。

reverseメソッドとの違い

配列の要素の順番を逆にするメソッドとしては、reverseメソッドも存在します。
reverseメソッドは、元の配列を直接変更するのに対し、toReversedメソッドは元の配列を変更せずに新しい配列を返す点が異なります。

どちらのメソッドを使うかは、元の配列を変更したいかどうかによって選択する必要があります。

console.log("--- reverseを使用 ---");
const fruits1 = ['apple', 'banana', 'orange'];
fruits1.reverse();

console.log(fruits1); // 結果: ['orange', 'banana', 'apple']

console.log("--- toReversedを使用 ---");
const fruits2 = ['apple', 'banana', 'orange'];
const reverseFruits = fruits2.toReversed();

console.log(fruits2); // 結果: ['apple', 'banana', 'orange'] => toReversedは元の配列を変更しない
console.log(reverseFruits); // 結果: ['orange', 'banana', 'apple'] => 戻り値で変更された配列を受け取る

JavaScriptのtoReversedメソッドの使い方まとめ

今回はJavaScriptのtoReversedメソッドの使い方について解説しました。
記事の内容をまとめます。