概要: このチュートリアルでは、JavaScript配列のtoReversed()メソッドを使用して、配列内の要素の順序を反転し、元の配列の要素を反転した順序で含む新しい配列を返す方法を学びます。
JavaScript Array toReversed()メソッドの紹介
toReversed()メソッドは、配列内の要素の順序を反転し、反転した順序で要素を含む新しい配列を返します。
配列の要素をその場で反転するreverse()メソッドとは異なり、toReversed()メソッドは元の配列を変更しません。代わりに、元の配列の要素を反転した順序で含む新しい配列を作成します。
以下は、toReversed()メソッドの基本的な構文です。
Array.prototype.toReversed()Code language: JavaScript (javascript)toReversed()メソッドはパラメータを受け取らず、反転した順序で要素を含む新しい配列を返します。
疎な配列に対してtoReversed()メソッドを呼び出すと、空のスロットは値がundefinedであるかのように扱われます。
このメソッドは汎用的であり、lengthプロパティと整数キーのプロパティを持つ非配列オブジェクトに対して呼び出すことができます。
JavaScript Array toReversed()メソッドの例
JavaScript配列toReverse()メソッドの使用例を見てみましょう。
1) JavaScript Array toReversed()メソッドを文字列配列で使用する場合
次の例では、toReverse()メソッドを使用して文字列の配列を反転します。
const colors = ['red','green','blue'];
const reversedColors = colors.toReversed();
console.log(colors);
console.log(reversedColors);Code language: JavaScript (javascript)出力
['red','green','blue']
['blue', 'green', 'red']Code language: JavaScript (javascript)2) JavaScript Array toReversed()メソッドを数値配列で使用する場合
次の例では、toReversed()メソッドを使用して配列内の数値の順序を反転します。
const scores = [1, 3, 5, 7];
const reversedScores = scores.toReversed();
console.log(scores);
console.log(reversedScores);Code language: JavaScript (javascript)出力
[1, 3, 5, 7]
[7, 5, 3, 1]Code language: JavaScript (javascript)3) JavaScript Array toReversed()メソッドをオブジェクトの配列で使用する場合
次の例では、toReversed()メソッドを使用して配列内のオブジェクトの順序を反転します。
const contacts = [{name: 'John'}, {name: 'Alice'}, {name: 'Bob'}];
const reversedContacts = contacts.toReversed();
console.log(contacts);
console.log(reversedContacts);Code language: JavaScript (javascript)出力
[{name: 'John'}, {name: 'Alice'}, {name: 'Bob'}]
[{name: 'Bob'}, {name: 'Alice'}, {name: 'John'}]Code language: JavaScript (javascript)4) 疎な配列でtoReversed()メソッドを呼び出す場合
疎な配列でtoReversed()メソッドを呼び出すと、結果の配列は疎なままです。toReversed()メソッドは、空のスロットを対応するインデックスに空のスロットとしてコピーします。
const scores = [1,,7,5];
const reversedScores = scores.toReversed();
console.log(scores);
console.log(reversedScores);Code language: JavaScript (javascript)出力
[1,, 7, 5]
[5, 7, undefined, 1]Code language: JavaScript (javascript)5) 非配列オブジェクトでtoReversed()メソッドを呼び出す場合
次の例は、lengthプロパティと整数キーのプロパティを持つオブジェクトに対してtoReversed()メソッドを呼び出す方法を示しています。
const arrayLike = {
length: 3,
unrelated: "bar",
2: 2,
3: 3, // ignored because the length is 3
};
const result = Array.prototype.reverse.call(arrayLike);
console.log(result);Code language: JavaScript (javascript)出力
{0: 2, 3: 3, length: 3, unrelated: 'bar'}Code language: JavaScript (javascript)この例では、toReversed()メソッドは次の操作を行います。
- まず、オブジェクトの
lengthプロパティにアクセスします。 - 次に、
0からlength / 2までの整数キーを持つ各プロパティを反復処理します。 - 3つ目に、配列の両端の対応するインデックスの値を交換します。さらに、対応するソースプロパティがない宛先プロパティを削除します。
- 最後に、要素（またはプロパティ）の順序が反転した新しいオブジェクトを返します。
まとめ
- JavaScript配列の
toReversed()メソッドを使用して、配列内の要素の順序を反転し、反転した新しい配列を返します。
