JavaScriptちゃんと学習中。
今回はMathオブジェクトについてです。
ほぼ自分の勉強メモです。
過度な期待はしないでください。
Mathオブジェクト
- Mathオブジェクトとは？
Mathオブジェクトは、数学的な定数と関数を提供するプロパティとメソッドを持つ、組み込みのオブジェクト。
Mathオブジェクトのメソッドとプロパティの一覧はこちらを参照
⇨ MDN web docs – Math
- Math.PI
Mathオブジェクトのプロパティには数学の定数が８つ定義されている。
Math.PIは、そうしたプロパティのひとつで、円周率を表す。
下記にコード例を記載
<p>円周率は <span id="pi"></span> です。</p>
'use strict';
document.getElementById('pi').textContent = Math.PI;
円周率は 3.141592653589793 です。
- Math.floor(x)
Mathオブジェクトのfloorメソッドは、( )内の数値の少数点以下を切り捨てる。
下記にコード例を記載
<p>少数点以下を切り捨てると <span id="floor"></span> です。</p>
'use strict';
document.getElementById('floor').textContent = Math.floor(Math.PI);
少数点以下を切り捨てると 3 です。
- Math.floor(x)（少数点◯位で切り捨て）
-Mathオブジェクトのfloorメソッドを使って、少数点◯位で切り捨てた数字を表示させる。
その為の手順が、
１、１０を「少数第◯位」迄で切り捨てたい数掛ける。
つまり、「少数第３位」迄にしたいなら、１０×１０×１０、１０の３乗をする。
２、数字に、１０の◯乗をした計算結果を掛ける事で少数点が移動する。
３、少数点が移動した数字の小数点以下を切り捨てる（Math.floorメソッドを使用する）
４、小数点以下を切り捨てた数字を、１０の◯乗をした計算結果で割る。
これで、小数点が元の位置に戻る。
下記にサンプルコードを記載していく
<p>小数第３位で切り捨てると <span id="output"></span> です。</p>
'use strict';
function position(integer, decimal) {
const mover = 10 ** decimal;
return Math.floor(integer * mover) / mover;
}
//無名関数を使用した場合
const point = function (integer, decimal) {
const mover = 10 ** decimal;
return Math.floor(integer * mover) / mover;
}
//アロー関数を使用した場合
const point = (integer, decimal) => {
const mover = 10 ** decimal;
return Math.floor(integer * mover) / mover;
}
document.getElementById('output').textContent = position(Math.PI, 3);
小数第3位で切り捨てると 3.141 です。
-引数を使って、関数を呼び出すときに一緒に値を渡す
function position(integer, decimal) {
・・・省略
document.getElementById('output').textContent = position(Math.PI, 3);
引数とは、関数に与える追加情報のようなもの
今回のコードでは、この部分 (integer, decimal)
第1引数は、切り捨てたい数字を、
第２引数は、「少数第◯位」の◯を指定する数字
関数の呼び出し方 → 「関数名( )」・「定数名( )」とする事で関数を呼び出す事が出来る
今回のコードでは、この部分 position(Math.PI, 3)
-手順の１を行う、つまり、１０の◯乗をする
const mover = 10 ** decimal;
**は、「a ** b」のとき、「aのb乗」を計算する演算子。
-残りの手順（２〜４）を行う
return Math.floor(integer * mover) / mover;
手順２、数字に１０の◯乗をした計算結果を掛ける
コードでは、この部分 integer * mover
⇨ 3.141592653589793 × １０００ = 3141.592653589793
手順３、少数点が移動した数字の小数点以下を切り捨てる
コードでは、この部分 Math.floor(integer * mover)
⇨ 3141.592653589793 = 3141
手順４、小数点以下を切り捨てた数字を、１０の◯乗をした計算結果で割る
コードでは、この部分 Math.floor(integer * mover) / mover;
⇨ 3141 / １０００ = 3.141
最後にreturnを使って戻り値として返す
- Math.random()
-Mathオブジェクトのrandomメソッドは、0 以上 1 未満の疑似乱数を返す（1は入らない）
下記にサンプルコードを記載していく
<p>生成した乱数は <span id="random"></span> です。</p>
'use strict';
document.getElementById('random').textContent = Math.random();
// 0以上1未満の乱数
生成した乱数は 0.14116811964840115 です。
- Math.random()【乱数の「範囲」を指定】
今度は「0〜10」の範囲における乱数の作成。
ここで注意が必要なのは「Math.random()」は0〜1未満（0〜0.9999････）の少数を返すという点。
つまり、「0〜10」の範囲を作りたい場合、最大値の10をそのまま掛けてしまうと「0〜9」の範囲に
なってしまう。その為、最大値に1を足して「11」を掛けることで、「0〜10」の範囲を設定出来る。
また、「floor( )」メソッドを使って小数点を切り捨てて整数にする。
<p>生成した乱数は <span id="random"></span> です。</p>
'use strict';
document.getElementById('random').textContent = Math.floor( Math.random() * 11 );
// １以上1０以下の乱数
生成した乱数は ５ です。
- Math.random()【最小値・最大値を設定】
書き方：Math.random() * ( 最大値 - 最小値 ) + 最小値;
ここでの注意点は、「最大値」についてですが、今回最小値を5、最大値10とするのであれば、
先程説明した通り、10に1を足した「11」が「最大値」であるので注意。
<p>生成した乱数は <span id="random"></span> です。</p>
'use strict';
document.getElementById('random').textContent = Math.floor(Math.random() * (11 - 5)) + 5;
// 5以上1０以下の乱数
生成した乱数は 7 です。
※Mathオブジェクトは、全て読み取り専用で書き換える事が出来ないようになっていて、
オブジェクトごとに独自のプロパティ値を持つ必要がない。その為、Mathオブジェクトは、
元のオブジェクトからコピー出来ない、つまりインスタンスの生成が出来ない。
過去投稿記事 - [【JavaScript ~変数・定数、if文・switch文~】勉強メモ](https://qiita.com/k-yasuhiro/items/1fb63f0881faf67bcb29) [【JavaScript ~for文、配列、オブジェクトについて~】勉強メモ②](https://qiita.com/k-yasuhiro/items/6625942cc901feb6bfdf) [【JavaScript ~関数について~】勉強メモ③](https://qiita.com/k-yasuhiro/items/52e3ebb79bb0248a7c5e) [【JavaScript ~クラスやインスタンス、メソッドについて~】勉強メモ④](https://qiita.com/k-yasuhiro/items/52e3ebb79bb0248a7c5e) [【JavaScript ~ファイルの分割について~】勉強メモ⑤](https://qiita.com/k-yasuhiro/items/209eda27bbc61ae961a1) [【JavaScript 読み込み】勉強メモ⑥](https://qiita.com/k-yasuhiro/items/fe3fc2bd7b14fe4f3968) [【JavaScript ~配列のメソッド~】勉強メモ⑦](https://qiita.com/k-yasuhiro/items/279b7bb59f112f917c51) [【JavaScript ~コールバック関数~】勉強メモ⑧](https://qiita.com/k-yasuhiro/private/ded7e2cad732774d059e) [【JavaScript ~HTMLを置き換え、ダイアログボックス~】勉強メモ⑨](https://qiita.com/k-yasuhiro/items/7a72bf38d78b141d6fac) [【JavaScript ~イベント~】勉強メモ⑩](https://qiita.com/k-yasuhiro/items/b0d4037d0edaae38a495) [【JavaScript ~イベント(入力内容を取得)とDateオブジェクト~】勉強メモ11](https://qiita.com/k-yasuhiro/items/fa586154cf7064eb7058)