JavaScript基本类型之Number及Date使用

Number

声明定义

使用对象方式声明

let hd = new Number(3);
console.log(hd+3); //6

Number用于表示整数和浮点数，数字是 Number实例化的对象，可以使用对象提供的丰富方法。

let num = 99;
console.log(typeof num); // Number

基本函数

判断是否为整数

console.log(Number.isInteger(1.2));

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

console.log((16.556).toFixed(2)); // 16.56

NaN

表示无效的数值，下例计算将产生NaN结果。

console.log(Number("houdunren")); //NaN

console.log(2 / 'houdunren'); //NaN

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

var res = 2 / 'houdunren';
if (Number.isNaN(res)) {
	console.log('Error'); // Error
}

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

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

类型转换

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

console.log(Number('houdunren')); //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 提取字符串开始去除空白后的数字转为整数。

console.log(parseInt('  99houdunren'));	//99
console.log(parseInt('18.55'));	//18

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

console.log(parseFloat('  99houdunren'));	//99
console.log(parseFloat('18.55'));	//18.55

比如从表单获取的数字是字符串类型需要类型转换才可以计算，下面使用乘法进行隐式类型转换。

<input type="text" name="num" value="66">
<script>
  let num = document.querySelector("[name='num']").value;
  console.log(num + 5); //665

  console.log(num * 1 + 5); //71
</script>

舍入操作

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

console.log(1.556.toFixed(2)); //1.56

浮点精度

大部分编程语言在浮点数计算时都会有精度误差问题，下面来看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));  // 1

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

使用apply 来从数组中取值

 // 因为max方法不能传递数组作为参数，所有可以借助apply方法，将参数以数组形式传递
 
    console.log(Math.max.apply(Math, [1, 2, 3]));  // 3

舍入处理

取最接近的向上整数

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

得到最接近的向下整数

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

四舍五入处理

     console.log(Math.round(1.58789)); //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]);

Date

网站中处理日期时间是很常用的功能，通过 Date 类型提供的丰富功能可以非常方便的操作。

声明日期

获取当前日期时间

  let now = new Date();
    console.log(now); // Tue Apr 19 2022 23:21:33 GMT+0800 (中国标准时间)
    console.log(typeof now); //object
    console.log(now * 1); //获取时间戳  1650381693902

    //直接使用函数获取当前时间
    console.log(Date());  // Tue Apr 19 2022 23:21:53 GMT+0800 (中国标准时间)
    console.log(typeof Date()); //string

    //获取当前时间戳单位毫秒
    console.log(Date.now());  // 1650381713744

计算脚本执行时间

const start = Date.now();
for (let i = 0; i < 2000000; i++) {}
const end = Date.now();
console.log(end - start);

当然也可以使用控制台测试

console.time("testFor");
for (let i = 0; i < 20000000; i++) {}
console.timeEnd("testFor");

根据指定的日期与时间定义日期对象

    let now = new Date('2028-02-22 03:25:02');
    console.log(now);  // Tue Feb 22 2028 03:25:02 GMT+0800 (中国标准时间)

    now = new Date(2028, 4, 5, 1, 22, 16);
    console.log(now); // Fri May 05 2028 01:22:16 GMT+0800 (中国标准时间)

使用展示运算符处理更方便

     let info = [2022, 2, 20, 10, 15, 32];
    let date = new Date(...info);
    console.dir(date); // Sun Mar 20 2022 10:15:32 GMT+0800 (中国标准时间)

类型转换

将日期转为数值类型就是转为时间戳单位是毫秒

 let hd = new Date("2022-2-22 10:33:12");
    console.log(hd * 1); // 1645497192000

    console.log(Number(hd));// 1645497192000

    console.log(hd.valueOf())// 1645497192000

    console.log(hd.getTime());// 1645497192000

有时后台提供的日期为时间戳格式，下面是将时间戳转换为标准日期的方法

const param = [1990, 2, 22, 13, 22, 19];
const date = new Date(...param);
const timestamp = date.getTime();
console.log(timestamp);
console.log(new Date(timestamp));

对象方法

格式化输出日期

