vue的filter和js的删除方法对比

jsbintask 发布于2019-08-20 18:32 / 1427人阅读

先说一下原生的js的删除方法

1:js中的splice方法

　　splice(index,len,[item]) 注释：该方法会改变原始数组。

splice有3个参数，它也可以用来替换/删除/添加数组内某一个或者几个值

index:数组开始下标 len: 替换/删除的长度 item:替换的值，删除操作的话 item为空

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

因为splice删除后数组的长度会变化，下标也就跟着变化，相邻的两个数据就会跳过原下标的3的位置导致删除不掉{"a":4}；

删除 ---- item不设置

arr.splice(1,1) //["a","c","d"] 删除起始下标为1，长度为1的一个值，len设置的1，如果为0，则数组不变

arr.splice(1,2) //["a","d"] 删除起始下标为1，长度为2的一个值，len设置的2

替换 ---- item为替换的值

arr.splice(1,1,"ttt") //["a","ttt","c","d"] 替换起始下标为1，长度为1的一个值为‘ttt’，len设置的1

arr.splice(1,2,"ttt") //["a","ttt","d"] 替换起始下标为1，长度为2的两个值为‘ttt’，len设置的1

添加 ---- len设置为0，item为添加的值

arr.splice(1,0,"ttt") //["a","ttt","b","c","d"] 表示在下标为1处添加一项‘ttt’

看来还是splice最方便啦

2：delete delete删除掉数组中的元素后，会把该下标出的值置为undefined,数组的长度不会变

如：delete arr[1] //["a", ,"c","d"] 中间出现两个逗号，数组长度不变，有一项为undefined

在看一下vue的filter的过滤返回方法

直接返回合法的数据就不用使用js的删除方法简便快捷

这个是根据我之前分享的多层复选框数组改编的》》，在原有的数据上加了个info参数！

再看等价于删除方法的filter，del过滤函数

有什么好的建议欢迎在评论区评论

云服务器 GPU云服务器私有云部署和本地部署的对比 js对比数组的值虚拟空间和云vps的对比虚拟空间和云主机的对比

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84655.html

Vue.js 实践（2）：实现多条件筛选、搜索、排序及分页的表格功能

摘要：基础布局的中主要为部分，分别是用于搜索筛选和分页的表单控件用于排序表格的表头以及用于展示数据的。这也是前瞻发布之后，提出废弃部分功能后许多人反应较为强烈的原因。与上周的第一篇实践教程一样，在这篇文章中，我将继续从一种常见的功能——表格入手，展示Vue.js中的一些优雅特性。同时也将对filter功能与computed属性进行对比，说明各自的适用场景，也为vue2.0版本中即将删除的部...

Profeel 2019-08-21 10:51 评论0 收藏0
Vue.js 实践（2）：实现多条件筛选、搜索、排序及分页的表格功能

摘要：基础布局的中主要为部分，分别是用于搜索筛选和分页的表单控件用于排序表格的表头以及用于展示数据的。这也是前瞻发布之后，提出废弃部分功能后许多人反应较为强烈的原因。与上周的第一篇实践教程一样，在这篇文章中，我将继续从一种常见的功能——表格入手，展示Vue.js中的一些优雅特性。同时也将对filter功能与computed属性进行对比，说明各自的适用场景，也为vue2.0版本中即将删除的部...

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

摘要：继上一篇搭建了这个的框架之后，我们轻松实现了为添加一个，这次需要实现的是对的编辑，删除，完成等功能。接受到之后，然后删除，。这是在前面一直都没有提及到的，现在终于要派上用场了。所以，为了实现这一功能，我们进而引入的部分。继上一篇搭建了这个Todo App的框架之后，我们轻松实现了为App添加一个task，这次需要实现的是对task的编辑，删除，完成等功能。如果你认真看完，你会发现：在...

nanchen2251 2019-08-21 10:35 评论0 收藏0
Vue.nextTick，Vue.set，Vue.delete，Vue.filter学习

摘要：用法在下次更新循环结束之后执行延迟回调。只要观察到数据变化，将开启一个队列，并缓冲在同一事件循环中发生的所有的数据改变。如果对象是响应式的，确保删除能触发更新视图。 Vue.nextTick([callback,context]) 参数：{Function}[callback]。{Object}[context]。用法：在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这...

junnplus 2019-08-23 13:54 评论0 收藏0
Vue仿饿了么app项目总结

摘要：前言这是我第一个基于的项目作品，目的很简单，学以致用，将之前的前端知识积累加上目前流行的前端框架，以项目的形式展现出来。即将属性和请求返回数据对象合并到空对象，然后赋值给这里加上即提供了一种可扩展的机制，倘若原来的属性中有预定义的其他属性。前言这是我第一个基于 Vue 的项目作品，目的很简单，学以致用，将之前的前端知识积累加上目前流行的前端框架，以项目的形式展现出来。源代码：ht...

FrozenMap 2019-08-26 11:47 评论0 收藏0