js系列-number类型详解

#定义

    //字面量方式
    let a = 11;
    //对象方式
    let b = new Number(11);
    console.log(typeof a);//number
    console.log(typeof b);//object
    
    //对象方式取值
    console.log(b.valueOf());//11

#基本函数

判断是否为整数

    console.log(Number.isInteger(11));//true
    console.log(Number.isInteger(1.1));//false

指定返回的小数位数可以四舍五入

console.log(1.36.toFixed(1));//1.4

取整，不四舍五入

console.log(Number.parseInt(1.6));//1

NaN

表示无效的数值，我们代码中参与计算时会遇到的问题，下例计算将产生NaN结果。

    //NaN是number类型
    console.log(typeof NaN);//number
    //Number，转换成number
    console.log(Number('abc'));//NaN
    //非数字参与运算，返回NaN
    console.log(2 / 'abc');//NaN

NaN不能使用 == 比较，使用以下代码来判断结果是否正确

    let nan = 3 / 'abc';
    console.log(Number.isNaN(nan));//true

也可以使用 Object.is 方法判断两个值是否完全相同

var res = 2 / 'abc';
console.log(Object.is(res, NaN));

类型转换

Number

使用Number函数基本上可以转换所有类型

console.log(Number('abc')); //NaN
console.log(Number(true));	//1
console.log(Number(false));	//0
console.log(Number('9'));	//9
console.log(Number([]));	//0
console.log(Number([5]));	//5
console.log(Number([5, 2]));	//NaN
console.log(Number({}));	//NaN

parseInt

提取字符串开始去除空白后的数字转为整数。这个是个很有意思的静态方法，可以提取字符串中的数字，但只能提取以数字开头的字符串，否则为NaN

console.log(parseInt('  123abc'));	//123
console.log(parseInt('a123bc'));	//NaN
console.log(parseInt('12.3'));	//12

parseFloat

转换字符串为浮点数，忽略字符串前面空白字符。

 console.log(parseFloat('  123abc'));	//123
 console.log(parseFloat('a123bc'));	//NaN
 console.log(parseFloat('12.3'));	//12.3

比如从表单获取的数字是字符串类型需要类型转换才可以计算，下面使用乘法进行隐式类型转换。当然我们也可以用上面的Number显示（强制）转换

<input type="text" name="num" value="12">
<script>
 let num = document.querySelector("input").value;
    console.log(num + 3); //123

    console.log(num * 1 + 3); //15
</script>

舍入操作

使用 toFixed 可对数值舍入操作，参数指定保存的小数位

console.log(1.234.toFixed(2)); //1.23

浮点精度

大部分编程语言在浮点数计算时都会有精度误差问题，下面来看JS中的表现形式

let hd = 0.1 + 0.2
console.log(hd)// 结果：0.30000000000000004

这是因为计算机以二进制处理数值类型，上面的0.1与0.2转为二进制后是无穷的

console.log((0.1).toString(2)) //0.0001100110011001100110011001100110011001100110011001101
console.log((0.2).toString(2)) //0.001100110011001100110011001100110011001100110011001101

处理方式

一种方式使用toFixed 方法进行小数截取

console.log((0.1 + 0.2).toFixed(2)) //0.3

console.log(1.0 - 0.9) //0.09999999999999998
console.log((1.0 - 0.9).toFixed(2)) //0.10

将小数转为整数进行计算后，再转为小数也可以解决精度问题

Number.prototype.add = function (num) {
	//取两个数值中小数位最大的
  let n1 = this.toString().split('.')[1].length
  let n2 = num.toString().split('.')[1].length
  
  //得到10的N次幂
  let m = Math.pow(10, Math.max(n1, n2))

  return (this * m + num * m) / m
}
console.log((0.1).add(0.2))

推荐做法

市面上已经存在很多针对数学计算的库 mathjs 、decimal.js 等，我们就不需要自己构建了。下面来演示使用 decimal.js 进行浮点计算。

<script src="https://cdn.bootcss.com/decimal.js/10.2.0/decimal.min.js"></script>

<script>
	console.log(Decimal.add(0.1, 0.2).valueOf())
</script>

Math

Math 对象提供了众多方法用来进行数学计算，下面我们介绍常用的方法，更多方法使用请查看 MDN官网 了解。

取极限值

使用 min 与 max 可以取得最小与最大值。

console.log(Math.min(1, 2, 3));

console.log(Math.max(1, 2, 3));

使用apply 来从数组中取值

console.log(Math.max.apply(Math, [1, 2, 3]));

舍入处理

取最接近的向上整数

console.log(Math.ceil(1.111)); //2

得到最接近的向下整数

console.log(Math.floor(1.555)); //1

四舍五入处理

console.log(Math.round(1.5)); //2

random

random 方法用于返回 >=0 且 <1 的随机数（包括0但不包括1）。

返回0~5的随机数，不包括5

const number = Math.floor(Math.random() * 5);
console.log(number);

返回0~5的随机数，包括5

const number = Math.floor(Math.random() * (5+1));
console.log(number);

下面取2~5的随机数（不包括5）公式为：min+Math.floor(Math.random()*(Max-min))

const number = Math.floor(Math.random() * (5 - 2)) + 2;
console.log(number);

下面取2~5的随机数（包括5）公式为：min+Math.floor(Math.random()*(Max-min+1))

const number = Math.floor(Math.random() * (5 - 2 + 1)) + 2;
console.log(number);

下面是随机点名的示例

let stus = ['小明', '张三', '王五'];
let pos = Math.floor(Math.random() * stus.length);
console.log(stus[pos]);

随机取第二到第三间的学生，即1~2的值

let stus = ['小明', '张三', '王五', '爱情'];
let pos = Math.floor(Math.random() * (3-1)) + 1;
console.log(stus[pos]);