vue的filter和js的刪除方法對(duì)比

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

先說(shuō)一下原生的js的刪除方法

1:js中的splice方法

　　splice(index,len,[item]) 注釋?zhuān)涸摲椒〞?huì)改變?cè)紨?shù)組。

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

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

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

因?yàn)閟plice刪除后數(shù)組的長(zhǎng)度會(huì)變化，下標(biāo)也就跟著變化，相鄰的兩個(gè)數(shù)據(jù)就會(huì)跳過(guò)原下標(biāo)的3的位置導(dǎo)致刪除不掉{"a":4}；

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

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

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

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

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

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

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

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

看來(lái)還是splice最方便啦

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

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

在看一下vue的filter的過(guò)濾返回方法

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

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/84655.html

相關(guān)文章

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

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

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

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

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

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

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

摘要：用法在下次更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。只要觀察到數(shù)據(jù)變化，將開(kāi)啟一個(gè)隊(duì)列，并緩沖在同一事件循環(huán)中發(fā)生的所有的數(shù)據(jù)改變。如果對(duì)象是響應(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 評(píng)論0 收藏0
Vue仿餓了么app項(xiàng)目總結(jié)

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

FrozenMap 2019-08-26 11:47 評(píng)論0 收藏0