摘要：项目使用了，所以就不直接操作了，而是直接操作数组。为了避免往数组中重复数据，利用了不能含有重复元素的特性来去重当然，重复添加自己也是会处理的，也可以使用数组的方法判断。当然，使用数组，也可以对每个移除项，使用或方法。
前几天看了看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()方法。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/87283.html
摘要：前言第一次发表文章，如有不好的地方请见谅在编写代码的时候存在的一些方法和技巧，虽然有时候条条大路都通向罗马，但是也许总会有那么一条最短的路径可走。 前言 第一次发表文章，如有不好的地方请见谅/ 在编写JavaScript代码的时候存在的一些方法和技巧，虽然有时候条条大路都通向罗马，但是也许总会有那么一条最短的路径可走。本文将一些都知道却不怎么用的小技巧分享给大家/ 一些小技巧 1.n...
摘要：前言第一次发表文章，如有不好的地方请见谅在编写代码的时候存在的一些方法和技巧，虽然有时候条条大路都通向罗马，但是也许总会有那么一条最短的路径可走。 前言 第一次发表文章，如有不好的地方请见谅/ 在编写JavaScript代码的时候存在的一些方法和技巧，虽然有时候条条大路都通向罗马，但是也许总会有那么一条最短的路径可走。本文将一些都知道却不怎么用的小技巧分享给大家/ 一些小技巧 1.n...
摘要：公司一个页面中的一个样式如下，使左边文字竖直排列且水平垂直居中代码已中止一般情况，我会用如上或者用使文字竖直排放看起来居中，但是这样不够智能或显得比较冗余。 公司一个页面中的一个样式如下，使左边文字竖直排列且水平垂直居中：showImg(https://segmentfault.com/img/bVJKr7?w=737&h=180); 代码： 已中止 .left-tit{ wi...
摘要：公司一个页面中的一个样式如下，使左边文字竖直排列且水平垂直居中代码已中止一般情况，我会用如上或者用使文字竖直排放看起来居中，但是这样不够智能或显得比较冗余。 公司一个页面中的一个样式如下，使左边文字竖直排列且水平垂直居中：showImg(https://segmentfault.com/img/bVJKr7?w=737&h=180); 代码： 已中止 .left-tit{ wi...
摘要：希望通过以下几点技巧让大家的代码化繁为简，化简为精。巧学巧用可能有人知道中提供了新的数据结构，但是能够灵活运用的人或许不多。利用数据结构我们能够轻松的去重一个数组，比如方法可以将结构转为数组。 关于 微信公众号：前端呼啦圈（Love-FED） 我的博客：劳卜的博客 知乎专栏：前端呼啦圈 前言 由于工作和生活上的一些变化，最近写文章的频率有点下降了，实在不好意思，不过相信不久就会慢慢...
阅读 2699·2023-04-25 17:58
阅读 2982·2021-11-15 11:38
阅读 2380·2021-11-02 14:48
阅读 1186·2021-08-25 09:40
阅读 1824·2019-08-30 15:53
阅读 1097·2019-08-30 15:52
阅读 1034·2019-08-30 13:55
阅读 2438·2019-08-29 15:21
