新手必看:ES6使用之巧用Set为数组去重

发布时间:2019-08-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了新手必看:ES6使用之巧用Set为数组去重脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

前几天看了看ES6的一些知识,正好今天做项目的时候就用上了Set的一个特性,现在分享给和我一样的新手
目的就是点击某个checkbox,实现check@L_512_1@的效果。
项目使用了vue,所以就不直接操作DOM了,而是直接操作数组

  1. 为了避免往数组中重复push数据,利用Set不能含有重复元素的特性来去重;当然,重复添加Vue自己也是会处理的,也可以使用数组的includes()方法判断。

  2. 为了方便的从数组中移除某些元素,使用了Set对象很方便的delete()方法。当然,使用数组,也可以对每个移除项,使用findIndex()indexOf()方法。但是这两个方法都是返回所查找元素第一次出现的位置,而使用Set的优点是已经自动去重,可以应对含有多个重复元素的情况。
    下面就是代码:

 checkallToggle: function(event){
    let flag = event.target.checked;
    let inputs = event.target.parentNode.parentNode.getElementsByclassname('check-case');
    if(flag) {
        for(let input of inputs) {
            this.checkeDFlowNodes = [...new Set(this.checkedFlowNodes).add(input.value)]
        }
    } else {
        for (let input of inputs) {
            let set = new Set(this.checkedFlowNodes)
            let value = input.value
            if(set.has(input.value)) {
                set.delete(input.value)
            }
            this.checkedFlowNodes = [...set]
        }
    }
},

注意:这个方法仅能用来移除基本类型的数据,因为对象是引用类型,除非能获得这个对象本身,否则无法使用delete()方法。

脚本宝典总结

以上是脚本宝典为你收集整理的新手必看:ES6使用之巧用Set为数组去重全部内容,希望文章能够帮你解决新手必看:ES6使用之巧用Set为数组去重所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。