4.4第十四届模拟赛1期做题-CSDN博客

本文链接：https://blog.csdn.net/m0_63028227/article/details/129971352

4.4第十四届模拟赛1期做题

文章目录

- 4.4第十四届模拟赛1期做题

1.数据类型检测

目标

完善 main.js 中 getType 函数中的 TODO 部分，返回传入值的对应数据类型。

传入值以及 getType 函数返回值（大小写可忽略）按照如下方式对应：

传入值	返回值
‘s’	string
0	number
false	boolean
undefined	undefined
Symbol()	symbol
function fn(){}	function
123n	bigint
null	null
{}	object
[]	array
new Date	date
new Map	map
new Set	set
/a/	regexp

/**
 * @description: 数据类型检测
 * @param {*} data 传入的待检测数据
 * @return {*} 返回数据类型
 */
function getType(data) {
  // TODO：待补充代码
  //Object.prototype.toString转换类型后字符串处理
  //Object.prototype.toString.call()测试某个数据
  //slice(8,-1)其中8代表从第8位（包含）开始截取（本例中代表空格后面的位置），-1代表截取到倒数第一位（不含）
  return Object.prototype.toString.call(data).slice(8,-1) 
    //.toLowerCase()符串中的字母被转换为小写字母。
    //或者
    //return
    //Reflect.toString.call(data).slice(8,-1).toLowerCase()
}

module.exports = {
  getType
}

考查了是否记得js数据检测的方法

2.回文字符串

目标

补充文件 isPalindromeStr.js 中的 isPalindromeStr 回文字符串检测工具函数，使其实现我们需要的功能：

对输入参数的类型做校验，保证只正常处理字符串类型参数。
如果所输入的字符串（包括单字符串和空字符串）是回文字符串，则返回 true。
其他的情况一律返回 false。

通过如下的所有参考测试用例。

function isPalindromeStr(str) {
  // 在这里写入具体的实现逻辑
  // 返回值是 boolean 类型， 如果是回文字符串应该返回 true, 否则返回 false
  if(typeof(str)!='string') return false
  //splilt()方法用于把一个字符串分割成字符串数组
  //reveser()方法用于颠倒数组中的元素顺序
  //join方法用于把数组中的所有元素以字符串的形式输出
  return str.split('').reverse().join('') === str
};
module.exports = isPalindromeStr; // 检测需要请勿删除

3.水果叠叠乐

目标

点击页面上方的水果元素，水果会进入到下方的格子中。当格子中有三个相同水果时会自动消除。格子最多放 7 个水果，当格子中水果为 7 个且无法消除时，点击上方水果元素将不在有任何效果。请使用 jQuery 或者 js ，完成 index.html 文件中的 TODO 部分。

页面上方 id=card 中 DOM 元素中的水果元素点击消失的动画效果已在代码中给出，无需操作。
每次点击页面上方水果元素需要在页面下方的长方格（ id=box ）元素中添加该元素节点，当下面长方格中有三个相同的水果元素时，从盒子元素删除这三个相同的水果元素节点。
当页面下方的长方格（ id=box ）元素中的水果为 7 个且无法消除时，被点击的水果元素节点不在被添加长方格元素中。

完成后，最终页面效果如下：

可消除效果如下：

图片描述

不可消除效果如下：

