ES6大法好----要将map()方法学以致用啊

贴心小提示

第一次写文章！！！
这不是一份知识分享的文章，时自己对工作中的感悟：要学以致用！！！

业务需求

微信小程序----手动实现了一个类似多选框的功能，未选中时为空心，选中时为实心（内容打码了，公司项目）

实现

原型使用的是vant-ui weapp 的van-tag标签，通过动态的控制plain属性（是否为空心样式）

具体js代码

这是我第一版的思路:
通过点击事件获取当前标签的唯一值，已选中的标签我会将他的唯一值存入到一个数组中，通过唯一值去做对比，如果已经在数组中了，则将他从选中数组中删除，如果不在则将它添加到选中数组中（思想和复选框时一致的，我这里想法是对的就是实现的时候复杂了不是最简便的写法）

// 标签点击处理
onChangeTag(e) {
    // 标签数组就是上面图中循环生成标签用的
    let selBeforeApprovalStepCode = this.data.selBeforeApprovalStepCode
    // 已选中的存放到这个数组中
    let selectList = this.data.selectList
    // 当前点击的标签的唯一值
    let id = e.currentTarget.dataset.code
    // 通过判断
    let index = selectList.indexOf(id)
    // 如果当前点击的不在已选中的数组中则将它添加到选中数组中
    if (index == -1) {
        selectList.push(id)
        // 这个循环是为了让标签变为选中状态（我需要去改变存放标签的数组里的属性）
        for (let item of selBeforeApprovalStepCode) {
            if (item.approvalStepCode == id) {
                // 标签变成选中状态（这个select对应van-tag标签的plain属性）
                item.select = false;
            }
        }
    } else {
        // 如果当前点击的在已选中的数组中则将它从选中数组中删除
        selectList.splice(index, 1)
        // 这个循环是为了让标签变为选中状态（我需要去改变存放标签的数组里的属性）
        for (let item of selBeforeApprovalStepCode) {
            if (item.approvalStepCode == id) {
                // 标签变成未选中状态（这个select对应van-tag标签的plain属性）
                item.select = true;
            }
        }
    }
}

刷刷刷，洋洋洒洒的写了这么多功能已经实现，自己还有点小得意，去给大哥看，结果被一发暴击，说我写复杂了(一时间没反应过来)，然后开始了他的表演！！

// 标签状态切换
onChangeTag(e) {
    let arr = []
    this.data.tagList.map(p => {
        if (p.code == e.currentTarget.dataset.code) {
            p.select = !p.select
        }
        if (p.select == false) {
            arr.push(p.code)
        }
    })
    this.setData({
        tagList: this.data.tagList
    })
},

反思

代码的意思和我内板思想是一致的，但是通过使用map()，兄弟们，有效代码少了将近1/2还多T.T
使用map()，代码结构非常清晰（不用去猜你的for循环想干嘛了）
要说这代码没有一行是我不理解的，都可以看懂，ES6的map()方法自己也是知道的，但到了开发上，我却还在想着for循环去做处理，自己还傻傻的觉得自己写的不赖T.T太天真了，太想当然了

总结

这不仅是对ES6语法的实际应用，还夹杂着函数式编程的思想，感兴趣的同学可以自己去了解一下函数式编程，对你的个人编程技术有很大影响和提升的（建议有一定的基础再看，我当初刚入门的时候看了两章完全没意会就放弃了，得先学会走再学会跑！！！！）
具体的关于map()的使用啊，方法啊，网上非常多，可以自行了解，有问题可以一起讨论！！

能翻到这说明咱们还是有缘分的，不知道有没有帮助到你，随缘点个赞吧，哈哈