let time = new Date();
console.log(
  `${time.getFullYear()}-${time.getMonth()}-${time.getDate()} ${time.getHours()}:${time.getMinutes()}:${time.getSeconds()}`
);

封装函数用于复用

function dateFormat(date, format = "YYYY-MM-DD HH:mm:ss") {
  const config = {
    YYYY: date.getFullYear(),
    MM: date.getMonth() + 1,
    DD: date.getDate(),
    HH: date.getHours(),
    mm: date.getMinutes(),
    ss: date.getSeconds()
  };
  for (const key in config) {
    format = format.replace(key, config[key]);
  }
  return format;
}
console.log(dateFormat(new Date(), "YYYY年MM月DD日"));

下面是系统提供的日期时间方法，更多方法请查看 MDN官网

方法	描述
Date()	返回当日的日期和时间。
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getFullYear()	从 Date 对象以四位数字返回年份。
getYear()	请使用 getFullYear() 方法代替。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒数。
getTimezoneOffset()	返回本地时间与格林威治标准时间 (GMT) 的分钟差。
getUTCDate()	根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。
getUTCDay()	根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。
getUTCMonth()	根据世界时从 Date 对象返回月份 (0 ~ 11)。
getUTCFullYear()	根据世界时从 Date 对象返回四位数的年份。
getUTCHours()	根据世界时返回 Date 对象的小时 (0 ~ 23)。
getUTCMinutes()	根据世界时返回 Date 对象的分钟 (0 ~ 59)。
getUTCSeconds()	根据世界时返回 Date 对象的秒钟 (0 ~ 59)。
getUTCMilliseconds()	根据世界时返回 Date 对象的毫秒(0 ~ 999)。
parse()	返回1970年1月1日午夜到指定日期（字符串）的毫秒数。
setDate()	设置 Date 对象中月的某一天 (1 ~ 31)。
setMonth()	设置 Date 对象中月份 (0 ~ 11)。
setFullYear()	设置 Date 对象中的年份（四位数字）。
setYear()	请使用 setFullYear() 方法代替。
setHours()	设置 Date 对象中的小时 (0 ~ 23)。
setMinutes()	设置 Date 对象中的分钟 (0 ~ 59)。
setSeconds()	设置 Date 对象中的秒钟 (0 ~ 59)。
setMilliseconds()	设置 Date 对象中的毫秒 (0 ~ 999)。
setTime()	以毫秒设置 Date 对象。
setUTCDate()	根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
setUTCMonth()	根据世界时设置 Date 对象中的月份 (0 ~ 11)。
setUTCFullYear()	根据世界时设置 Date 对象中的年份（四位数字）。
setUTCHours()	根据世界时设置 Date 对象中的小时 (0 ~ 23)。
setUTCMinutes()	根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
setUTCSeconds()	根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。
setUTCMilliseconds()	根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
toSource()	返回该对象的源代码。
toString()	把 Date 对象转换为字符串。
toTimeString()	把 Date 对象的时间部分转换为字符串。
toDateString()	把 Date 对象的日期部分转换为字符串。
toGMTString()	请使用 toUTCString() 方法代替。
toUTCString()	根据世界时，把 Date 对象转换为字符串。
toLocaleString()	根据本地时间格式，把 Date 对象转换为字符串。
toLocaleTimeString()	根据本地时间格式，把 Date 对象的时间部分转换为字符串。
toLocaleDateString()	根据本地时间格式，把 Date 对象的日期部分转换为字符串。
UTC()	根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。
valueOf()	返回 Date 对象的原始值。

moment.js

Moment.js是一个轻量级的JavaScript时间库，它方便了日常开发中对时间的操作，提高了开发效率。

更多使用方法请访问中文官网 momentjs.cn (opens new window)或 英文官网 momentjs.com

<script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js"></script>

获取当前时间

console.log(moment().format("YYYY-MM-DD HH:mm:ss"));

设置时间

onsole.log(moment("2020-02-18 09:22:15").format("YYYY-MM-DD HH:mm:ss"));

十天后的日期

console.log(moment().add(10, "days").format("YYYY-MM-DD hh:mm:ss"));