图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>水果叠叠乐</title>
    <script src="./js/jquery.min.js"></script>
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <div id="stars"></div>
    <div id="stars2"></div>
    <div id="stars3"></div>
    <ul id="card">
      <li data-id="1" id="fruit-one">
        <img src="./images/pineapple.svg" alt="" />
      </li>
      <li data-id="1" id="fruit-two">
        <img src="./images/pineapple.svg" alt="" />
      </li>
      <li data-id="2" id="fruit-three">
        <img src="./images/apple.svg" alt="" />
      </li>
      <li data-id="2" id="fruit-four">
        <img src="./images/apple.svg" alt="" />
      </li>
      <li data-id="2" id="fruit-five">
        <img src="./images/apple.svg" alt="" />
      </li>
      <li data-id="1" id="fruit-six">
        <img src="./images/pineapple.svg" alt="" />
      </li>
      <li data-id="3" id="fruit-seven">
        <img src="./images/avocado.svg" alt="" />
      </li>
      <li data-id="3" id="fruit-eight">
        <img src="./images/avocado.svg" alt="" />
      </li>
      <li data-id="3" id="fruit-nine">
        <img src="./images/avocado.svg" alt="" />
      </li>
      <li data-id="4" id="fruit-ten">
        <img src="./images/grapes.svg" alt="" />
      </li>
      <li data-id="4" id="fruit-eleven">
        <img src="./images/grapes.svg" alt="" />
      </li>
      <li data-id="4" id="fruit-twelve">
        <img src="./images/grapes.svg" alt="" />
      </li>
    </ul>
    <!-- 图片位置 -->
    <!-- 卡槽位置 -->
    <div class="fixed">
      <div class="gradient-border" id="box"></div>
    </div>
    <script>
      $("#card li").on("click", function (e) {
        // TODO: 待补充代码
        //如果卡槽里有7个元素，再点击也直接返回
        if($('#box').children().length===7) return
        //$(this)返回的是点击的元素
        console.log($(this))
        //复制点击的元素，输入n.fn.init [li#fruit-two, context: li#fruit-two]
        const fruit = $(this).clone()
        console.log(fruit.data('id'))
        //将点击的元素信息添加到卡槽里
        $('#box').append(fruit)
        console.log(fruit.data)
        //隐藏原本图片
        $(this).hide()
        //使用fruit.data('id')能辨别不同的水果
        const lis = $(`#box>li[data-id=${fruit.data('id')}]`)
        //如果有三张相同的水果
        if(lis.length===3)
        console.log(lis.length)
        //则移除
        lis.remove()
      });
    </script>
  </body>
</html>

考查如果对标签元素进行一些判断，添加和删除，拿取到某标签节点可以使用html的Dom方法：document：querySlector（）获取，题目中有jquery库，可以使用使用jquery的 $() 选择器，代码更简便些。先判断项目卡槽中的元素是否等于 7 ，如果等于 7 将不能再添加，所以可以直接返回空。如果是没有满 7 个元素是可以添加的，首先是要获取到点击的是那个元素，将该元素赋值到一个变量中，使用$ (‘’).clone（）方法获取到点击的元素复制，再将其加入到卡槽中，使用append()方法添加到#box里，并且进行隐藏在上面的元素，将box里的data-id进行判断如果等于3个，就移除。

4.element-ui 组件二次封装

<!-- TODO：完善单选按钮组件，实现需求（DOM 结构不能修改） -->
<template slot-scope="scope">
      <el-radio :label='scope.row' v-model="currentRow">&nbsp;</el-radio>
</template>

考查对vue表格结构和动态绑定，: label=“xx” vue特有的v-bind用于动态绑定class、对象和数组，所以原封不动解析出所填内容（否则数组加引号就变成字符串了），slot-scope="scope"来取得作用域插槽。

5.别抖了（防抖函数）

目标

补充文件 debounce.js 中的 debounce 工具函数，使其实现我们需要的功能：

接收一个函数以及延迟时间，并返回一个防抖函数。
即使函数在 delay 时间段内多次被调用，也只会在最后一次函数被调用的 delay 时间结束后执行。
防抖函数需要考虑传参情况。

在输入框中输入不同的查询参数时，页面效果如下（只会在停止输入后，延迟 500ms 才输出内容）：

function debounce(fn, delay = 0) {
  // TODO: 在这里写入具体的实现逻辑
  // 返回一个新的防抖函数
  // 即使函数在 delay 时间段内多次被调用，也只会在最后一次函数被调用的 delay 时间结束后执行
  //定义一个延时时间变量
  let timer
  //如果已经有延迟时间数，要先清除，再重新倒数延迟时间
  if(timer){
    clearTimeout(timer)
  }
  //如果没有延迟时间，调用delay时间
  return function(arg){
    //使用setTimeout定时器回调函数，arg是输入的任意数
    setTimeout(()=>{
      fn(arg)
    },delay)
  }

}

