美文网首页Web前端之路前端开发
全面认识JavaScript的Math对象

全面认识JavaScript的Math对象

作者: 皮皮坤666 | 来源:发表于2019-05-28 16:16 被阅读1次

全面认识JavaScript的Math对象

Math是一个内置对象,它具有数学常数和函数的属性和方法。不是一个函数对象。

与其他全局对象不同的是,Math不是一个构造器。Math的所有属性和方法都是静态的。JavaScript中的常数, 是以全精度的实数定义的。

常数

这里的常数都是Math对象的静态属性,所以应该使用Math.属性名的方式调用,而不是作为创建的Math实例对象的属性来使用,Math不是构造函数。

1.Math.E 属性表示自然对数的底数(或者成为基数)

Math.E

2.Math.LN2 属性表示2的自然对数,约为0.693:

Math.LN2

3.Math.LN10 属性表示10的自然对数,约为2.302:

Math.LN10

4.Math.LOG2E 属性表示以2为底数,e的对数,约为1.442

Math.LOG2E

5.Math.LOG10E 属性表示以10为底数,e的对数,约为0.434:

Math.LOG10E

6.Math.PI 属性表示一个圆的周长与直径的比例,约为2.14159:

Math.PI

7.Math.SQRT1_2 属性表示1/2的平方根,约为0.707:

Math.SQRT1_2

8.Math.SQRT2 属性表示2的平方根,约为1.414

它们的属性特性:
属性的属性特性
writable false
enumerable false
configurable false
实例

  console.log(Math.E); // 2.718281828459045
  console.log(Math.LN2); // 0.6931471805599453
  console.log(Math.LN10); // 2.302585092994046
  console.log(Math.LOG2E); // 1.4426950408889634
  console.log(Math.LOG10E); // 0.4342944819032518
  console.log(Math.PI); // 3.141592653589793
  console.log(Math.SQRT1_2); // 0.7071067811865476
  console.log(Math.SQRT2); // 1.4142135623730951

方法

Math这些方法和属性类似,他们是静态方法,调用方式:Math.方法名

需要注意的是很多数学函数都有一个精度,并且精度在不同环境下也是不同的。这就意味着不同的浏览器会给出不同的结果,设置相同的js引擎在不同的OS或者架构下也会给出不同的结果。

个人将Math的这些方法进行整理分类为以下几类,方便记忆和对比:

第一类,舍入运算:abs/round/floor/ceil/trunc

Math.abs(x) 函数返回指定数字x的绝对值

Math.abs
语法:Math.abs(x);
示例:

  console.log(Math.abs('-1')); // 1
  console.log(Math.abs(-2)); // 2
  console.log(Math.abs(Infinity)); // Infinity
  console.log(Math.abs(-Infinity)); // Infinity
  console.log(Math.abs(null)); // 0
  console.log(Math.abs('string')); // NaN
  console.log(Math.abs()); // NaN

Math.round() 函数返回一个数字四舍五入后最接近的整数。

语法:

  Math.round(x);

  // 返回值:给定数字的值四舍五入到最接近的整数

如果参数的小数部分大于0.5,则舍入到相邻的绝对值更大的整数。如果参数的小数部分小于0.5,则舍入到相邻的绝对值更小的整数。如果参数的小数部分恰好等于0.5,则舍入到相邻的在正无穷(+∞)方向上的整数。与很多其他语言汇总的round() 函数不同,Math.round()并不总是舍入到远离0的方向(尤其是在负数的小数部分恰好等于0.5的情况下)。

示例:

  console.log(Math.round(2.4)); // 2
  console.log(Math.round(2.5)); // 3  2.5靠近正无穷的方向是3
  console.log(Math.round(2.6)); // 3
  console.log(Math.round(-2.4)); // -2
  console.log(Math.round(-2.5)); // -2  -2.5靠近正无穷的方向是-2
  console.log(Math.round(-2.6)); // -3
  console.log(Math.round('-1.3')); // -1
  console.log(Math.round(Infinity)); // Infinity
  console.log(Math.round(-Infinity)); // -Infinity
  console.log(Math.round(null)); // 0
  console.log(Math.round('string')); // NaN
  console.log(Math.round()); // NaN

个人理解:可以看到round方法也会先对参数进行Number()转换,然后再取舍。

