プロフィール
JavaScript PR

JavaScript – 配列を逆順にする方法

  /
記事内に商品プロモーションを含む場合があります

JavaScript (TypeScript )で、
配列の要素を逆順にする方法を紹介します！

Contents
  1. 基本的な方法（reverseメソッド）
  2. 配列のクローンを作る方法（sliceメソッド）
  3. forループでの手動反転
  4. まとめ

基本的な方法（reverseメソッド）

JavaScriptで配列を逆順にするには、
Array.prototype.reverse()メソッドがよく使われます。
※公式（Mozilla）

このメソッドは、配列自体の要素の順番を反転し、
元の配列にも影響を与えるため、注意が必要です

let numbers = [1, 2, 3, 4];
numbers.reverse(); 
console.log(numbers); // 結果：[4, 3, 2, 1]

スプレッド演算子を使うこともできます。

let numbers = [1, 2, 3, 4];
let reversedNumbers = [...numbers].reverse(); 
console.log(reversedNumbers); // [4, 3, 2, 1]
console.log(numbers); // [1, 2, 3]  元の配列はそのまま

元の配列を変更したくない場合は、
Array.prototype.toReversed()を使うと良いです
※古いブラウザでは使えない可能性もあります

const items = [1, 2, 3];
console.log(items); // [1, 2, 3]

const reversedItems = items.toReversed();
console.log(reversedItems); // [3, 2, 1]
console.log(items); // [1, 2, 3]

配列のクローンを作る方法（sliceメソッド）

元の配列を変更せずに逆順にしたい場合は、
slice()メソッドを用いて配列のクローンを作成し、
そのクローンに対してreverse()を実行する方法あります。

let numbers = [1, 2, 3, 4];
let reversedNumbers = numbers.slice().reverse(); 
console.log(reversedNumbers); // 結果：[4, 3, 2, 1]

forループでの手動反転

標準メソッドを使わずに
自作のアルゴリズムで
逆順にする方法もあります

let numbers = [1, 2, 3, 4];
let reversedNumbers = [];
for (let i = numbers.length - 1; i >= 0; i--) {
  reversedNumbers.push(numbers[i]);
}
console.log(reversedNumbers); // [4, 3, 2, 1]

まとめ

本記事では、
JavaScriptで配列を逆順にする方法を紹介しました！

  • 最も簡単で効率的な方法は
    reverse() メソッドを使うことです。
    このメソッドは配列そのものを反転させます。
  • 元の配列を変更したくない場合は、
    slice() やスプレッド演算子 (...) を使って
    コピーを作成してから使用するのが良いでしょう。
  • toReversed() メソッドも便利ですが、
    古いブラウザではサポートされていない
    可能性があるため注意が必要です。
  • 自作のアルゴリズムを使用した
    逆順の方法も紹介しました。

それぞれの方法を目的に応じて使い分けることで、
効率的にコードを記述することができます！

以上、誰かの参考になれば！

配列
RELATED POST