第十二天挑战(输入序列验证)

地址：https://javascript30.com/

所有内容均上传至gitee，答案不唯一，仅代表本人思路

中文详解：https://github.com/soyaine/JavaScript30

该详解是Soyaine及其团队整理编撰的，是对源代码的详解，强烈推荐大家观看学习!!!

本人gitee：https://gitee.com/thats-all-right-ha-ha/30-days—js-challenge

效果

• 逻辑分析

  • 预先设定一个正确的输入序列，这里是’abcdef’

  • 如果键盘依次输入的值等于正确的输入序列，则触发成功样式

  • 成功样式是引入的js样式文件

本人代码及思路分析

仅提供布局及逻辑代码

结构：该案例没有实际元素结构

逻辑：

const arr = []
const code = 'abcdef'
document.addEventListener('keyup',(e) => {
  arr.push(e.key)
  if(arr.length > code.length){
    arr.splice(0,1)
  }
  if(arr.join('') === code){
    cornify_add()
    console.log("成功输入正确序列")
  }
})

分析：

• **整体思路：**先预设一个code，监听键盘抬起事件，并将输入的内容整合到一个数组中，数组的长度与code长度保持一致，输入内容依次添加，若超过长度则数组中的第一位会被覆盖

• 具体实现：

  • 判断数组长度和code长度，若数组长度超过code长度，则通过splice方法将数组内第一位元素截断
  • 用join方法将数组转换成字符串，并与code进行对比，若完全一致，则触发成功函数，并打印成功信息

• 弊端分析(与官方方法对比)：

  • 数组的覆盖效果是通过if条件执行的，会提高性能开销

官方代码

官方代码仅代表该案例原作者思路，不唯一

逻辑

const pressed = [];
const secretCode = "wesbos";

window.addEventListener("keyup", (e) => {
  console.log(e.key);
  pressed.push(e.key);
  pressed.splice(
    -secretCode.length - 1,
    pressed.length - secretCode.length
  );
  if (pressed.join("").includes(secretCode)) {
    console.log("DING DING!");
    cornify_add();
  }
  console.log(pressed);
});

分析

仅代表本人对该代码的分析

建议直接去看Soyaine的中文详解 建议直接去看Soyaine的中文详解 建议直接去看Soyaine的中文详解

• **整体思路：**跟上述思路保持一致

• 具体实现：

  • splice：splice的start参数具有以下几种规则
    • 负索引从数组末尾开始计算——如果 start < 0，使用 start + array.length。
    • 如果 start < -array.length，使用 0。
    • 如果 start >= array.length，则不会删除任何元素，但是该方法会表现为添加元素的函数，添加所提供的那些元素。
    • 如果 start 被省略了（即调用 splice() 时不传递参数），则不会删除任何元素。这与传递 undefined 不同，后者会被转换为 0。
  • 这里**-secretCode.length - 1**符合第二条规则，所以start的值为0
  • 如果splice的end参数为负数或0，则不会删除任何元素，也就是说，只有当pressed.length - secretCode.length等于1的时候才会删除掉第一个元素，即当数组的长度超过code长度一位的时候，删除数组内的第一个元素
  • 通过includes方法，判断数组字符串是否包含code

• 优点：

  • 利用splice的start和end元素的规则，实现了超位覆盖的效果，比用if进行判断节省了性能开销

​