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 个元素是可以添加的,首先是要获取到点击的是那个元素,将该元素赋值到一个变量中,使用 ()选择器,代码更简便些。先判断项目卡槽中的元素是否等于7,如果等于7将不能再添加,所以可以直接返回空。如果是没有满7个元素是可以添加的,首先是要获取到点击的是那个元素,将该元素赋值到一个变量中,使用 ()选择器,代码更简便些。先判断项目卡槽中的元素是否等于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"> </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 个元素是可以添加的,首先是要获取到点击的是那个元素,将该元素赋值到一个变量中,使用 ()选择器,代码更简便些。先判断项目卡槽中的元素是否等于7,如果等于7将不能再添加,所以可以直接返回空。如果是没有满7个元素是可以添加的,首先是要获取到点击的是那个元素,将该元素赋值到一个变量中,使用 ()选择器,代码更简便些。先判断项目卡槽中的元素是否等于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。