Math.floor() 返回小于或等于一个给定数字的最大整数。

语法:

  Math.floor(x);

  // 返回值:一个表示小于或等于指定数字的最大整数的数字

示例:

  console.log(Math.floor(2.4)); // 2
  console.log(Math.floor(2.5)); // 2
  console.log(Math.floor(2.6)); // 2
  console.log(Math.floor(-2.4)); // -3
  console.log(Math.floor(-2.5)); // -3
  console.log(Math.floor(-2.6)); // -3
  console.log(Math.floor('-1.3')); // -2 向下取整是-2,因为-2小于-1
  console.log(Math.floor(Infinity)); // Infinity
  console.log(Math.floor(-Infinity)); // -Infinity
  console.log(Math.floor(null)); // 0
  console.log(Math.floor('string')); // NaN
  console.log(Math.floor()); // NaN

Math.ceil() 函数返回大于或等于一个给定数字的最小整数。

语法:

  Math.ceil(x);

  // 返回值:大于或等于给定数字的最小整数

示例:

  console.log(Math.ceil(2.4)); // 3
  console.log(Math.ceil(2.5)); // 3
  console.log(Math.ceil(2.6)); // 3
  console.log(Math.ceil(-2.4)); // -2
  console.log(Math.ceil(-2.5)); // -2
  console.log(Math.ceil(-2.6)); // -2
  console.log(Math.ceil('-1.3')); // -1 -1是比-1.3更大的整数
  console.log(Math.ceil(null)); // 0
  console.log(Math.ceil('string')); // NaN
  console.log(Math.ceil()); // NaN

Math.trunc() 方法将数字的小数部分去掉,只保留整数部分。

语法:

  Math.trunc(value);

  // 返回值:给定数字的整数部分

不像Math的其他三个取舍方法,Math.trunc()的执行逻辑很简单,仅仅是删除掉数字的小数部分和小数点,不管参数是整数还是负数。

示例:

  console.log(Math.trunc(2.4)); // 2
  console.log(Math.trunc(2.5)); // 2
  console.log(Math.trunc(2.6)); // 2
  console.log(Math.trunc(-2.4)); // -2
  console.log(Math.trunc(-2.5)); // -2
  console.log(Math.trunc(-2.6)); // -2
  console.log(Math.trunc('-1.3')); // -1
  console.log(Math.trunc(null)); // 0
  console.log(Math.trunc('string')); // NaN
  console.log(Math.trunc()); // NaN

Polyfill
  // 注意0.2,-0.2,0这些情况
  if (!Math.trunc) {
    Math.trunc = function(v) {
      v = +v;
      if (!isFinite(v)) return v;

      return (v - v % 1) || (v < 0 ? -0 : v === 0 ? v : 0);
    }
  }


第二类,指数对数运算:pow/sqrt/cbrt/exp/expm1/log/log1p/log10/1og2

Math.pow() 函数返回基数的指数次幂。

语法:

  Math.pow(base, exponent); 

  // 返回值:base^exponent

示例:

  console.log(Math.pow(2, -2)); // 0.25
  console.log(Math.pow('2','2')); // 4
  console.log(Math.pow('2','2.2')); // 4.59479341998814
  console.log(Math.pow(2, null)); // 1 类似2^0
  console.log(Math.pow(2, Infinity)); // Infinity
  console.log(Math.pow(2, -Infinity)); // 0
  console.log(Math.pow(2, 'string')); // NaN
  console.log(Math.pow(2)); // NaN
  console.log(Math.pow()); // NaN

Math.sqrt() 函数返回一个数的平方根

语法:Math.sqrt(x);,如果参数是负数,则返回NaN
示例:

  console.log(Math.sqrt(4)); // 2
  console.log(Math.sqrt(-4)); // NaN
  console.log(Math.sqrt(4.9)); // 2.2135943621178655
  console.log(Math.sqrt('0.49')); // 0.7
  console.log(Math.sqrt(Infinity)); // Infinity
  console.log(Math.sqrt(-Infinity)); // NaN
  console.log(Math.sqrt(null)); // 0
  console.log(Math.sqrt('string')); // NaN
  console.log(Math.sqrt()); // NaN

Math.cbrt() 函数返回任意数字的立方根。

