×

介绍一些有用的JavaScript数学函数以及如何使用它们

作者:Web前端之家2022.09.28来源:Web前端之家浏览:737评论:0
关键词:js
微信公众号

微信公众号

500.jpg

内置的 JavaScript Math 对象包括许多用于执行各种数学运算的有用函数。让我们深入了解一下它们是如何工作的以及您可以将它们用于什么用途。

Math.max 和 Math.min

这些函数几乎可以满足您的期望:它们返回提供的参数列表的最大值或最小值:

Math.max(1,2,3,4,5)
<< 5

Math.min(4,71,-7,2,1,0)
<< -7

参数都必须是Number 数据类型。否则,NaN将被退回:

Math.max('a','b','c')
<< NaN

Math.min(5,"hello",6)
<< NaN

不过要小心。JavaScript 将尝试将值强制转换为数字:

Math.min(5,true,6)
<< 1

在此示例中,布尔值true被强制转换为 number 1,这就是它作为最小值返回的原因。如果您不熟悉类型强制,那么当运算符的操作数属于不同类型时就会发生这种情况。在这种情况下,JavaScript 将尝试将一个操作数转换为另一个操作数类型的等效值。

需要提供一个数字列表作为参数,而不是一个数组,但是您可以使用扩展运算符 ( ...) 来解包一个数字数组:

Math.max(...[8,4,2,1])
<< 8

Math.max函数对于从保存在数组中的分数列表中查找高分很有用:

const scores = [23,12,52,6,25,38,19,37,76,54,24]
const highScore = Math.max(...scores)
<< 76

Math.min功能对于在价格比较网站上查找最佳价格很有用:

const prices = [19.99, 20.25, 18.57, 19,75, 25, 22.50]
const bestPrice = Math.min(...prices)
<< 18.57

绝对值

绝对值只是数字的大小,无论其大小如何。这意味着正数保持不变,负数失去减号。该Math.abs函数将计算其参数的绝对值:

Math.abs(5)
<< 5

Math.abs(-42)
<< 42

Math.abs(-3.14159)
<< 3.14159

你为什么想做这个?好吧,有时您想计算两个值之间的差值,可以通过从最大值中减去最小值来计算,但通常您不会事先知道两个值中的最小值。为了解决这个问题,您可以按任意顺序减去数字并取绝对值:

const x = 5
const y = 8

const difference = Math.abs(x - y)
<< 3

一个实际的例子可能是在一个省钱的网站上,您想知道通过计算两笔交易之间的差价可以节省多少,因为您将处理实时价格数据并且不会提前知道哪笔交易是最便宜的:

const dealA = 150
const dealB = 167

const saving = Math.abs(dealA - dealB)
<< 17

Math.pow

Math.pow执行功率计算,如下所示:

3⁴ = 81

在上面的示例中,3 被称为基数,4 是指数。我们会将其读作“3 的 4 次方是 81”。

该函数接受两个值 - 基数和指数 - 并返回将基数提高到指数幂的结果:

Math.pow(2,3)
<< 8

Math.pow(8,0)
<< 1

Math.pow(-1,-1)
<< -1

Math.pow几乎已被**ES2016 中引入的中缀求幂运算符 ( ) 所取代 - 它执行完全相同的操作:

2 ** 3
<< 8

8 ** 0
<< 1

(-1) ** (-1)
<< -1

计算根

根是幂的逆运算。例如,因为 3 的平方是 9,所以 9 的平方根是 3。

Math.sqrt可用于返回作为参数提供的数字的平方根:

Math.sqrt(4)
<< 2

Math.sqrt(100)
<< 10

Math.sqrt(2)
<< 1.4142135623730951

NaN如果提供负数或非数值作为参数,此函数将返回:

Math.sqrt(-1)
<< NaN

Math.sqrt("four")
<< NaN

但要小心,因为 JavaScript 会尝试强制类型:

Math.sqrt('4')
<< 2

Math.sqrt(true)
<< 1

Math.cbrt返回数字的立方根。这接受所有数字——包括负数。如果使用不是数字的值,它还将尝试强制类型。如果它不能将值强制为数字,它将返回NaN

Math.cbrt(1000)
<< 10

Math.cbrt(-1000)
<< -10

Math.cbrt("10")
<< 2.154434690031884

Math.cbrt(false)
<< 0

可以使用幂运算符和分数幂来计算其他根。例如,一个数字的四次方根可以通过将其提高到四分之一(或 0.25)的幂来找到。所以下面的代码将返回 625 的第四个根:

625 ** 0.25
<< 5

要找到一个数的五次方根,可以将其提高到五分之一(或 0.2)的幂:

