一.数组filter方法的作用
对数组进行筛选,将满足条件的元素放入新数组中。
二.语法 : array.filter( function ( item, index,arr) {} )箭头函数可写为语法 : array.filter( (item, index,arr)=> {} )
三个参数分别为：
第一个参数: item,必填,当前元素的值。
第二个参数 : index,选填,当前元素在数组中的索引值。
第三个参数 : arr,当前元素所处的数组对象。
三.filter方法的特点
(1)filter()方法不会对空数组进行检测。
(2)filter()方法不会改变原数组。
(3)函数执行次数等于数组长度。
(4)在函数内部return
return true : 满足筛选条件,放入新数组中。
return false : 不满足条件,不放入新数组中。
(5)filter方法的返回值
返回筛选之后的新数组,如果没有符合条件的元素则返回空数组。
四.应用场景 : 数组筛选
示例：vue使用本地数组中的用户数据进行登录
数据：
data() {
// 密码
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
callback();
}
};
// 账号
var validateUser = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入账号'));
} else {
callback();
}
};
return {
// 用户信息
userinfo:[
// 普通用户
{
username:'aa',
password:"123",
userstatus:0
},
// 管理员
{
username:'admin',
password:"admin123",
userstatus:1
},
],
// 输入信息
ruleForm: {
username:'',
password:'',
},
rules: {
username: [
{ validator: validateUser, trigger: 'blur' }
],
password: [
{ validator: validatePass, trigger: 'blur' }
]
}
};
},
方法：
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) { //有值
// 本地数据对比登录
let userflag = this.userinfo.filter(d=>{
return d.username == this.ruleForm.username
})[0]
if(!userflag){
failmsg('账号不存在，请重新输入')
}else{
if(userflag.username == this.ruleForm.username && userflag.password == this.ruleForm.password ){
// 把账号密码存储到sessionStorage中
sessionStorage['userinfo'] = JSON.stringify(userflag)
// 显示登录成功
successmsg('登录成功')
// 跳转到主页
this.$router.push('/')
}else{
failmsg('密码错误')
}
}
} else {
console.log('error submit!!');
return false;
}
});
}
}