module.exports = debounce; // 检测需要，请勿删除

6.成语学习

完成后，最终页面效果如下：

图片描述

        //TODO 点击文字后，在idiom从左到右第一个空的位置加上改文字
        getSingleWord(val) {
          //遍历idiom数组
          for(let i in this.idiom){
            //遍历到那个没有框内是空
            if(!this.idiom[i]){
              //点击后需要响应式(双向绑定)更改框内的数字
              this.$set(this.idiom,i,val)
              //修改后输出
              return
            }
          }
        },
        clear(i) {
          this.idiom[i] = ""
          this.$set(this.idiom, i, "")
        },
        // TODO 校验成语是否输入正确答案
        // 猜中成语 result 为 true;
        // 猜错成语 result 为 false;
        // 例1：tip=‘形容非常感激或高兴’，idiom=["热","泪","盈","眶"]，则result返回true
        // 例2：tip=‘形容非常感激或高兴’，idiom=["泪","眼","盈","眶"]，则result返回false
        // 例3：tip=‘在繁忙中抽出空闲来’，idiom=["忙","里","偷","闲"]，则result返回true
        confirm() {
          //遍历arr里的数据
          for(let i = 0; i < this.arr.length;i++){
            //提示和arr中的某一条数据相同，输入词也和arr中相同，输入的为正确
            if(this.arr[i].tip===this.tip && this.arr[i].word ===this.idiom.join('')){
              return this.result = true
            }
            //否则不正确
            this.result = false
          }
        }

思路：先完成点击下面选项添加到答案框，先要遍历答案4个框，遍历到那个框内没有内容，就可以添加点击的元素，添加的方式使用的是this.$set()是vue的响应式双向绑定的方法实现更改，记得添加一个return返回输入，不添加就会4个框内都是同一个的元素。然后补充验证答案是否正确的方法，先遍历储存提示和词语的数组，如果提示和词语都对应，如果答案正确，输出的时候要使用this.result输入，不然输入的一直是答案错误。答案错误时输出也是需要使用this.result。

总结

数据类型检测考查了是否知道js数据检测的方法return Object.prototype.toString.call(data).slice(8,-1)，回文字符串考查如何检测数据的一些方法，水果叠叠乐考查如果对标签元素进行一些判断，添加和删除，拿取到某标签节点可以使用html的Dom方法：document：querySlector（）获取，题目中有jquery库，可以使用使用jquery的 $() 选择器，代码更简便些。先判断项目卡槽中的元素是否等于 7 ，如果等于 7 将不能再添加，所以可以直接返回空。如果是没有满 7 个元素是可以添加的，首先是要获取到点击的是那个元素，将该元素赋值到一个变量中，使用$ (‘’).clone（）方法获取到点击的元素复制，再将其加入到卡槽中，使用append()方法添加到#box里，并且进行隐藏在上面的元素，将box里的data-id进行判断如果等于3个，就移除。element-ui 组件二次封装考查对vue表格结构和动态绑定，: label=“xx” vue特有的v-bind用于动态绑定class、对象和数组，所以原封不动解析出所填内容（否则数组加引号就变成字符串了），slot-scope="scope"来取得作用域插槽。别抖了（防抖函数）考查了输入完内容后重新倒计时再输出，重新定义倒计时时间。成语学习考查代码逻辑，思路：先完成点击下面选项添加到答案框，先要遍历答案4个框，遍历到那个框内没有内容，就可以添加点击的元素，添加的方式使用的是this.$set()是vue的响应式双向绑定的方法实现更改，记得添加一个return返回输入，不添加就会4个框内都是同一个的元素。然后补充验证答案是否正确的方法，先遍历储存提示和词语的数组，如果提示和词语都对应，如果答案正确，输出的时候要使用this.result输入，不然输入的一直是答案错误。答案错误时输出也是需要使用this.result。