1. 配列フィルターメソッドの役割
配列をフィルターし、条件を満たす要素を新しい配列に入れます。
2. 構文: array.filter( function ( item,index,arr) {} ) アロー関数は次の構文で記述できます: array.filter( (item,index,arr)=> {} )
3 つのパラメータは次のとおりです。
最初のパラメータ: item、必須、現在の要素の値。
2 番目のパラメーター: インデックス (オプション)、配列内の現在の要素のインデックス値。
3 番目のパラメーター: arr、現在の要素が配置されている配列オブジェクト。
3. フィルター方式の特徴
(1) filter() メソッドは空の配列を検出しません。
(2) filter() メソッドは元の配列を変更しません。
(3) 関数の実行回数は配列の長さに等しい。
(4) 関数内でreturn
return true : フィルター条件を満たし、新しい配列に入れます。
return false : 条件が満たされない場合、新しい配列には入れられません。
(5) filterメソッドの戻り値
フィルタリング後に新しい配列を返すか、対象となる要素がない場合は空の配列を返します。
4. アプリケーション シナリオ: 配列フィルタリング
例: vue はログインにローカル配列のユーザー データを使用します
データ：
データ（） {
// パスワード
var validatePass = (ルール、値、コールバック) => {
if (値 === '') {
callback(new Error('パスワードを入力してください'));
} それ以外 {
折り返し電話（）;
}
};
// アカウント
var validateUser = (ルール、値、コールバック) => {
if (値 === '') {
callback(new Error('口座番号を入力してください'));
} それ以外 {
折り返し電話（）;
}
};
戻る {
// ユーザー情報
ユーザー情報：[
// 一般ユーザー
{
ユーザー名: 'aa'、
パスワード:「123」、
ユーザーステータス:0
}、
// 管理者
{
ユーザー名:「管理者」、
パスワード:「admin123」、
ユーザーステータス:1
}、
]、
// 情報を入力します
ルールフォーム: {
ユーザー名:''、
パスワード：''、
}、
ルール: {
ユーザー名: [
{ バリデータ: validateUser、トリガー: 'blur' }
]、
パスワード: [
{ バリデータ: validatePass、トリガー: 'blur' }
]
}
};
}、
方法：
メソッド: {
submitForm(フォーム名) {
this.$refs[フォーム名].validate((有効) => {
if (有効) { //値がある
// ローカルデータ比較ログイン
let userflag = this.userinfo.filter(d=>{
return d.username == this.ruleForm.username
})[0]
if(!ユーザーフラグ){
failedmsg('アカウントは存在しません。再入力してください')
}それ以外{
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;
}
});
}
}