【JS】Math 对象用法

news/2024/7/19 14:08:21 标签: js, math, 用法

Math 对象

    • 对象属性
    • 随机数 random()
    • 最值 min() 和 max()
    • 舍入 ceil()、floor()、round()、fround()
    • 其它方法

扩展
Math 对象上提供的计算要比直接在JavaScript实现的快的多,因为Math 对象上的计算使用了 JavaScript引擎中更高效的实现和处理器指令。但使用 Math 计算的问题是精度因浏览器、操作系统、指令集和硬件而异。

Math 是一个内置对象,它拥有一些数学常数属性和数学函数方法。Math 不是一个函数对象。
Math 用于 Number 类型。它不支持 BigInt:表示任意长度的整数。

对象属性

Math 对象有一些属性,主要用于保存数学中的一些特殊值。

属性说明
Math.E自然对数的基数 e 的值
Math.LN22 为底的自然对数
Math.LN1010 为底的自然对数
Math.LOG2E以 2 为底 e 的对数
Math.LOG10E以 2 为底 e 的对数
Math.PIπ的值,只能返回小数点后15位
Math.SQRT1_21/2 的评分根
Math.SQRT22 的评分根

随机数 random()

  • random():返回一个0-1范围内的随机数,其中包含 0 ,但是不包含 1 。

实例:从1-10范围内随机选择一个整数

js">//方法一
let num1 = parseInt(Math.random()*10+1);	//[0-10)+1
console.log(num1);
//方法二
let num2 = Math.floor(Math.random()*10+1); 	//[0-10)+1
console.log(num2);
//方法三(不推荐,取到1的概率极小)
let num3 = Math.ceil(Math.random()*9+1);	//[0-9)+1
console.log(num3);

实例:从2-10范围内随机选择一个整数

js">//方法一
let num1 = parseInt(Math.random()*9+2);	//[2-11)
console.log(num1);
//方法二
let num2 = Math.floor(Math.random()*9+2);	//[2-11)
console.log(num2);

实例:创建一个随机数函数

js">function selectFrom(lowerValiue,upperValue){
	let choices = upperValue - lowerValiue + 1;
	return Math.floor(Math.random()*choices + lowerValiue);
}
let num = selectFrom(2,10);
console.log(num);	//2-10范围内的值,其中包括2和10。

最值 min() 和 max()

  • min():可以接收任意多个参数,返回所有数字中最小的
  • max():可以接收任意多个参数,返回所有数字中最大的
js">let max = Math.max(3,54,32,16);
console.log(max);	//54
let min = Math.min(3,54,32,16);
console.log(min)	//3

解析

  1. 3,54,32,16中,Math.max()返回的是54Math.min()返回的是3.
  2. 这两个方法可以避免使用额外的循环和 if 语句来确定一组数值中的最大最小值
js">let values = [1,2,3,4,5,6,7,8,9];

//直接使用数组调用Math.max()或Math.min()会出错,返回值为NaN
let max = Math.max(values);
console.log(max);	//NaN
let min = Math.min(values);
console.log(min);	//NaN

//要使数组能用Math.max()和Math.min(),可以先使用“...”扩展操作符
max = Math.max(...values);
console.log(max);	//9
min = Math.min(...values);
console.log(min);	//1

解析

  1. 直接使用数组调用Math.max()或Math.min()会出错,返回值为NaN
  2. 要使数组能用Math.max()和Math.min(),可以先使用“…”扩展操作符

舍入 ceil()、floor()、round()、fround()

  • Math.ceil():向上取整
  • Math.floor():向下取整
  • Math.round():返回指定小数的四舍五入后最近的整数
  • Math.fround():返回数值最接近的单精度(32位)浮点值
js">// 向上取整
console.log(4.4,Math.ceil(4.4));	//5
console.log(-4.4,Math.ceil(-4.4));	//-4
console.log(-4.5,Math.ceil(-4.5));	//-4

// 向下取整
console.log(4.4,Math.floor(4.4));	//4
console.log(-4.4,Math.floor(-4.4));	//-5
console.log(-4.5,Math.floor(-4.5));	//-5