32 ** 0.2
<< 2

一般来说,要找到一个数的 n 次方根,您需要将其提升到 的次方1/n,因此要找到一百万的六次方,您需要将其提升到 1/6 次方:

1000000 ** (1/6)
<< 9.999999999999998

请注意,这里有一个舍入误差,因为答案应该正好是 10。这通常会发生在无法以二进制精确表示的分数幂的情况下。

另请注意,如果根是偶数,则无法找到负数的根。这将返回NaN。因此,例如,您不能尝试找到 -7 的第 10 个根(因为 10 是偶数):

(-7) ** 0.1 // 0.1 is 1/10
<< NaN

您可能想要计算根的原因之一是计算增长率。例如,假设您想在年底前将利润提高 10 倍。您的利润每个月需要增长多少?要找出这一点,您需要计算 10 的 12 次方,或 10 的 12 次方:

10 ** (1/12)
<< 1.2115276586285884

这个结果告诉我们,每月增长系数必须在 1.21 左右才能在年底前实现 10 倍的利润。或者换一种说法,你需要每个月增加 21% 的利润才能实现你的目标。

日志和指数

对数(或简称为对数)可用于查找计算的指数。例如,假设您想求解以下方程:

2ˣ = 100

在上面的等式中,x肯定不是整数,因为 100 不是 2 的幂。这可以通过使用以 2 为底的对数来解决:

x = log²(100) = 6.64 (rounded to 2 d.p.)

Math对象具有log2将执行此计算的方法:

Math.log2(100)
<< 6.643856189774724

它还有一个log10执行相同计算的方法,但使用 10 作为基数:

Math.log10(100)
<< 2

这个结果告诉我们,要获得 100,您需要将 10 提高到 2 的幂。

还有另一种日志方法,就是Math.log. 这会计算自然对数,它使用欧拉数(e大约 2.7)作为底数。这似乎是一个奇怪的值,但它实际上经常在发生指数增长时出现在自然界中——因此得名“自然对数”:

Math.log(10)
<< 4.605170185988092

Math.log(Math.E)
<< 1

最后的计算表明,欧拉数 ( e) - 存储为常数Math.E- 需要提高到 1 的幂才能获得它自己。这是有道理的,因为任何 1 次方的数字实际上就是它自己。Math.log2如果将 2 和 10 作为 和 的参数提供,则可以获得相同的结果Math.log10

Math.log2(2)
<< 1

Math.log10(10)
<< 1

为什么要使用对数?在处理呈指数增长的数据时,通常使用对数刻度,以便更容易看到增长率。对数标度通常用于衡量大流行期间每日 COVID-19 病例的数量,因为它们上升得如此之快。

如果您有幸拥有一个受欢迎程度迅速增长的网站(例如,每天翻一番),那么您可能需要考虑在显示图表之前使用对数刻度来显示您的受欢迎程度如何增长。

斜边

你可能还记得在学校学习毕达哥拉斯定理。这表明可以使用以下公式找到直角三角形(斜边)的最长边的长度:

h² = x² + y²

这里,x 和 y 是另外两条边的长度。

Math对象有一个hypot方法,当提供其他两个长度作为参数时,该方法将计算斜边的长度。例如,如果一侧的长度为 3,而另一侧的长度为 4,我们可以使用以下代码计算出斜边:

Math.hypot(3,4)
<< 5

但是为什么这会有用呢?好吧,斜边是两点之间最短距离的度量。这意味着,如果您知道页面上两个元素的 x 和 y 坐标,则可以使用此函数来计算它们之间的距离:

const ship = {x: 220, y: 100}
const boat = {x: 340, y: 50}

const distance = Math.hypot(ship.x - boat.x,ship.y - boat.y)

我希望这个简短的综述对您有所帮助,并帮助您在项目中充分利用 JavaScript 数学对象的强大功能。

您的支持是我们创作的动力!
温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/functions20220928.html

网友评论文明上网理性发言 已有0人参与

发表评论:

ad

最新留言

  • fg123

    提示什么报错信息?...

  • 访客

    为什么第一步点击提交后弹出框点击确认后没有反应?...

  • fati

    刚好遇到setState的问题,感谢分享!...

  • derv3

    现在已经很多开源CMS了,对于个人来说,自己开发难度极大。...

  • derv3

    Cookies很多用途吧...

  • 访客

    sddddddddddddddVS的vVSVS但是v方法v方法v发v方法v发v发v方不方便德文法文...

  • 没人发言

    鸡肋的功能...

  • 23b

    这个你应该加群找群主才对吧...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2022 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.7.2