JS补充知识点_js ${item}-CSDN博客

本文链接：https://blog.csdn.net/originalApril/article/details/115217383

本文详细介绍了JavaScript中的数据渲染，包括如何通过数组动态生成表格，并讲解了JSON数据的创建与转换。此外，还探讨了本地缓存的两种方式——localStorage和sessionStorage的使用方法，以及它们在数据存储上的差异。最后，文章列举了JavaScript中的数学方法和日期对象的相关操作，以及获取时间差的两种方法，为JavaScript开发提供了实用的知识点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、数据渲染

目的：通过一个数据在页面上渲染出一个表格。

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>Document</title>
</head>
<body>
    <!-- <table border="1">
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>xiaoming</td>
                <td>女</td>
                <td>15</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>
        </tbody>
    </table> -->

    <script>
        var userList=[
            { name:"彭万里",age:100,gender:"男" },
            { name:"高大山",age:110,gender:"女" },
            { name:"谢大海",age:109,gender:"男" },
            { name:"马宏宇",age:118,gender:"女" },
            { name:"林莽",age:90,gender:"男" },
        ]
        
        var str=`
                <table border="1">
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>姓名</th>
                            <th>性别</th>
                            <th>年龄</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
        `
        // 循环数组
        userList.forEach((item,index)=>{
            // console.log(item.name);
            str+=`
                <tr>
                    <td>${index+1}</td>
                    <td>${item.name}</td>
                    <td>${item.age}</td>
                    <td>${item.gender}</td>
                    <td>
                        <button>编辑</button>
                        <button>删除</button>
                    </td>
                </tr>
            `
        })
        str+=`
            </tbody>
            </table>
        `
        document.write(str)
    </script>
</body>
</html>

结果如下：
在这里插入图片描述

二、JSON数据

JSON对象和JS对象有什么区别：JSON中的键，必须使用双引号包起来。

1.写一个json数据

	 <!-- 写一个json数据  使用JSON的对象格式 -->
    <script>
        var json1={
            "name":"xiaoqiang",
            "age":"20",
            "sex":"男",
            "address":"北京",
        }
        console.log(json1);
        console.log(typeof(json1));

        let jsonStr=JSON.stringify(json1);//将json数据转换为字符串
        console.log(jsonStr);
        console.log(typeof jsonStr);
        console.log("--------------------------------");
    </script>
    
    <!-- 写一个json数据  使用JSON的数组格式 -->
    <script>
        var json2=`[
            {"name":"wc","age":10},
            {"name":"xq","age":11}
        ]`
        let json2Obj=JSON.parse(json2);//将字符串类型转换成json对象
        console.log(json2);
        console.log(typeof json2Obj);
    </script>

结果如下：
在这里插入图片描述

三、JSON文件

在这里插入图片描述

四、本地缓存

本地缓存：把一些数据缓存到浏览器的本地。
方案：
1）localStroage
永久缓存数据一辈子都在，除非你手动删除
2）sessionStorage
临时缓存当浏览器关闭，再打开浏览器，数据就没了

        共同点：
            都是只能存储字符串，如果你是JSON对象，也需要把JSON对象转成JSON字符串来存储

1.localStroage

存：localStroage.setItem(“键”,“值”); 设置了重复的键，相当于修改
取：localStroage.getItem(“键”); 根据键，来获取值，如果没有，得到null
删：localStroage.removeItem(“键”); 根据键，删除数据
清空：localStroage.clear() 清空所有的数据

 	<script>
        //  localStroage：
        //     存：localStroage.setItem("键","值");   设置了重复的键，相当于修改
        localStorage.setItem("name","wc")
        localStorage.setItem("name","xq")

        let json = {"name":"lalala"}
        localStorage.setItem("data",JSON.stringify(json))

        //     取：localStroage.getItem("键");  根据键，来获取值，如果没有，得到null
        console.log(localStorage.getItem("name"));
        console.log(JSON.parse(localStorage.getItem("data")));

        //     删：localStroage.removeItem("键");  根据键，删除数据
        localStorage.removeItem("name")

        //     清空：localStroage.clear()   清空所有的数据
        localStorage.clear()

    </script>

2.sessionStroage

存：sessionStroage.setItem(“键”,“值”); 设置了重复的键，相当于修改
取：sessionStroage.getItem(“键”); 根据键，来获取值，如果没有，得到null
删：sessionStroage.removeItem(“键”); 根据键，删除数据
清空：sessionStroage.clear() 清空所有的数据

五、数学方法

数学中的方法：
在JS中，提供了一个内置对象，叫Math，存储了一些操作数字的方法
Math是特殊的对象，叫单体内置对象，不需要new，在JS中就这一个。

1.reandom()

生成一个随机数，0~1 包含0 不包含1

2.round()

对一个数字进行四舍五入 Math.round(2.9)==>3

3.ceil()

向上取整 Math.ceil(3.1) ==>4

4.floor()

向下取整 Math.ceil(3.9)==>3

5.pow()

数据取幂后的结果

6.sqrt()

数字的算术平方根

7.abs()

数字的绝对值

8.max()

取N个数中的最大值

9.min()

取N个数中的最小值

10.PI