// 四舍五入为整数
console.log(4.4,Math.round(4.4));	//4
console.log(4.5,Math.round(4.5));	//5
console.log(4.6,Math.round(4.6));	//5
console.log(-4.4,Math.round(-4.4));	//-4
console.log(-4.5,Math.round(-4.5));	//-4
console.log(-4.6,Math.round(-4.6));	//-5

// 四舍五入为小数
console.log(4.4,Math.fround(4.4));	//4.400000095367432
console.log(4.5,Math.fround(4.5));	//4.5
console.log(4.6,Math.fround(4.6));	//4.599999904632568

其它方法

方法说明
Math.abs(x)返回 x 的绝对值
Math.exp(x)返回Math.E的x次幂
Math.expml(x)等于Math.exp(x) - 1
Math.log(x)返回x的自然对数
Math.log1p(x)等于1+Math.log(x)
Math.pow(x,power)返回x的power幂
Math.pow(…nums)返回nums中每个数平方和的平方根
Math.clz32(32)返回32位整数x的前置0的数量
Math.sign(x)返回x符号的1、0、-0、-1
Math.trunc(x)返回x的整数部分,删除所有小数
Math.sprt(x)返回x 的平方根
Math.cbrt(x)返回x的立方根
Math.acos(x)返回x的反余弦
Math.acosh(x)返回x的反双曲余弦
Math.asin(x)返回x的反正弦
Math.asinh(x)返回x的反双曲正弦
Math.atan(x)返回x的反正切
Math.atanh2(y,x)返回y/x的反正切
Math.cos(x)返回x的余弦
Math.sin(x)返回x的正弦
Math.tan(x)返回x的正切

http://www.niftyadmin.cn/n/509771.html

相关文章

SVG的使用引入

SVG引入 SVG的代码可以直接嵌入到HTML页面中,也可以直接链接到SVG文件。 SVG 文件可通过以下标签嵌入 HTML 文档: ​ 、

【JS】String 字符串简解

文章目录创建字符串1. 字面量创建(常用)2. 内置构造函数创建操作字符串1. 字符串长度2. 字符串赋值3. 字符串索引4. 字符串遍历模板字符串【ES6】与普通字符串区别ASCII 字符集ASCII 表字符串比较Unicode 编码【扩展】创建字符串 我们创建字符串也分为两…

【JS】Date 对象用法

文章目录Date 对象Data 方法getFullYeargetMonthgetDategetHoursgetMinutesgetSecondsgetDaygetTime时间差计算时间差获取时间差 now()Date 对象 Date 是 js 的一个内置对象,该对象存储日期和时间,并提供了日期/时间的管理方法 new Date()在不传递参数的…

SVG的形状元素

SVG的形状元素 矩形 圆形 椭圆 线 折线 多边形 路径 矩形 <svg xmlns"http://www.w3.org/2000/svg" version"1.1"><rect x"50" y"20" rx"20" ry"20" width"150" height"150" sty…

CSS_Column多列布局

文章目录CSS3 多列浏览器兼容多列属性column-countcolumn-gapcolumn-rulecolumn-spancolumn-widthBGU解决方法CSS3 多列 CSS3 可以将文本内容设计成像报纸一样的多列布局 浏览器兼容 多列属性 column-count column-count&#xff1a;指定了需要分割的列数 div {-webkit-co…

vue可调整大小和可拖动的组件---vue-draggable-resizable

vue-draggable-resizable 用于可调整大小和可拖动元素的组件、并支持组件之间的冲突检测和组件对齐。 使用流程&#xff1a; 安装依赖&#xff1a; npm install --save vue-draggable-resizable 注册组件(在main.js中添加下列代码)&#xff1a; import Vue from vue import Vue…

CSS3_多媒体查询

文章目录多媒体查询浏览器兼容多媒体查询语法多媒体查询简单实例多媒体类型webkit-overflow-scrolling多媒体查询 CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想&#xff1a; 取代了查找设备的类型&#xff0c;CSS3 根据设置自适应显示。 媒体查询可用于检测很多事情&a…

vue组件传值、通信

vue组件传值、通信 父组件--------》子组件 属性 // parent <HelloWorld msg"Welcome to Your Vue.js App"/>// child props: { msg: String } 引用refs // parent <HelloWorld ref"hw"/>修改子组件的值 this.$refs.hw.xx xxx 子组件chidren …