vue的filter和js的刪除方法對比

jsbintask 發(fā)布于2019-08-20 18:32 / 1579人閱讀

先說一下原生的js的刪除方法

1:js中的splice方法

　　splice(index,len,[item]) 注釋：該方法會改變原始數(shù)組。

splice有3個參數(shù)，它也可以用來替換/刪除/添加數(shù)組內(nèi)某一個或者幾個值

index:數(shù)組開始下標(biāo) len: 替換/刪除的長度 item:替換的值，刪除操作的話 item為空

如：a=[{"a":1},{"a":2},{"a":3},{"a":4},{"a":5},{"a":1}];

因為splice刪除后數(shù)組的長度會變化，下標(biāo)也就跟著變化，相鄰的兩個數(shù)據(jù)就會跳過原下標(biāo)的3的位置導(dǎo)致刪除不掉{"a":4}；

刪除 ---- item不設(shè)置

arr.splice(1,1) //["a","c","d"] 刪除起始下標(biāo)為1，長度為1的一個值，len設(shè)置的1，如果為0，則數(shù)組不變

arr.splice(1,2) //["a","d"] 刪除起始下標(biāo)為1，長度為2的一個值，len設(shè)置的2

替換 ---- item為替換的值

arr.splice(1,1,"ttt") //["a","ttt","c","d"] 替換起始下標(biāo)為1，長度為1的一個值為‘ttt’，len設(shè)置的1

arr.splice(1,2,"ttt") //["a","ttt","d"] 替換起始下標(biāo)為1，長度為2的兩個值為‘ttt’，len設(shè)置的1

添加 ---- len設(shè)置為0，item為添加的值

arr.splice(1,0,"ttt") //["a","ttt","b","c","d"] 表示在下標(biāo)為1處添加一項‘ttt’

看來還是splice最方便啦

2：delete delete刪除掉數(shù)組中的元素后，會把該下標(biāo)出的值置為undefined,數(shù)組的長度不會變

如：delete arr[1] //["a", ,"c","d"] 中間出現(xiàn)兩個逗號，數(shù)組長度不變，有一項為undefined

在看一下vue的filter的過濾返回方法

直接返回合法的數(shù)據(jù)就不用使用js的刪除方法簡便快捷

這個是根據(jù)我之前分享的多層復(fù)選框數(shù)組改編的》》，在原有的數(shù)據(jù)上加了個info參數(shù)！

再看等價于刪除方法的filter，del過濾函數(shù)

有什么好的建議歡迎在評論區(qū)評論

云服務(wù)器 GPU云服務(wù)器私有云部署和本地部署的對比 js對比數(shù)組的值虛擬空間和云vps的對比虛擬空間和云主機的對比

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/84655.html

相關(guān)文章

Vue.js 實踐（2）：實現(xiàn)多條件篩選、搜索、排序及分頁的表格功能

摘要：基礎(chǔ)布局的中主要為部分，分別是用于搜索篩選和分頁的表單控件用于排序表格的表頭以及用于展示數(shù)據(jù)的。這也是前瞻發(fā)布之后，提出廢棄部分功能后許多人反應(yīng)較為強烈的原因。與上周的第一篇實踐教程一樣，在這篇文章中，我將繼續(xù)從一種常見的功能——表格入手，展示Vue.js中的一些優(yōu)雅特性。同時也將對filter功能與computed屬性進行對比，說明各自的適用場景，也為vue2.0版本中即將刪除的部...

Profeel 2019-08-21 10:51 評論0 收藏0
Vue.js 實踐（2）：實現(xiàn)多條件篩選、搜索、排序及分頁的表格功能

摘要：基礎(chǔ)布局的中主要為部分，分別是用于搜索篩選和分頁的表單控件用于排序表格的表頭以及用于展示數(shù)據(jù)的。這也是前瞻發(fā)布之后，提出廢棄部分功能后許多人反應(yīng)較為強烈的原因。與上周的第一篇實踐教程一樣，在這篇文章中，我將繼續(xù)從一種常見的功能——表格入手，展示Vue.js中的一些優(yōu)雅特性。同時也將對filter功能與computed屬性進行對比，說明各自的適用場景，也為vue2.0版本中即將刪除的部...

ChanceWong 2019-08-01 15:21 評論0 收藏0
Simple Vue But Powerful JS Part 2

摘要：繼上一篇搭建了這個的框架之后，我們輕松實現(xiàn)了為添加一個，這次需要實現(xiàn)的是對的編輯，刪除，完成等功能。接受到之后，然后刪除，。這是在前面一直都沒有提及到的，現(xiàn)在終于要派上用場了。所以，為了實現(xiàn)這一功能，我們進而引入的部分。繼上一篇搭建了這個Todo App的框架之后，我們輕松實現(xiàn)了為App添加一個task，這次需要實現(xiàn)的是對task的編輯，刪除，完成等功能。如果你認(rèn)真看完，你會發(fā)現(xiàn)：在...

nanchen2251 2019-08-21 10:35 評論0 收藏0
Vue.nextTick，Vue.set，Vue.delete，Vue.filter學(xué)習(xí)

摘要：用法在下次更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。只要觀察到數(shù)據(jù)變化，將開啟一個隊列，并緩沖在同一事件循環(huán)中發(fā)生的所有的數(shù)據(jù)改變。如果對象是響應(yīng)式的，確保刪除能觸發(fā)更新視圖。 Vue.nextTick([callback,context]) 參數(shù)：{Function}[callback]。{Object}[context]。用法：在下次DOM更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這...

junnplus 2019-08-23 13:54 評論0 收藏0
Vue仿餓了么app項目總結(jié)

摘要：前言這是我第一個基于的項目作品，目的很簡單，學(xué)以致用，將之前的前端知識積累加上目前流行的前端框架，以項目的形式展現(xiàn)出來。即將屬性和請求返回數(shù)據(jù)對象合并到空對象，然后賦值給這里加上即提供了一種可擴展的機制，倘若原來的屬性中有預(yù)定義的其他屬性。前言這是我第一個基于 Vue 的項目作品，目的很簡單，學(xué)以致用，將之前的前端知識積累加上目前流行的前端框架，以項目的形式展現(xiàn)出來。源代碼：ht...

FrozenMap 2019-08-26 11:47 評論0 收藏0