摘要:項目使用了,所以就不直接操作了,而是直接操作數組。為了避免往數組中重復數據,利用了不能含有重復元素的特性來去重當然,重復添加自己也是會處理的,也可以使用數組的方法判斷。當然,使用數組,也可以對每個移除項,使用或方法。
前幾天看了看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()方法。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/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) 我的博客:勞卜的博客 知乎專欄:前端呼啦圈 前言 由于工作和生活上的一些變化,最近寫文章的頻率有點下降了,實在不好意思,不過相信不久就會慢慢...
閱讀 2695·2023-04-25 17:58
閱讀 2978·2021-11-15 11:38
閱讀 2378·2021-11-02 14:48
閱讀 1185·2021-08-25 09:40
閱讀 1823·2019-08-30 15:53
閱讀 1093·2019-08-30 15:52
閱讀 1031·2019-08-30 13:55
閱讀 2437·2019-08-29 15:21