JavaScript中数组的filter方法

一.数组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;

}

});

}

}