语法:Math.cbrt(x);
示例:

  console.log(Math.cbrt(8)); // 2
  console.log(Math.cbrt(-8)); // -2
  console.log(Math.cbrt(0.027)); // 0.3
  console.log(Math.cbrt('0.027')); // 0.3
  console.log(Math.cbrt(null)); // 0
  console.log(Math.cbrt(Infinity)); // Infinity
  console.log(Math.cbrt(-Infinity)); // -Infinity
  console.log(Math.cbrt('string')); // NaN
  console.log(Math.cbrt()); // NaN

Polyfill

  if(!Math.cbrt) {
    Math.cbrt = function(x) {
      let y = Math.pow(Math.abs(x), 1/3);
      return x < 0 ? -y : y;
    }
  }

Math.exp() 函数返回ex,x表示参数,e是欧拉常数(Math.E),自然对数的底数。

语法:Math.exp(x);
示例:

  console.log(Math.exp(2)); // 7.38905609893065
  console.log(Math.exp('2')); // 7.38905609893065
  console.log(Math.exp(-2)); // 0.1353352832366127
  console.log(Math.exp(null)); // 1
  console.log(Math.exp(-Infinity)); // 0
  console.log(Math.exp(Infinity)); // Infinity
  console.log(Math.exp('string')); // NaN
  console.log(Math.exp()); // NaN

Math.expm1()返回ex-1。

语法:Math.expm1(x),等价于Math.exp(x) - 1,故参照上面即可。

Math.log() 函数返回一个数的自然对数

注意这里是返回一个自然对数,即底数是e不是10,也就是手写的ln方法
语法:Math.log(x);,如果参数为负数,则返回NaN。
示例:

  console.log(Math.log(Math.E)); // 1
  console.log(Math.log(10)); // 2.302585092994046
  console.log(Math.log(1)); // 0 任何数的0次方等于1
  console.log(Math.log(-1)); // NaN
  console.log(Math.log(0)); // -Infinity  e^-Infintiy = 0
  console.log(Math.log(null)); // -Infinity
  console.log(Math.log(-Infinity)); // NaN
  console.log(Math.log(Infinity)); // Infinity e^Infinity = Infinity
  console.log(Math.log('string')); // NaN
  console.log(Math.log()); // NaN

根据同底数相除的规则,可以求x为底y的对数,即logxy

  function getBaseLog(x, y) {
    return Math.log(y) / Math.log(x);
  }

  console.log(getBaseLog(3, 9)); // 2.0000000000000004
  console.log(getBaseLog(10, 1000)); // 2.9999999999999996

  // 非常接近正确答案,但是由于浮点数精度问题,会显示成上面的样子

Math.log1p() 函数返回一个数字加1后的自然对数,即log(x+1)

语法:Math.log1p(x);,如果参数小于-1,则返回NaN
函数 y = log(x+1) 的图像:
y=log(x+1)
用法参照Math.log()

Math.log10() 函数返回一个数字以10为底的对数。

语法:Math.log10(x),如果传入的参数小于0,则返回NaN。
示例:

  console.log(Math.log10(10)); // 1
  console.log(Math.log10('10')); // 1
  console.log(Math.log10(1)); // 0 任何数的0次方等于1
  console.log(Math.log10(-1)); // NaN
  console.log(Math.log10(0)); // -Infinity  10^-Infintiy = 0
  console.log(Math.log10(null)); // -Infinity
  console.log(Math.log10(-Infinity)); // NaN
  console.log(Math.log10(Infinity)); // Infinity 10^Infinity = Infinity
  console.log(Math.log10('string')); // NaN
  console.log(Math.log10()); // NaN

Math.log2() 函数返回一个数字以2位底的对数。

使用方法参照Math.log10()


第三类,n个数运算:max/min/hypot

Math.max() 函数返回一个数组中的最大值。

语法:

  Math.max(value1[,vlaue2[,vlaue3...]]);

  // 参数: value1,vlaue2,... 一组数值
  
  // 返回给定的一组数字中的最大值。
  // 如果没有参数,则返回结果为 -Infinity

示例:

  console.log(Math.max(0,'2')); // 2
  console.log(Math.max(-1,'')); // 0
  console.log(Math.max(-1,null)); // 0
  console.log(Math.max(-1,'string')); // NaN
  console.log(Math.max()); // -Infinity

