学习中使用到的一些技巧

判断你js的掌握程度，可以从运用js整合数据的能力体现出来，最近的学习遇到了3个需求，其中2个需求让我对replace配合正则威力有了更加深刻的理解。最后一个需求是关于地址回显的解题思路，方式很巧妙，在这里记录下来。废话少说，进入正题：

需求1：后端返回一个省份的数组,前端需要将其展示出来，但是前端需要的数据不能包括省自治区等文字。这时需要通过前端运用js处理下数据。看下图：

此外这里还有个静态的完整的省份数组：

const dataList = [
    { name: '南海诸岛', value: 0 },
    { name: '北京', value: 0 },
    { name: '天津', value: 0 },
    { name: '上海', value: 0 },
    { name: '重庆', value: 0 },
    { name: '河北', value: 0 },
    { name: '河南', value: 0 },
    { name: '云南', value: 0 },
    { name: '辽宁', value: 0 },
    { name: '黑龙江', value: 0 },
    { name: '湖南', value: 0 },
    { name: '安徽', value: 0 },
    { name: '山东', value: 0 },
    { name: '新疆', value: 0 },
    { name: '江苏', value: 0 },
    { name: '浙江', value: 0 },
    { name: '江西', value: 0 },
    { name: '湖北', value: 0 },
    { name: '广西', value: 0 },
    { name: '甘肃', value: 0 },
    { name: '山西', value: 0 },
    { name: '内蒙古', value: 0 },
    { name: '陕西', value: 0 },
    { name: '吉林', value: 0 },
    { name: '福建', value: 0 },
    { name: '贵州', value: 0 },
    { name: '广东', value: 0 },
    { name: '青海', value: 0 },
    { name: '西藏', value: 0 },
    { name: '四川', value: 0 },
    { name: '宁夏', value: 0 },
    { name: '海南', value: 0 },
    { name: '台湾', value: 0 },
    { name: '香港', value: 0 },
    { name: '澳门', value: 0 },
  ]

若你与后端关系好，那可以可以请后端同事对数据做下处理~ 那我们看看如何用前端对其进行处理：

//首先对现有的dataList进行遍历
dataList.forEach(item => {
    //再用find对后端返回的provinceData进行处理
    const obj = provinceData.find(item => {
        //设置正则表达式过滤条件将后端返回的数据里面name的所有省|回族自治区|维吾尔自治区|壮族自治区|特别行政区|自治区都替换为空
        const reg = /省|回族自治区|维吾尔自治区|壮族自治区|特别行政区|自治区/g
        //返回符合条件的item
        return item.name.replace(reg, '') === item.name
    })
    if(obj){
        item.value = obj.value
    }
})

通过这个需求和这段代码，我想大家对replace配合正则的威力有一点点感受了。

需求2：将数据 小白=100 小黄=200 小黑=300 小兰=100你们的“=”号替换为“：”。然后换行打印出来：

1. 方法一：

//假设将需要转换的数据保存在data里面
let newData = data.split('').map(item => {
    return item.replace('=', ':')
}).join('\n')

2. 方法二：

const newData = data.replace(/=/g, ';').replace(/ /g, '\n')
let newData = data.split(' ').map(item => {
    return item.replace('=', ':')
})

大家对比下这两个方法，很显然replace配合正则的方案对性能的消耗更低，效率更高。

需求3、如下图所示，当我们点击信息编辑按钮的时候，需要将之前学员的信息回显至弹窗里；

当我们点击编辑按钮后后端服务器返回的数据有：这个学员的个人信息。那如何将这些信息回显到模态框里的各个input和slelect以及radio里面呢？

考虑到后端服务器返回的数据里面的键与所渲染区域的dom元素的name值一样；比如姓名dom元素为：
<input type="text" name="name" class="form-control" placeholder="请输入姓名" />
而后端反馈的姓名数据为：name:'张三'
所以我们可以先从后端获取数据，然后通过name对所有输入框进行获取。
let { data: student } = await axios.get(`/students/${id}`);

let nameList = document.querySelectorAll("form [name]");
nameList.forEach((item) => {
//因为性别是单选框，所以做个判断
if (item.name === "gender") {
  if (+item.value === student["gender"]) item.checked = true;
} else {
  item.value = student[item.name];
}
});

上面代码实现的效果如下：

另外两个城市和地区就可以通过调用相关接口可以实现了。

需求三所想分享的是通过let nameList = document.querySelectorAll("form [name]");然后配合后端数据实现相关信息回填的技巧。

以上就是我今天分享的js技巧。本人能力有限，难免出现纰漏。欢迎各位大佬指正~