【JavaScript】配列から最小値・最大値を取得する

こんにちは、ryohei(@ityryohei)です!

本記事では、JavaScript配列から最小値・最大値を取得する方法をご紹介しています。

JavaScriptで配列から最小値と最大値を取得したいな。良い方法ないかな?

上記の疑問にお答えします。

では、解説していきます。

最大値・最小値の取得方法について

JavaScriptで最大値・最小値を取得するには、Mathオブジェクトのmin()max()を使用します。これらのメソッドは、引数に渡された値が数値であればメソッドに応じて最小値もしくは最大値を返し、値が数値でない場合はNaN(Not-A-Number) を返します。

console.log(Math.min(1, 2, 3, 4, 5)); //1
console.log(Math.max(1, 2, 3, 4, 5)); //5

引数に配列を指定することはできないですが、複数の数値を指定することができます。なので配列から最小値・最大値を取得したい場合は少し工夫が必要になります。

配列から最小値・最大値を取得する

配列から最小値・最大値を取得する方法は複数選択肢がありますが、ここでは下記を使用した方法をご紹介しています。

  • スプレッド構文
  • apply()

スプレッド構文

スプレッド構文は、配列などの変数の直前に...を指定することで内容を自動展開してくれる構文です。引数の配列にスプレッド構文を指定すると、配列内容を展開し、すべての値を関数に渡すことができます。

Mathオブジェクトのmin()max()では、引数に複数の数値が必要です。なので、引数にスプレッド構文で配列を指定することで、配列の値をすべて渡し、最小値・最大値の値を取得することができます。

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

console.log(Math.min(...array)); //1
console.log(Math.max(...array)); //10

参考:スプレッド構文 - JavaScript | MDN

apply()

apply()は、thisを指定し、処理を実行するメソッドです。関数に配列として値をまとめて渡すことができるため、ループ文を省略することができます。

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

console.log(Math.min.apply(null, array)); //1
console.log(Math.max.apply(null, array)); //10

参考:Function.prototype.apply() - JavaScript | MDN

これで配列から最小値・最大値の要素を取得することができます。

最後に

配列から最小値・最大値を取得する場合、ループ処理や配列の内容をすべて参照することができるメソッドであれば実現できます。ここではソースでよく見かけるMathオブジェクトを使用した方法をご紹介させていただきましたが、他にも良い方法が見つかれば記事に追記し、共有していきたいと思います。

以上、JavaScriptで配列から最小値・最大値を取得する方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら

おすすめの書籍