一些自己犯的小错误,没能写出来的代码

发布于:2023-01-20 ⋅ 阅读:(2) ⋅ 点赞:(0) ⋅ 评论:(0)

目录

🏆locationstorage只能存储字符串类型的数据

 🏆学生id  如果id没有则开始为10001,如果有则为最后一个id的加一

 🏆 读取是否有本地数据,若有则读取到数组中,没有则新建空数组

        🏆获取input框的内容用value,用trim()去除前后空格

🏆数组的map和join方法组合使用,渲染页面

        🏆判断是否有空字符

🏆为了避免手误删除,删除时要弹出一个确认框,然后判断是否同意


🏆locationstorage只能存储字符串类型的数据

无论什么类型存储到本地存储都会转换为字符串,无论是数值,数组还是对象

 🏆学生id  如果id没有则开始为10001,如果有则为最后一个id的加一

            const id = arr.length > 0 ? arr[arr.length - 1].id + 1 : 10001

1.如果arr.length > 0 ,

说明数组中有学生,则新学生的学号id为最后一个学生的id加1,

arr.length是arr数组的长度,数组最后一个元素下标为数组长度减一arr.length-1,

所以最后一个元素为arr[arr.length - 1],

由于元素为对象,取得对象的属性为对象.属性名,

所以最后一个元素的id为arr[arr.length - 1].id ,新学生的id为arr[arr.length - 1].id + 1

2.如果arr.length为0,则学生为第一个学生,给他起始的第一个学号10001

 🏆 读取是否有本地数据,若有则读取到数组中,没有则新建空数组

        const arr =JSON.parse(localStorage.getItem('arr'))|| []

如果或符号左边有内容则为true,arr等于或左边内容

若果或符号左边无内容,则为false,由于短路运算,arr直接等于右边

短路运算详细解释

🏆获取input框的内容用value,用trim()去除前后空格

            const uname = document.querySelector('.uname').value.trim()

由于input为单标签,所以内容在value属性里面

trim()方法可以去除字符串前后的空格

**trim() **方法会从一个字符串的两端删除空白字符。在这个上下文中的空白字符是所有的空白字符 (space, tab, no-break space 等) 以及所有行终止符字符(如 LF,CR 等)。

MDN trim()方法权威解释

🏆数组的map和join方法组合使用,渲染页面

            const newData = data.map(function (item, i) {
                return `
            <tr>
                <td>${item.id}</td>
                <td>${item.uname}</td>
                <td>${item.age}</td>
                <td>${item.gender}</td>
                <td>${item.salary}</td>
                <td>${item.city}</td>
                <td> <a href="">删除</a></td>
            </tr>
            `
            })
            tbody.innerHTML = newData.join('')

 注意:

数组的map方法,返回值是处理后新的数组,而数组中的元素之间是用逗号隔开的,

如果直接放在tbody.innerhtml中,会出现逗号

(出现这个bug我找了好久,还以为是html部分里哪里多写了逗号),

所以我们要使用join方法括号中间加引号表示数组之间的连接符为空

🏆判断是否有空字符

   如果其中一个为空则弹出警告,注意用return表示不执行下面的代码(如果下面有代码的话)

        if (uname === '' || age === '' || salary === '') return alert('请输入完整信息')

🏆为了避免手误删除,删除时要弹出一个确认框,然后判断是否同意

           

 

     if (confirm("确定要删除吗?")) {

                    arr.splice(e.target.dataset.i, 1)

                    // 录入本地数据

                    inLocal(arr)

                }

如果点击确定则confirm返回true,点击取消则返回false

正好利用这个逻辑值放入if的判断条件中,来节约代码量,一句两用

(在写代码中这种情况还有不少,比如利用全选框是否勾选的布尔值直接赋给所有的单选框的

checked,来达到一点击全选框,所有单选框都选的效果)