代表数学中的π

	<script>

        // 1）reandom()
        //     生成一个随机数，0~1   包含0  不包含1
        let res1 = Math.random();
        console.log(res1);

        // 2）round()
        //     对一个数字进行四舍五入   Math.round(2.9)
        let res2 = Math.round(2.5);
        console.log(res2);

        // 3）ceil()    天花板
        //     向上取整   Math.round(3.1)
        let res3 = Math.ceil(2.1);
        console.log(res3);

        // 4）floor()    地板
        //     向下取整   Math.round(3.9)
        let res4 = Math.floor(2.9);
        console.log(res4);

        // 5）pow()
        //     数据取幂后的结果
        let res5 = Math.pow(2,3);
        console.log(res5);

        // 6）sqrt()
        //     数字的算术平方根
        let res6 = Math.sqrt(9);
        console.log(res6);

        // 7）abs()
        //     数字的绝对值
        let res7 = Math.abs(-110);
        console.log(res7);

        // 8）max()
        //     取N个数中的最大值
        let res8 = Math.max(1,2,3,4)
        console.log(res8);

        // 8）min()
        //     取N个数中的最小值
        let res9 = Math.min(1,2,3,4)
        console.log(res9);

        // 9）PI  
        console.log(Math.PI);
    </script>

结果如下：
在这里插入图片描述

六、日期对象

时间对象：
在JS中的，提供了一个类（构造函数，构造器），叫Date()，是专门用来创建时间对象的。
语法：let d1 = new Date();
返回：当前终端的时间，如果你把电脑的电脑调整了，得到的就是调整后的时间。
例：

	<script>
        let time = new Date();
        console.log(time);
	</script>

结果如下：
在这里插入图片描述

1.创建一个指定日期的时间对象：

        在创建时，可以指定参数。
        1）参数可以是数字
                第1个数字表示 年
                第2个数字表示 月
                0表示1月  1表示2月...
                第3个数字表示 日
                第4个数字表示 时
                第5个数字表示 分
                第6个数字表示 秒
                第7个数字表示 毫秒

                至少需要传递两个数字，
                如果是一个数字时，
                获取的是格林威治时间
		2）参数可以是字符串
                "yyyy-mm-dd HH:MM:SS"
                "yyyy/mm/dd HH:MM:SS"
                如果传递字符串的话，1就表示1月了  
                年月日 和 时分秒之间需要加一个空格

<script>
        // 创建一个指定日期的时间对象：
        // 参数可以是数字  月份是从0开始
        let time1 = new Date(2021,3,25,10,17,10,100);
        console.log(time1);
        console.log("-----------------------");

        let time2 = new Date(2021,3);
        console.log(time2);
        console.log("-----------------------");

        // 参数可以是字符串
        let time3 = new Date("2021-03-25 10:23:10")
        console.log(time3);

        let time4 = new Date("2021/03/25 10:23:10")
        console.log(time4);

    </script>

结果如下：
在这里插入图片描述

2.日期对象中的方法：

getFullYear()
getMonth() 0表示1月
getDate() 获取日
getHours()
getMinutes()
getSeconds()
getMillisecondds()
getDay() 获取星期
getTime() 获取时间戳格林威治时间：1970年1月1日（计算机元年） 0点0分0秒距离现在的毫秒数
例：

<script>
        let time = new Date();
        console.log(time);
        console.log("年:",time.getFullYear());
        console.log("月:",time.getMonth());
        console.log("日:",time.getDate());
        console.log("时:",time.getHours());
        console.log("分:",time.getMinutes());
        console.log("秒:",time.getSeconds());
        console.log("毫秒:",time.getMilliseconds());
        console.log("星期:",time.getDay());
        console.log("时间戳:",time.getTime());
    </script>

结果如下：
在这里插入图片描述

3.设置时间对象的信息：

setFullYear()
setMonth() 0表示1月
setDate()
setHours()
setMinutes()
setSecond()
setMilsecond()

例：

    <script>
        let time = new Date();
        time.setFullYear(2022)
        time.setMonth(2)
        time.setDate(25)
        time.setHours(10)
        time.setMinutes(34)
        time.setSeconds(38)
        time.setMilliseconds(100)

        console.log(time);
    </script>

结果如下：
在这里插入图片描述

七、获取时间差

目的：
有两个时间点：获取两个时间点的之间相差 xx 天 xx 小时 xx 分钟 xx 秒

方式一

<script>
        // 1）准备两个时间对象
        var time1 = new Date(); // 代表当前的时间
        var time2 = new Date(2020,1,19,10,30,00);

        // 2）转成时间戳  求差值  取绝对值  得到ms数  /1000 转成秒数   取整
        // 两个时间节点相差的秒数
        let diffTime = Math.round(Math.abs(time1.getTime() - time2.getTime()) / 1000);

        // 3）换算
        var day = parseInt(diffTime / (60*60*24));
        var hour = parseInt(diffTime % (60*60*24) / (60*60));
        var minutes = parseInt(diffTime % (60*60) / 60);
        var seconds = diffTime % 60

        console.log(`距离现在的时间还有${ day }天 ${ hour }小时 ${ minutes }分钟 ${seconds}秒`);
    </script>

结果如下：
在这里插入图片描述

方式二

<script>
        // 封装一个函数，功能：传递两个时间节点，得到时间节点相差 xx 天  xx 小时 xx 分钟 xx 秒

        function getTimeDifference(time1,time2){
            let diffTime = Math.round(Math.abs(time1.getTime() - time2.getTime()) / 1000);
            var day = parseInt(diffTime / (60*60*24));
            var hour = parseInt(diffTime % (60*60*24) / (60*60));
            var minutes = parseInt(diffTime % (60*60) / 60);
            var seconds = diffTime % 60

            // 返回多个值，多个值，需要放到一个容器中  []  {}
            // return {
            //     day:day,
            //     hour:hour,
            //     minutes:minutes,
            //     seconds:seconds
            // }

            // 在一个对象中，如果键和值一样，可以写一个
            return{
                day,
                hour,
                minutes,
                seconds
            }
        }


        var time1 = new Date(); // 代表当前的时间
        var time2 = new Date(2020,1,19,10,30,00);

        console.log(getTimeDifference(time1,time2));
    </script>