求数组中的最大值:

  // 第一种,利用apply
  function getMaxOfArray(numArray) {
    return Math.max.apply(null, numArray);
  }
  // 第二种,利用扩展运算符
  let max = Math.max(...arr);

Math.min() 返回零个或更多个数值的最小值。

语法:

  Math.min([value[,value2,...]]);

  // 返回值:给定数值中最小的数。
  // 如果没有参数,结果为Infinity

示例:
  
  console.log(Math.min(3,'2',4)); // 2
  console.log(Math.min(1,'')); // 0
  console.log(Math.min(1,null)); // 0
  console.log(Math.min(1,'string')); // NaN
  console.log(Math.min()); // Infinity

使用min裁剪值

  // Math.min经常用于裁剪一个值,以便使其总是小于或等于某个边界值。例如:
  let x = f(foo);
  function f() {
    if(x > boundary) {
      x = boundary;
    }
  } 
  // 可以简便写为:
  let x = Math.min(f(foo), boundary);
  // Math.max()也可以被用来以相似的方式裁剪一个值

Math.hypot()函数返回它的所有参数的平方和的平方根

语法:

  Math.hypot([vlaue1[,value2[,value3...]]]);

  // 如果不传入任何参数,则返回 +0
  // 如果只传入一个参数,则Math.hypot(x)的效果等同于Math.abs(x);

示例:

  console.log(Math.hypot(3, '2', 4)); // 5.385164807134504
  console.log(Math.hypot(1, '')); // 1
  console.log(Math.hypot(1, null)); // 1
  console.log(Math.hypot(1, Infinity)); // Infinity
  console.log(Math.hypot(1, -Infinity)); // Infinity
  console.log(Math.hypot(1, 'string')); // NaN
  console.log(Math.hypot()); // 0

Polyfill

  if (!Math.hypot) {
    Math.hypot = function hypot() {
      let y = 0;
      let length = arguments.length;

      for ( let i = 0; i<length; i++ ) {
        // 存在无穷的情况
        if (arguments[i] === Infinity || arguments[i] === -Infinity) {
          return Infinity;
        }
        y += (arguments[i] * arguments[i]);
      }
      return Math.sqrt(y);
    }
  }

上面三个函数都会对参数进行Number()转换,一旦有一个参数为NaN,则结果必定返回NaN。

第四类,三角函数运算:tan/atan

Math.tan() 方法返回一个数值的正切值。

个人提示:π弧度 == 180角度 1角度 = (π/180)弧度 1弧度 = (180/π)角度
语法:

  Math.tan(x);

  // 参数:x 一个数值,表示一个角(单位:弧度)
  
  // tan方法返回一个数值,表示一个角的正切值

示例:

  console.log(Math.tan(45)); // 1.6197751905438615
  console.log(Math.tan(1)); // 1.5574077246549023
  console.log(Math.tan(0)); // 0
  console.log(Math.tan('')); // 0
  console.log(Math.tan(null)); // 0
  console.log(Math.tan(Infinity)); // NaN
  console.log(Math.tan(-Infinity)); // NaN
  console.log(Math.tan('String')); // NaN
  console.log(Math.tan()); // NaN

Math.sin() 函数返回一个数值的正弦值。

语法:

  Math.sin(x);

  // 参数: 一个数值,表示一个角(单位:弧度)
  
  // sin方法返回一个 -1 到 1之间的数值,表示给定弧度的正弦值。

示例:

  console.log(Math.sin(45)); // 0.8509035245341184
  console.log(Math.sin(Math.PI/2)); // 1
  console.log(Math.sin(0)); // 0
  console.log(Math.sin('')); // 0
  console.log(Math.sin(null)); // 0
  console.log(Math.sin(Infinity)); // NaN
  console.log(Math.sin(-Infinity)); // NaN
  console.log(Math.sin('String')); // NaN
  console.log(Math.sin()); // NaN

Math.cos() 函数返回一个数值的余弦值。

语法:

  Math.cos(x);

  // 参数:x一个以弧度为单位的数值
  
  // cos方法返回一个-1到1之间的数值,表示弧度的余弦值。

