前言

在 JavaScript 中有個物件 Math，內建了數學上會用到的常數和運算式，那些年算不出的log、三角函數，通通設置好參數帶入就對了，甚至還有隨機功能！

數學小弱弱也有春天，一起來看看

Math Object

Math 的語法只能操作在 number 型別上，並不支援用來表示超大數字的 BigInt，想了解 BigInt 請看 初學者跪著學JavaScript Day8 : 資料型別：BigInt （文末附有絕對被逗樂的跪姿手繪圖）

Math 屬性

Math 內建多種表示數學常數的屬性值

Math 方法

1. 絕對值 Math.abs(x)

• 參數：x 須為數字，也可放入能轉為有效數字的字串或陣列
• 回傳：x 取絕對值後的數字

// 一般放入數字
Math.abs(-2);       // 2
Math.abs(-2.45);    // 2.45
Math.abs(-2, -3);   // 2 over one value

//也可接受以下型態
Math.abs(null);     // 0
Math.abs('-1');     // 1
Math.abs('');       // 0
Math.abs([]);       // 0
Math.abs([-2]);     // 2

//以下輸入值結果為 NaN
Math.abs([1,2]);    // NaN ，超過一個數字以上
Math.abs({});       // NaN
Math.abs('string'); // NaN
Math.abs();         // NaN

2. 開根號 Math.sqrt(x)

• 參數：x 須為數字，或可轉型為有效數字的字串或陣列
• 回傳：x 開根號後的數字，負數回傳 NaN

Math.sqrt(9)     // 3
Math.sqrt('9')   // 3
Math.sqrt([9])   // 3
Math.sqrt(9, 4)  // 3，超過一個數字以上僅回傳第一個數字的根號值

// NaN
Math.sqrt(-9)  // NaN

3. 次方 Math.pow(x, y)

• 參數：x 為底數，y 為次方數，可放入正數、負數、小數
• 回傳：x 的 y 次方數字

Math.pow(2,0)   // 1
Math.pow(2,2)   // 4

// 次方位也可放小數
Math.pow(4, 0.5)  // 2，0.5 次方同 4 開根號
Math.pow(8, 1/3)  // 2

// 負數
Math.pow(4, -1)   // 0.25
Math.pow(4, -0.5) // 0.5
Math.pow(-4, 3)   // -64

// NaN -> 底數為負數，次方數放非整數數字皆回傳 NaN
Math.pow(-4, 0.5) // NaN

應用分享
上面兩個 Math 方法可以用在哪呢？ 用來算出兩點間的距離！
還記得那個聽起來很像 股溝 的勾股定理嗎

題目：求豬到兔子間的距離

c 的平方 = Math.pow(a, 2) + Math.pow(b, 2)
c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2))

4. 對數 Math.log(x)、Math.log2(x)、Math.log10(x)

Math 中有三個不同基數的 Log method：
Math.log(x) 底數為 e
Math.log10(x) 底數為 10
Math.log2(x) 底數為 2

• 參數：x 須為數字
• 回傳：x 基於底數的對數，若 x 為負數回傳 NaN

還記得那些年教過的 log 嗎？ 還是已經完璧歸數學老師，快速複習一下

對數 Log
為冪運算的逆運算。
也就是是說，假如 ，則
B 是對數的底（也稱為底數），而 y 就是 x（基於底數 B）的對數。
例： 3 x 3 x 3 x 3 = 81，可以得出
使用對數表示
即「 81 以 3 為底的對數是 4 」，也就是 3 的 4 次方是 81。

// Math.log
Math.log(Math.E)  // 1
Math.log(0)       // -infinity
Math.log(-2)      // NaN
Math.log(32) / Math.log(2) // 5，以此運算出 32 是 2 的幾次方

// Math.log10
Math.log10(1)   // 0
Math.log10(10)  // 1
Math.log10(100) // 2
Math.log10(0)   // -infinity

// Math.log2
Math.log2(1)   // 0
Math.log2(4)   // 2
Math.log2(32)  // 5
Math.log2(0)   // -infinity

5. 最大值 Math.max(num1, num2) 、 最小值 Math.min(num1, num2)

• 參數：num1 須為數字，或是可以轉型為有效數字的字串或陣列，參數不限數量須以逗號隔開
• 回傳：參數內的最大數字

// 一般
Math.max(1,2,3,4)         // 4
Math.max('1','2','3','4') // 4
Math.max([1],[2],[3],[4]) // 4

// 無參數預設回傳 -infinity
Math.max() // -infinity

// 回傳 NaN
Math.max('1,2,3,4')
Math.max([1,2,3,4])

也可以套用在上一篇講過的解構賦值上， 透過 ... 其餘運算子放入參數中

let arr = [1, 2, 100, 4]
Math.max(...arr)    // 100

6. 無條件進位 Math.ceil(x)

• 參數：x 須為數字，可以是正數、負數、小數
• 回傳：x 經無條件進位到整數位的數字

Math.ceil(2);     // 2
Math.ceil(2.45);  // 3
Math.ceil(2.65);  // 3
Math.ceil(-1.3);  // -1
Math.ceil(-1.9);  // -1

7. 無條件捨去 Math.floor(x)

• 參數：x 須為數字，可以是正數、負數、小數
• 回傳：x 經無條件捨去到整數位的數字

另一種無條件捨去的小技巧是利用 double tilde 位元運算子 ~~ 也可以做到無條件捨去到整數為，詳細請看 D2 - 先生 幫您帶位元運算子，私下很愛用兩條毛毛蟲做無條件捨去 (工程師浪漫？)，但這個語法比較像小撇步，在協作專案上還是請用 Math.floor 較好閱讀(不要為難同事辣)

Math.floor(2);    // 2
Math.floor(2.45);  // 2
Math.floor(2.65);  // 2
Math.floor(-1.3); // -2
Math.floor(-1.9); // -2

// double tilde
~~(2.45)  // 2
~~(-10.6) // -10

8. 四捨五入 Math.round

• 參數：x 須為數字，可以是正數、負數、小數
• 回傳：x 經四捨五入到整數位的數字

Math.floor(2);    // 2
Math.floor(2.4);  // 2
Math.floor(2.65); // 3
Math.floor(-1.3); // -1
Math.floor(-1.9); // -2

9. 取隨機數Math.random()

• 參數：無
• 回傳：隨機回傳介於 0 - 1 之間的浮點數， 0 <= Math.random() < 1 (不包括 1)

// 乘 10 後無條件捨去得整數數字
Math.floor(Math.random() * 10) // 隨機產生 1,2,3,4,5,6,7,8,9

// 設定隨機數字範圍值 (不含上限值)
// 取 10~20 間的隨機整數數字
Math.floor(Math.random() * (20 - 10) + 10);

// 設定隨機數字範圍值 (含上限值)
// 取 10~20 間的隨機整數數字
Math.floor(Math.random() * (20 - 10 + 1) + 10);

10. 三角函數方法

結語

Math 內建的三角函數方法可以計算出弧度，適合用在圓周運動的物體軌跡計算上
待之後分享實作作品時再進一步解釋！

Reference：

MDN
JavaScript之数学之美