前几天看了看ES6的一些知识,正好今天做项目的时候就用上了Set
的一个特性,现在分享给和我一样的新手。
目的就是点击某个checkbox,实现checkall的效果。
项目使用了vue,所以就不直接操作DOM了,而是直接操作数组。
为了避免往数组中重复
push
数据,利用了Set
不能含有重复元素的特性来去重;当然,重复添加Vue自己也是会处理的,也可以使用数组的includes()
方法判断。为了方便的从数组中移除某些元素,使用了
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()
方法。