示例:

  console.log(Math.cos(45)); // 0.5253219888177297
  console.log(Math.cos(Math.PI)); // -1
  console.log(Math.cos(0)); // 1
  console.log(Math.cos('')); // 1
  console.log(Math.cos(null)); // 1
  console.log(Math.cos(Infinity)); // NaN
  console.log(Math.cos(-Infinity)); // NaN
  console.log(Math.cos('String')); // NaN
  console.log(Math.cos()); // NaN

上面三个函数的参数都是弧度,可以写一个方法使用角度

  /**
   * 根据角度计算三角函数值
   * @param  {Number} deg    角度
   * @param  {Number} method 方法类型,1:tan,2:sin,3:cos
   * @return {Number}        三角函数值
   */
  function getTrigonometricDeg(deg, method = 1) {
    let name = '';
    switch (method) {
      case 1: name = 'tan'; break;
      case 2: name = 'sin'; break;
      case 3: name = 'cos'; break;
      default: alert('参数传递错误');return;
    }

    let rad = deg * Math.PI/180;

    return Math[name](rad);
  }

  console.log(getTrigonometricDeg(30, 1)); // 0.5773502691896257
  console.log(1/Math.sqrt(3)); // 0.5773502691896258
  console.log(getTrigonometricDeg(30, 2)); // 0.49999999999999994
  console.log(1/2); // 0.5
  console.log(getTrigonometricDeg(30, 3)); // 0.8660254037844387
  console.log(Math.sqrt(3)/2); // 0.8660254037844386

  // 由于浮点数精度问题,会显示成上面的样子

Math.atan() 返回一个数值的反正切(以弧度为单位)

Math.atan
语法:

  Math.atan(x);

  // 参数:x 一个数值
  
  // 返回一个 -π/2到π/2弧度之间的数值。

示例:

  console.log(Math.atan(1)); // 0.7853981633974483
  console.log(Math.atan(-1)); // -0.7853981633974483
  console.log(Math.PI*(45/180)); //0.7853981633974483
  console.log(Math.atan(0)); // 0
  console.log(Math.atan(Infinity)); // 1.5707963267948966
  console.log(Math.PI/2); // 1.5707963267948966

Math.atan2() 返回其参数比值的反正切值。

语法:

  Math.atan2(y,x);

  // 参数表示(x,y)对应的偏移角度。这是一个逆时针角度,以弧度为单位,正x轴和点(x,y)与原点连线之间。注:先传递y坐标,然后是x坐标
  
  // 返回一个-π到π之间的数值。

atan2接受单独的x和y参数,而atan接受两个参数的比值。
示例:

  Math.atan2(90, 15); // 1.4056476493802699
  Math.atan2(15, 90); // 0.16514867741462683

  Math.atan2( ±0, -0 );               // ±PI.
  Math.atan2( ±0, +0 );               // ±0.
  Math.atan2( ±0, -x );               // ±PI for x > 0.
  Math.atan2( ±0, x );                // ±0 for x > 0.
  Math.atan2( -y, ±0 );               // -PI/2 for y > 0.
  Math.atan2( y, ±0 );                // PI/2 for y > 0.
  Math.atan2( ±y, -Infinity );        // ±PI for finite y > 0.
  Math.atan2( ±y, +Infinity );        // ±0 for finite y > 0.
  Math.atan2( ±Infinity, x );         // ±PI/2 for finite x.
  Math.atan2( ±Infinity, -Infinity ); // ±3*PI/4.
  Math.atan2( ±Infinity, +Infinity ); // ±PI/4.

Math.asin() 返回一个数值的反正弦(单位为弧度)

Math.asin
语法:

  Math.asin(x);

  // 参数: x 一个数值,-1到1之间的数值作为参数
  
  // 返回一个介于 -π/2到π/2弧度的数值
  // 如果接受的参数超出范,返回NaN

示例:

  console.log(Math.asin(1)); // 1.5707963267948966
  console.log(Math.asin(-1)); // -1.5707963267948966
  console.log(Math.PI/2); // 1.5707963267948966
  console.log(Math.asin(0)); // 0
  console.log(Math.asin(Infinity)); // NaN
  console.log(Math.asin(-Infinity)); // NaN

Math.acos() 返回一个数的反余弦值(单位为弧度)

