[JavaScript]配列(Array)を逆順でループする(reverse loop)には？

どうも、ちょげ(@chogetarou)です。

配列(Array)を逆順でループする方法を紹介します。

方法

配列(Array)を逆順でループする方法は、３つあります。

１つ目は、forEach()を使う方法です。

まず、配列からslice()を呼び出します。

slice()からreverse()を呼び出し、reverse()からforEach()を呼び出します。

そして、forEach()の引数にループ処理の関数を指定します。

array.slice().reverse().forEach((item) => {
    //ループ処理
})

上記のforEach()は、slice()を呼び出した配列を逆順でループします。

reverse()の前にslice()を呼び出さない場合は、呼び出し元の配列が反転します。

使用例

const numbers = [1, 2, 3, 4, 5];

numbers.slice().reverse().forEach((item) => {
    console.log(item);
})

出力：
5
4
3
2
1

２つ目は、for文とlengthプロパティを使う方法です。

まず、for文のループ変数をlengthプロパティで「-1」した値で初期化します。

for文の条件式には変数が０以上、増減式で変数を「-1」します。

for (var i = numbers.length - 1; i >= 0;i--) {
    //ループ処理
    //変数「i」でインデックスを取得
}

上記のforループは、配列のインデックスを逆順でループします。

使用例

const numbers = [1, 2, 3, 4, 5];

for (var i = numbers.length - 1; i >= 0;i--) {
    console.log(numbers[i]);
}

出力：
5
4
3
2
1

３つ目は、for文とreverse()を使う方法です。

まず、for文の()内でofの左辺に変数、ofの右辺に配列からslice().reverse()を呼び出した結果を指定します。

そして、for文の{}内にループ処理を指定します。

for (var item of array.slice().reverse()) {
    //ループ処理
}

上記のfor文は、slice().reverse()を呼び出した配列を逆順でループします。

使用例

const numbers = [1, 2, 3, 4, 5];

for (var num of numbers.slice().reverse()) {
    console.log(num);
}

出力：
5
4
3
2
1

配列(Array)を逆順でループする方法は、次の３つです。