Question

vue的这段排序代码看着不是很懂， p => p.name.indexOf(searchperson)!== -1到底是什么意思

源码，
<div id="bigv" v-mo>
<input type="text" v-model="searchperson">
<ul>
<li v-for="(p,index) in filterperson" :click="index">
{{index}}---{{p.name}}---{{p.age}}--{{p}}
</li>
</ul>
<button @click="setordertype(1)">年龄升序</button>
<button @click="setordertype(2)">年龄降序</button>
<button @click="setordertype(0)">原本顺序</button>
</div>

<script src="../js/vue.js"></script>
<script>
const vm = new Vue({
el:"#bigv",
data:{
searchperson:'',
orderType:0, //0代表原序，1升序，2降序
person:[
{name:'林凯森',age:18 },
{name:'森林凯',age:14 },
{name:'凯林森',age:10 },
{name:'森凯林',age:108 },
]
},
computed:{
filterperson(){
//取出相关的数据
const{ searchperson ,person,orderType }=this
//最终返回显示的数组
let fperson;
fperson = person.filter( p => p.name.indexOf(searchperson)!== -1 )
if(orderType) {
fperson .sort(function (p1, p2) {

if (orderType === 2) {

return p2.age - p1.age
} else {
return p1.age - p2.age
}
})
}
return fperson
}
},
methods:{
setordertype(orderType){
this.orderType=orderType
}
}
})
</script>

我的问题是这句 p => p.name.indexOf(searchperson)!== -1最后返回了个啥，我看着像是返回了true/false啊 他换成普通JS函数长啥样？

Answer 1

p => p.name.indexOf(searchperson)!== -1

这个=> 是箭头函数，会绑定作用域(this不是指函数作用域，而是上级作用域的this,这里没用到，可以不用管)，并返回后面js的结果。转化成普通函数就

相当于

function (p) {

retrun p.name.indexOf(searchperson)!== -1

}

追问

那结果就相当于返回了一个true/false?
fperson = person.filter( true )是怎么过滤出数据的····

追答

filter 的过滤函数本来就是返回true/false 的，true 保留当前索引值， false 丢弃当前索引值

追问

就这儿搞不懂啊 这是怎么根据输入过滤出数据的 当前索引值是啥？

追答

意思就是返回结果是true的，保留当前项，否则不保留
[1,2,3].filter(item => item !== 2)
判断结果就是true,false,true，函数结果就是[1,3]