JavaScript配列の反転

概要: このチュートリアルでは、配列内の要素の順序を反転させるJavaScript配列のreverse()メソッドの使い方を学習します。

JavaScript配列reverseメソッドの紹介

reverse()メソッドは、配列内の要素の順序を反転し、反転された順序の要素を持つ変更された配列を返します。

reverse()メソッドの構文は次のとおりです。

Array.prototype.reverse()
Code language: JavaScript (javascript)

reverse()メソッドはパラメーターをとりません。配列の要素をインプレースで反転し、反転された配列を返します。

reverse()メソッドは汎用的です。つまり、lengthプロパティと整数キーのプロパティを持つ非配列オブジェクトに対して呼び出すことができます。

文字列は不変であるため、reverse()を文字列に対して呼び出すことはできません。

配列内の要素の順序を反転し、元の配列を変更せずに配列のコピーを返すには、toReversed()メソッドを使用できます。

JavaScript配列reverse()メソッドの例

JavaScript配列reverse()メソッドの使用例をいくつか見てみましょう。

1) JavaScript配列reverse()メソッドを文字列配列で使用

次の例では、reverse()メソッドを使用して文字列の配列を反転します。

const colors = ['red','green','blue'];
colors.reverse();

console.log(colors);Code language: JavaScript (javascript)

出力

['blue', 'green', 'red']Code language: JavaScript (javascript)

2) JavaScript配列reverse()メソッドを数値配列で使用

次の例では、reverse()メソッドを使用して配列内の数値の順序を反転します。

const scores = [1, 3, 5, 7];
scores.reverse();

console.log(scores);Code language: JavaScript (javascript)

出力

[7, 5, 3, 1]Code language: JavaScript (javascript)

3) JavaScript配列reverse()メソッドをオブジェクトの配列で使用

次の例では、reverse()メソッドを使用して配列内のオブジェクトの順序を反転します。

const books = [
  { title: 'Eloquent JavaScript', author: 'Marijn Haverbeke' },
  { title: 'JavaScript: The Good Parts', author: 'Douglas Crockford' },
  { title: 'JavaScript: The Definitive Guide', author: 'David Flanagan' },
];

books.reverse();

console.log(books);Code language: JavaScript (javascript)

出力

[
    {
        "title": "JavaScript: The Definitive Guide",
        "author": "David Flanagan"
    },
    {
        "title": "JavaScript: The Good Parts",
        "author": "Douglas Crockford"
    },
    {
        "title": "Eloquent JavaScript",
        "author": "Marijn Haverbeke"
    }
]Code language: JavaScript (javascript)

4) スパース配列に対するreverse()の使用

スパース配列に対してreverse()メソッドを呼び出すと、配列はスパースのままです。reverse()メソッドは、空のスロットをそれぞれのインデックスに空のスロットとしてコピーします。

const scores = [1,,7,5];
scores.reverse();

console.log(scores);Code language: JavaScript (javascript)

出力

[5, 7, empty, 1]Code language: JavaScript (javascript)

5) 非配列オブジェクトに対するJavaScript配列reverse()の使用

次の例は、lengthプロパティと整数キーのプロパティを持つオブジェクトに対してreverse()メソッドを呼び出す方法を示しています。

const arrayLike = {
  length: 3,
  unrelated: "bar",
  2: 2,
  3: 3, // ignored by reverse() since length is 3
};
console.log(Array.prototype.reverse.call(arrayLike));Code language: JavaScript (javascript)

出力

{0: 2, 3: 3, length: 3, unrelated: 'bar'}Code language: JavaScript (javascript)

この例では、reverse()メソッドはまず、arrayのlengthプロパティにアクセスします。次に、0からlength / 2までの整数キーを持つ各プロパティを反復処理します。

この処理中に、配列の両端に対応するインデックスの値を交換します。さらに、メソッドは対応するソースプロパティのない宛先プロパティを削除します。

概要

• JavaScript配列のreverse()メソッドを使用して、配列の要素の順序をインプレースで反転します。