后盾人JS--JS值类型使用（终章）

数值类型转换技巧与NaN类型

什么是NaN呢？顾名思义就是，not a number

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>console.log(Number("houdunren"))console.log(2 / "houdunren")console.log(Number.isNaN(2/"houdunren"))</script>
</body>
</html>

当无法转换成数字或者数字和字符串进行运算的时候得到的就会是NaN

NaN类型之间是无法进行比较的

数组只有一个值就取那个值，没有就是0，有多个就是NaN

Math数学计算

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>//MathMath.max(1,2,3,4,5)     //取得最大值let grade = [12,3,2,124]console.log(Math.max.apply(null,grade))     //以数组形式传参console.log(Math.ceil(5.01))    //向上取整console.log(Math.floor(4.99))   //向下取整</script>
</body>
</html>

这是一些Math的相关方法

Math.random随机点名操作

基本上所有语言都有他们对应的随机数操作，JS也不例外

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>//0~1console.log(Math.random())//0~5console.log(Math.floor(Math.random() * (5 + 1)))//张三-马六const students = ["李四", "宋七", "张三", "王五", "马六"]console.log(2 + Math.floor(Math.random() * (students.length - 2)))</script>
</body></html>

日期时间戳的使用与计算脚本执行时间

其实你之前学过的，对吧

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>const date = new Date()console.log(date)console.log(typeof date)console.log(date*1)const start = Date.now()for(let i = 0;i<100000000;i++){}const end = Date.now()console.log((end-start)/1000+"秒")</script>
</body>
</html>

写一个脚本计算时间

ISO与TIMESTAMP格式互换

来看看标准时间和时间戳之间的转化吧

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>const date = new Date("1996-7-12 08:22:12")//时间转换成时间戳console.log(date*1)console.log(Number(date))console.log(date.valueOf())console.log(date.getTime())const timestamp = date.valueOf()//时间戳转换成时间console.log(timestamp)console.log(new Date(timestamp))</script>
</body>
</html>

封装日期格式化函数

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>const date = new Date("1992-2-12 10:22:18")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(date, "YYYY年MM月DD日HH时mm分ss秒"))</script>
</body></html>

这样虽然不难但是很麻烦哎

优秀的日期处理库momentjs

介绍一个优秀的日期处理库（其实我在学过里牛渴死之后就有点那个啥了，念念不忘必有回响的感觉）

这是一个优秀的日期处理库：

BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务铂特优选https://www.bootcdn.cn/这是使用（只要拷贝就好了）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 加载完整的 Moment.js 库 --><script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.30.1/moment.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.30.1/locale/ar-kw.min.js"></script><script>const date = moment("1992-02-22 10:12:24");console.log(date.format("YYYY-MM-DD HH:mm:ss")); // 输出原始日期console.log(date.add(10, "days").format("YYYY-MM-DD HH:mm:ss")); // 输出加10天后的日期</script>
</body>
</html>