iT邦幫忙

2021 iThome 鐵人賽

DAY 12
1
Modern Web

舌尖上的JS系列 第 12

D12 - 那些年算不出來的 Math

前言

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

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

Math Object

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

Math 屬性

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

Math property
Math.E 尤拉常數, 接近於 2.718。
Math.LN2 2 的自然對數,約為0.693。
Math.LN10 10 的自然對數,約為2.303。
Math.LOG2E 以 2 為底的 E 的對數,約為1.443。
Math.LOG10E 以 10 為底的 E 的對數,約為0.434。
Math.PI 一個圓的圓周和其直徑比值,約為 3.14159。
Math.SQRT1_2 1/2的平方根;也就是1除以2的平方根,約為 0.707。
Math.SQRT2 2的平方根,約為 1.414。

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 方法可以用在哪呢? 用來算出兩點間的距離!
還記得那個聽起來很像 股溝 的勾股定理嗎
https://chart.googleapis.com/chart?cht=tx&chl=a%5E2%20%2B%20b%5E2%20%3D%20c%5E2

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

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
為冪運算的逆運算。
也就是是說,假如 https://chart.googleapis.com/chart?cht=tx&chl=x%3DB%5Ey%5E,則 https://chart.googleapis.com/chart?cht=tx&chl=y%20%3D%20log_B%203
B 是對數的底(也稱為底數),而 y 就是 x(基於底數 B)的對數。
例: 3 x 3 x 3 x 3 = 81,可以得出 https://chart.googleapis.com/chart?cht=tx&chl=81%20%3D%203%5E4
使用對數表示 https://chart.googleapis.com/chart?cht=tx&chl=%204%20%3D%20%20log_3%2081
即「 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.sin(x) Math.asin(x)
Math.cos(x) Math.acos(x)
Math.tan(x) Math.atan(x)

結語

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

Reference:

MDN
JavaScript之数学之美


上一篇
D11 - 分子料理 解構賦值 Destructing Assignment
下一篇
D13 - 做出雞蛋糕 new + Constructor
系列文
舌尖上的JS30
1
Chiahsuan
iT邦新手 4 級 ‧ 2021-09-27 14:56:27

還是討厭永遠都考不及格的三角函數/images/emoticon/emoticon02.gif

Rex iT邦新手 5 級 ‧ 2021-09-27 15:34:36 檢舉

那些年算錯的math,那些年錯過的成績/images/emoticon/emoticon33.gif

Hooo iT邦新手 5 級 ‧ 2021-09-28 10:34:28 檢舉

那些年的膠原蛋白

2
CathyShen
iT邦新手 5 級 ‧ 2021-09-27 16:16:38

老師,我把數學知識還給你了,學費可以退給我了嗎?

Hooo iT邦新手 5 級 ‧ 2021-09-28 10:34:57 檢舉

從國中退到大學(?)

0
wendy
iT邦新手 4 級 ‧ 2021-09-28 22:44:46

謝謝你的安利

我要留言

立即登入留言