本文已参与「新人创作礼」活动,一起开启掘金创作之路。
定义和用法
filter用于对数组进行过滤。
它创建一个新数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
该方法通常用于缩小在被选元素组合中搜索元素的范围。
注意:filter()不会对空数组进行检测、不会改变原始数组
提示: filter() 方法是与 not() 方法相对的。
语法
$(*selector*).filter(*criteria,* function *(index)* )
示例:
<!DOCTYPE html>
<html>
<head>
<title>多选</title>
<style type="text/css">
.spans{
display: inline-block;
padding:4px 20px;
border-radius: 20px;
border:1px solid #e8e8e8;
margin-right:10px;
text-align: center;
}
.checked{
background-color: pink;
}
.unchecked{
border:1px solid #e8e8e8;
}
</style>
</head>
<script src="./vue.js"></script>
<body>
<div id="warning">
<h4>谁才是你的最最?</h4>
<div>
<span :ref="index+'text'" class="spans" :class="checkeds.indexOf(item)!=-1?'checked':'unchecked'" v-for="(item,index) in cards" :key="index" @click="chooseLoves(item,index)">{{item}}</span>
</div>
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el: '#warning',
data:{
cards:['阳光','帅气','漂亮','聪明','幽默'],
checkeds:[], //选中数组
},
methods:{
chooseLoves(item,index){
if(this.checkeds.indexOf(item)!=-1){//证明是已经选中状态 checked
this.checkeds = this.checkeds.filter(function(ele){
return ele!=item
})
}else{//未选中状态
this.checkeds.push(item)
}
},
},
})
</script>
es filter数组过滤使用方法:
1.创建一个数组,判断数组中是否存在某个值。
var newarr = [
{ num: 1, val: 'ceshi', flag: 'aa' },
{ num: 2, val: 'ceshi2', flag: 'aa2' }
]
console.log(newarr.filter(item => item.num===2 ))
2.也可以通过上面方法过滤掉num为2的留下num为1的
var newarr = [
{ num: 1, val: 'ceshi', flag: 'aa' },
{ num: 2, val: 'ceshi2', flag: 'aa2' }
]
console.log(newarr.filter(item => item.num!=2 ))
3.去掉空数组空字符串、undefined、null
var arr = ['1','2',undefined, '3.jpg',undefined]
var newArr = arr.filter(item => item)
console.log(newArr)
var arr = ['1','2',null, '3.jpg',null]
var newArr = arr.filter(item => item)
console.log(newArr)
>//空字符串里面不能包含空格
var arr = ['1','2','', '3.jpg','']
var newArr = arr.filter(item => item)
console.log(newArr)
4.数组去重
var chognfu = [1,2,4,1,10,4,3,21]
var self = [] //去重之后数组
chognfu.filter((item)=>{
if(self.indexOf(item)==-1){
self.push(item)
}
})
console.log(self,'self')