📑

【JS】Mathについて解説

2021/10/06に公開

この記事では、数学的なメソッドなどを扱えるビルトインオブジェクトである、Mathについて解説していきます。

地味に使う機会が多いので、この機会に理解しちゃいましょう。

Mathオブジェクトについて


Mathオブジェクトは、コンストラクタではありません。

つまり、Dateのようにインスタンスを作らずとも、Mathの持つプロパティやメソッドを使用することができます。

具体的なメソッドを解説


では、具体的にどのようなメソッドがあるのかという事を解説していきます。

乱数の生成

randomメソッドで0以上1未満の乱数を生成することができます。

範囲を指定したかったら次のようにすればOKです。


// 0~1で乱数を生成
const random = Math.random();
console.log(random);
// 1~5で乱数を生成
const random2 = random * (5 - 1) + 1;
console.log(random2);

最大と最小の抽出

maxメソッドで最大値を、minメソッドで最小値を調べることができます。

下記のようにスプレッド構文を使った書き方が一般的かなと思います。


const arr = [1, 4, 7, 36];

// 36
console.log(Math.max(...arr));
// 1
console.log(Math.min(...arr));

小数点以下の扱い

Mathオブジェクトには小数点以下を扱うためのメソッドがいくつかあります。

floorで切り捨て、ceilで切り上げ、roundで四捨五入、truncで切り落とし、をすることができます。


const pi = 3.141592653589793;

// 3
console.log(Math.floor(pi));
// 4
console.log(Math.ceil(pi));
// 3
console.log(Math.round(pi));
// 3
console.log(Math.trunc(pi));

const pi2 = -3.141592653589793;

// -4
console.log(Math.floor(pi2));
// -3
console.log(Math.ceil(pi2));
// -3
console.log(Math.round(pi2));
// -3
console.log(Math.trunc(pi2));

絶対値を求める

absメソッドで絶対値を求めることができます。


const plus = 45;
const minus = -24;

// 45
console.log(Math.abs(plus));
// 24
console.log(Math.abs(minus));

プロパティについて


Mathオブジェクトには、様々なプロパティがあります。

ただ、どれも専門的なものばがりなので、あまり使うことはないかと思います。

強いて言えば、PIで円周率を表す定数が扱えるということだけ知っていればOKかなと。


// 3.141592653589793
console.log(Math.PI);

番外編:少数の計算について

JSは小数点の計算をするとずれます。

これは、いわゆる丸め誤差というものになり、詳しくはこの記事を参考にどうぞ。

https://blog.apar.jp/program/8900/

一言で説明すると、特定の小数点を計算しようとするとパソコンの性質上、値が微妙にズレてしまうのです。

57.01 + 10 
= 67.00999999999999

これを解決するためには、先ほど紹介した関数を使って以下のようにすればOKです。

(Math.floor(57.01 * 100) + Math.floor(10 * 100)) / 100
= 67.01

おわりに


今回は結構短めですが、これで以上になります。

今回紹介したメソッドを把握しておけば、実用面で困ることはあまり無いかなと。

さらに専門的な処理がしたい時は、公式ドキュメントを見ればOKです。

最後に宣伝です。

0からエンジニアになるためのノウハウをブログで発信しています。
https://hinoshin-blog.com/

また、YouTubeでの動画解説も始めました。
YouTubeのvideoIDが不正ですhttps://www.youtube.com/channel/UCqaBUPxazAcXaGSNbky1y4g

インスタの発信も細々とやっています。
https://www.instagram.com/hinoshin_enginner/

興味がある方は、ぜひリンクをクリックして確認してみてください!

おわり

Discussion