D12 - 那些年算不出来的 Math

前言

在 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之数学之美