配列内の要素の順序を逆順にする - reverse, toReversed

《初回公開：2023/10/19 , 最終更新：未》

配列内の要素の順序を逆順に反転させるには、破壊的メソッドであるreverseメソッドと非破壊的メソッドであるtoReversedメソッドがある。
これらのメソッドは空のスロットをスキップしないようだ。

【　目次　】

配列内の要素の順序を逆順にする - reverse, toReversed
- reverse
- toReversed

reverse

reverseメソッドは、配列内の要素の順序を逆順に反転させる破壊的メソッド。

構文: array.reverse()
戻り値: 元の配列を反転しその元の配列の参照を返す

reverseは破壊的メソッドなので、配列自身を変化させる。

const array = ["a", "b", "c"];
array.reverse();
console.log(array); // ['c', 'b', 'a']

空のスロットがある配列の場合は。

const array = ["a", "b", , "d"];
console.log(array.reverse());   // ['d', なし, 'b', 'a']

reverseは元の変更された配列自身の参照を返す。

const array = ["a", "b", "c"];
console.log(array.reverse());   // ['c', 'b', 'a']

元の変更された配列自身の参照を返すので、他の配列のメソッドをメソッドチェインで繋げる事ができる。

const array = ["a", "b", "c"];
array.reverse().forEach(element => console.log(element));
// c
// b
// a

toReversed

toReversedメソッドは、新しい配列を作成し元の配列内の要素の順序を逆順に反転させた配列を返す非破壊的メソッド。

構文: array.toReversed()
戻り値: 元の配列を反転した新しい配列を返す

例

const array = ["a", "b", "c"];
const result = array.toReversed();
console.log(array, result); // ['a', 'b', 'c'] ['c', 'b', 'a']

toReversedメソッドも配列を返すのでメソッドチェインが可能。

空のスロットの扱いに注意(私の実行環境だけかもしれないが)。
reverseメソッドは空のスロットは空のスロットのままであるが、toReversedメソッドは元の配列をコピーする際に空のスロットがundefinedに変化しているようだ。

{
    // reverseメソッドのふるまい
    const array = ["a", "b", , "d"];
    let array2 = array.reverse();
    console.log(array2, array2.hasOwnProperty(1));  //  ['d', なし, 'b', 'a'] false
}
{
    // toReversedメソッドのふるまい
    const array = ["a", "b", , "d"];
    let array2 = array.toReversed();
    console.log(array2, array2.hasOwnProperty(1));  //  ['d', undefined, 'b', 'a'] true
}