(六)小案例银行家应用程序-删除账号-findindex方法

findindex方法和find方法非常类似,只不过findindex顾名思义,他返回的是index;

● 下面我们使用删除账号的功能来学习一下findindex的
在这里插入图片描述

● 当用户登录成功之后,可以在下方输入自己的用户名和密码,然后提交,接着用户就会被删除,用户就无法登录了

btnClose.addEventListener('click', function (e) {  //点击事件
  e.preventDefault();  //防止默认行为

  if (
    inputCloseUsername.value === currentAccount.username &&
    Number(inputClosePin.value) === currentAccount.pin   //判断输入的账号名密码是否和当前登录的账号名和密码相同
  ) {
    const index = accounts.findIndex(   //利用findindex方法去在数组中寻找当前用户的index
      acc => acc.username === currentAccount.username
    );
    accounts.splice(index, 1);  //找到index之后,通过splice方法去删除它
  }
  console.log(accounts);
});

在这里插入图片描述

● 之后我们应该清楚UI,并将输入框内容清空

btnClose.addEventListener('click', function (e) {
  e.preventDefault();

  if (
    inputCloseUsername.value === currentAccount.username &&
    Number(inputClosePin.value) === currentAccount.pin
  ) {
    const index = accounts.findIndex(
      acc => acc.username === currentAccount.username
    );
    accounts.splice(index, 1);
    containerApp.style.opacity = 0;
  }
  inputCloseUsername.value = inputClosePin = '';
});

在这里插入图片描述

之后删除的用户将无法登录;

相关推荐

  1. 个人银行账户管理程序(2)

    2024-04-26 09:52:02       30 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-26 09:52:02       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-26 09:52:02       106 阅读
  3. 在Django里面运行非项目文件

    2024-04-26 09:52:02       87 阅读
  4. Python语言-面向对象

    2024-04-26 09:52:02       96 阅读

热门阅读

  1. gateway基本配置

    2024-04-26 09:52:02       35 阅读
  2. TensorFlow轻松入门(一)(更新中)

    2024-04-26 09:52:02       34 阅读
  3. VUE3与Uniapp 三 (Class变量和内联样式)

    2024-04-26 09:52:02       30 阅读
  4. RUST学习过程

    2024-04-26 09:52:02       35 阅读
  5. 分享一些常用的小程序免费源码

    2024-04-26 09:52:02       40 阅读
  6. Docker 备忘清单(二)

    2024-04-26 09:52:02       32 阅读
  7. Python内置函数input()详解

    2024-04-26 09:52:02       29 阅读
  8. 如何理解三次握手四次挥手

    2024-04-26 09:52:02       34 阅读
  9. 如何一键清除文件目录下所有的node_modules

    2024-04-26 09:52:02       28 阅读
  10. 工厂方法模式(模拟发奖多种商品)

    2024-04-26 09:52:02       33 阅读