当前位置：首页 > article >正文

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

article 2025/1/14 21:38:32

数值类型转换技巧与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>
        //Math
        Math.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~1
        console.log(Math.random())
        //0~5
        console.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>