Math.acos
语法:

  Math.acos(x);

  // 参数: x 一个数值,-1到1之间的数值作为参数。
  
  // 返回一个0到π的数值。
  // 如果传入的参数值超出了限定的范围,将返回NaN。

示例:

  console.log(Math.acos(1)); // 0
  console.log(Math.acos(-1)); // 3.141592653589793
  console.log(Math.acos(0)); // 1.5707963267948966
  console.log(Math.acos(Infinity)); // NaN
  console.log(Math.acos(-Infinity)); // NaN

Math.tanh() 返回一个数的双曲正切函数值

Math.tanh
语法:Math.tanh(x);,返回所给数字的双曲正切值。

Math.sinh() 返回给定数字的双曲正弦值

双曲正弦的图像:
Math.sinh

Math.cosh() 返回数值的双曲余弦函数

Math.cosh

Math.atanh() 返回一个数值反双曲正切值

Math.atanh

对于大于1或是小于-1的值,函数返回 NaN 。

Math.asinh() 函数返回给定数字的反双曲正弦值

Math.asinh

Math.acosh() 返回一个数值的反双曲余弦值

Math.acosh

如果指定的参数小于 1 则返回NaN


第四类,32位数运算:clz32/fround/imul

这块理解不通,浏览器实现也比较欠缺,可参考:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/clz32


第三类,其他:sign/random

Math.sign() 函数返回一个数字的符号,指示数字是正数,负数还是零。

语法:

  Math.sign(x);

  // 参数:x,任意数字
  // 传入该函数的参数会被隐式转换成数字类型

  // 此函数共有5种返回值:分别是1,-1,0,-0,NaN.代表的是正数,负数,正零,负零,NaN

示例:

  console.log(Math.sign(3)); // 1
  console.log(Math.sign(-3)); // -1
  console.log(Math.sign('-3')); // -1
  console.log(Math.sign(0)); // 0
  console.log(Math.sign(-0)); // -0
  console.log(Math.sign(NaN)); // NaN
  console.log(Math.sign('foo')); // NaN
  console.log(Math.sign('')); // 0
  console.log(Math.sign(Infinity)); // 1
  console.log(Math.sign(-Infinity)); // -1
  console.log(Math.sign()); //NaN

Polyfill

  if (!Math.sign) {
    x = +x;
    if(x === 0 || isNaN(x)) {
      return Number(x);
    }
    return x > 0 ? 1 : -1;
  }

Math.random() 返回一个浮点伪随机数在范围[0,1)

Math的方法都会先将参数进行Number()转换,然后再进项相应的运算。(可以参照Number对象介绍中全局isNaN方法与Number.isNaN方法的区别)。如果转换失败就会返回NaN。

参考文档:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math

相关文章

  • 全面认识JavaScript的Math对象

    全面认识JavaScript的Math对象 Math是一个内置对象,它具有数学常数和函数的属性和方法。不是一个函数...

  • JavaScript Math对象和Date对象浅谈

    JavaScript Math对象和Date对象浅谈 Math 对象 JavaScript当中的Math对象是原...

  • JavaScript Math(算数) 对象

    Math(算数)对象的作用是:执行常见的算数任务。JavaScript Math 对象的参考手册 Math 对象 ...

  • javascript基础学习纪录篇-Math对象

    JavaScript Math 对象 1.Math.PI //// 返回 3.141592653589793 2....

  • Math对象和Date对象

    Math对象 Math对象是JavaScript的内置对象,提供一系列数学常数和数学方法。Math对象只提供了静态...

  • JavaScript中的Math

    JavaScript中的Math对象: Math 对象用于执行数学任务。 使用 Math 的属性和方法的语法: 注...

  • JavaScript-3

    这一章节我们来介绍Javascript的Math对象,日期对象,函数以及定时器: Javascript的Math对...

  • Math对象

    Math Math对象是JavaScript的内置对象,提供一系列的数学常数和数学方法。Math对象只提供了静态的...

  • Math

    Math Math对象是JavaScript的内置对象,提供一系列数学常数和数学方法,Math对象只提供了静态的属...

  • Math

    Math Math对象是JavaScript的内置对象,提供一系列数学常数和数学方法。Math对象只提供了静态的属...

网友评论

    本文标题:全面认识JavaScript的Math对象

    本文链接:https://www.haomeiwen.com/subject/isdhtctx.html