資訊專欄INFORMATION COLUMN
摘要：項目使用了，所以就不直接操作了，而是直接操作數(shù)組。為了避免往數(shù)組中重復(fù)數(shù)據(jù)，利用了不能含有重復(fù)元素的特性來去重當(dāng)然，重復(fù)添加自己也是會處理的，也可以使用數(shù)組的方法判斷。當(dāng)然，使用數(shù)組，也可以對每個移除項，使用或方法。
前幾天看了看ES6的一些知識，正好今天做項目的時候就用上了Set的一個特性，現(xiàn)在分享給和我一樣的新手。
目的就是點擊某個checkbox,實現(xiàn)checkall的效果。
項目使用了vue，所以就不直接操作DOM了，而是直接操作數(shù)組。
為了避免往數(shù)組中重復(fù)push數(shù)據(jù)，利用了Set不能含有重復(fù)元素的特性來去重；當(dāng)然，重復(fù)添加Vue自己也是會處理的，也可以使用數(shù)組的includes()方法判斷。
為了方便的從數(shù)組中移除某些元素，使用了Set對象很方便的delete()方法。當(dāng)然，使用數(shù)組，也可以對每個移除項，使用findIndex()或indexOf()方法。但是這兩個方法都是返回所查找元素第一次出現(xiàn)的位置，而使用Set的優(yōu)點是已經(jīng)自動去重，可以應(yīng)對含有多個重復(fù)元素的情況。
下面就是代碼：
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]
}
}
},
注意:這個方法僅能用來移除基本類型的數(shù)據(jù)，因為對象是引用類型，除非能獲得這個對象本身，否則無法使用delete()方法。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/87283.html
摘要：前言第一次發(fā)表文章，如有不好的地方請見諒在編寫代碼的時候存在的一些方法和技巧，雖然有時候條條大路都通向羅馬，但是也許總會有那么一條最短的路徑可走。 前言 第一次發(fā)表文章，如有不好的地方請見諒/ 在編寫JavaScript代碼的時候存在的一些方法和技巧，雖然有時候條條大路都通向羅馬，但是也許總會有那么一條最短的路徑可走。本文將一些都知道卻不怎么用的小技巧分享給大家/ 一些小技巧 1.n...
摘要：前言第一次發(fā)表文章，如有不好的地方請見諒在編寫代碼的時候存在的一些方法和技巧，雖然有時候條條大路都通向羅馬，但是也許總會有那么一條最短的路徑可走。 前言 第一次發(fā)表文章，如有不好的地方請見諒/ 在編寫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...
摘要：希望通過以下幾點技巧讓大家的代碼化繁為簡，化簡為精。巧學(xué)巧用可能有人知道中提供了新的數(shù)據(jù)結(jié)構(gòu)，但是能夠靈活運用的人或許不多。利用數(shù)據(jù)結(jié)構(gòu)我們能夠輕松的去重一個數(shù)組，比如方法可以將結(jié)構(gòu)轉(zhuǎn)為數(shù)組。 關(guān)于 微信公眾號：前端呼啦圈（Love-FED） 我的博客：勞卜的博客 知乎專欄：前端呼啦圈 前言 由于工作和生活上的一些變化，最近寫文章的頻率有點下降了，實在不好意思，不過相信不久就會慢慢...
閱讀 2744·2023-04-25 17:58
閱讀 3010·2021-11-15 11:38
閱讀 2416·2021-11-02 14:48
閱讀 1223·2021-08-25 09:40
閱讀 1853·2019-08-30 15:53
閱讀 1124·2019-08-30 15:52
閱讀 1056·2019-08-30 13:55
閱讀 2469·2019-08-29 15:21
