【蓝桥杯】第十五届省赛大学真题组真题解析

【蓝桥杯】第十五届省赛大学真题组真题解析

一、智能停车系统

1、知识点

(1)flex-wrap

控制子元素的换行方式
属性值有:

  1. no-wrap不换行
  2. wrap伸缩容器不够则自动往下换行
  3. wrap-reverse伸缩容器不够则自动往上换行
(2)align-content调整多行侧轴对齐方式

align-items调整单行侧轴对齐方式
控制子元素在交叉轴上的对齐方式
属性值有:

  1. flex-start侧轴的起始位置对齐
  2. flex-end侧轴的终止位置对齐
  3. center侧轴的中间位置对齐
  4. space-around伸缩项目之间的距离相等是距离边缘间距的2倍
  5. space-between伸缩项目之间的距离相等,距离边缘间距为0
  6. space-evenly伸缩项目之间的距离相等是距离边缘间距的1倍
(3)justify-content调整主轴对齐方式

控制子元素在主轴上的对齐方式
属性值有:

  1. flex-start侧轴的起始位置对齐
  2. flex-end侧轴的终止位置对齐
  3. center侧轴的中间位置对齐
  4. space-around伸缩项目之间的距离相等是距离边缘间距的2倍
  5. space-between伸缩项目之间的距离相等,距离边缘间距为0
  6. space-evenly伸缩项目之间的距离相等是距离边缘间距的1倍

2、题解

flex-wrap: wrap; 
align-content: space-between;
justify-content: space-between;

二、布局切换

1、知识点

(1)classList
  1. add添加类
  2. remove移除类
  3. toggle切换类:如果元素已有该类名则移除,没有则添加

2、题解

layoutOptions.forEach(function (option) {
    // 经典模式,浏览模式,工具模式点击事件
    option.addEventListener('click', function () {
        // TODO:待补充代码
        document.querySelector('.active').classList.remove('active');
        option.classList.toggle('active')
         // TODO:END 
        //  以下代码无需修改
        // 根据不同选项进行布局处理
        if (this === layoutOptions[0]) {
            // Classic mode
            tool.style.display = "none"; // 隐藏工具
            layoutContainer.classList.add('two-column-layout'); // 添加两列布局类
            layoutContainer.classList.remove('three-column-layout'); // 移除三列布局类

        } else if (this === layoutOptions[1]) {
            // Browse mode
            tool.style.display = "none"; // 隐藏工具
            layoutContainer.classList.add('three-column-layout'); // 添加三列布局类
            layoutContainer.classList.remove('two-column-layout'); // 移除两列布局类

        } else if (this === layoutOptions[2]) {
            // Tool mode
            tool.style.display = 'flex'; // 显示工具
        }
        mode.style.display = 'none'; // 隐藏布局容器
    });
});

三、产品360度展示

1、知识点

(1)Promise对象

Promise对象是一个构造函数,用来封装异步操作并且返回成功或者失败的结果
回调函数:函数A作为参数引入函数B,则称函数A为回调函数
可以防止“回调地狱”现象产生
回调地狱:多个异步代码需要按顺序执行产生多层嵌套现象,可读性极差

  • 存在一个异步任务
//封装一个异步操作
const p = new Promise((resolve,reject) => {
	//调用一下两个参数可相应改变promise状态的值
	resolve('获取成功')
	//或
	reject('获取失败')
})
p.then((data)=>{
	//then内部接受一个回调函数(resolve()),回调函数的参数设置为data
	console.log(data)
})
.catch((err)=>{
	console.log(err)
})
  • 存在两个异步任务
//封装一个异步操作
const p = new Promise((resolve,reject) => {
	//调用两个参数可改变promise状态的值
	resolve('获取成功')
	//或
	reject('获取失败')
})
p.then((data)=>{
	console.log(data)
	//分配第二个异步任务的功能,作为p.then的返回值
	return p1 = new Promise((resolve,reject) => {
		//调用两个参数可改变promise状态的值
		resolve('获取成功')
		//或
		reject('获取失败')
	})
})
//用于处理上一个then返回的promise对象
.then((data)=>{
	console.log(data)
})
.catch((err)=>{
	console.log(err)
})
(2)async、await语法糖

在promise的基础上简化了异步代码的编写。
async可以定义异步函数,使该函数返回一个promise对象。如果异步函数返回一个值则会被promise.resolve包装 如果异步函数返回异常则会被promise.reject包装。
await被用于被async定义的异步函数中,用于等待一个promise对象完成,并返回一个promise值。如果await后面不是一个promise对象,那么他会被转换成一个已解决的promise对象。

function one(){
	return 'one'
}
function two(){
	return new Promise((resolve,reject)=>{
		setTimeout(()=>{
			resolve('two')
		},2000)
	})
}
function three(){
	return 'three'
}
async function run(){
	console.log(one())
	console.log(await two())//可以等待two的异步函数执行完再往下继续执行
	console.log(three())
}
(3)Promise.resolve方法

可以将一个普通值转换为状态为fulfilled的promise对象

(4)reduce方法

reduce方法是js数组对象中的一个高阶方法,他对数组中的每个元素执行一个自定义的回调函数,并将结果汇总为单个值

语法:数组名.reduce(callback(accumulator,currentValue,currentIndex(可选),array()可选),initialValue(可选))
  1. 参数
  • callback是一个自定义的回调函数,参数可以设置accumulator,currentValue,currentIndex,array
    • accumulator:累加器,可保存上一次回调函数的返回值;在第一次调用回调函数时如果设置了initialValue,则accumulator初始值为initialValue,如果没有设置initialValue,则accumulator的初始值为数组中的第一个元素(必选)
    • currentValue:当前正在处理的数组元素(必选)
    • currentIndex:当前正在处理的数组元素的所以(可选)
    • array:调用reduce()方法的数组(可选)
  • initialValue:第一次调用callback函数时,accumulator的初始值(可选)
  1. 返回值
    reduce()方法最后一次回调函数的返回值

2、题解

简单的promise链式调用

const pipeline = (initialValue, sequence) => {
    // TODO: 待补充代码
    return sequence.reduce((promise,currentFn)=>{
        return promise.then((result)=>{
            return currentFn(result)
        })
    },Promise.resolve(initialValue))
};

在第一次调用时,promise对象为Promise.resolve(initialValue),其解决值为initialValue。
在后续调用中,promise对象为then方法中返回的新promise对象,其解决值为上一个函数调用后的值。

async await语法糖

const pipeline = async (initialValue, sequence) => {
    // TODO: 待补充代码
    let result = initialValue
    for (const fn of sequence){
        result = await fn(result)
    }
    return result
};

如果await后面不是一个promise对象,那么他会被转换成一个已解决的promise对象。

3、思路

pipeline函数的设计目标是按顺序依次执行sequence数组中的所有函数,并且每个函数的输入是上一函数的输出。

  1. 通过reduce方法遍历sequence数组,并且将返回值设置为初始值的已解决promise对象形式

在 pipeline 函数中,sequence 数组里的函数既可以是同步函数,也可以是返回 Promise 的异步函数。通过将初始值 initialValue 包装成一个已解决状态的 Promise(使用 Promise.resolve(initialValue)),可以确保后续处理的一致性。

  1. promise.then会在promise状态变为fulfilled时执行内部的回调函数(第一次循环时,initalValue已经是一个已解决的promise对象所以会立即执行回调函数)
  2. 在回调函数内部,currentFn(result)会调用当前函数,并传入上一个promise的结果作为参数result。

当currentFn是同步函数时,会立刻执行并且返回一个值,由于then的特性(then方法期望得到一个promise对象),返回的值会被包装成一个已解决的promise对象(Promise.resolve(返回值))。
当currentFn是异步函数时,会等待promise状态由pending转变为resolved,然后返回一个已解决的promise对象。

  1. 返回的已解决的promise对象会重新传入管道函数的参数promise累加器,进行下一轮的遍历

四、多表单检验

1、知识点

(1)Element-plus

ElementPlus 是一个基于 Vue 3 构建的开源 UI 组件库,它为开发者提供了一系列丰富、高质量且易于使用的组件,能够帮助开发者快速搭建美观、功能强大的 Web 应用程序。

(2)创建表单数据和校验规则

使用reactive来创建表单数据对象,同时定义校验规则。

  1. 创建表单数据
const form = reactive({
  name: '',
  sex: '',
  age: '',
  isCompetition: '',
  isEntrepreneurship: '',
  footnote: ''
})
  1. 创建校验规则
    通常使用rules对象定义每个表单字段的校验规则,每个规则的字段是一个数组,内部可以包含多个校验规则,常见的规则属性包括:
  • required表示该字段是否为必填项
  • message校验不通过时的错误提示信息
  • trigger制定验证逻辑的触发方式
    • blur失去焦点时触发
    • change值改变时触发
  • minmax用于限制字符串或数组的长度
  1. 自定义校验规则
    如果内置的校验规则无法满足需求时可以使用自定义校验函数,如:
const validatePassword = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else if (value !== ruleForm.pass) {
    callback(new Error("密码输入不一致"));
  } else {
    callback();
  }
};

在这个示例中,validatePassword 是一个自定义的校验函数,它接收三个参数:rule(当前校验规则)、value(当前字段的值)和 callback(回调函数)。在校验过程中,根据不同的情况调用 callback 函数,若校验通过则直接调用 callback(),若校验不通过则调用 callback(new Error(‘错误信息’)) 抛出错误。

(3)正则表达式检验

test 方法:test 是正则表达式对象的一个方法,它接受一个字符串作为参数,用于检测该字符串是否包含符合正则表达式规则的部分。如果找到匹配项,test 方法返回 true;否则返回 false。

(4)reactive函数
  • reactive是Vue3提供的一个函数,他的作用是将一个普通的JavaScript对象转换为一个响应式对象。当对象属性发生变化时,与之相关的视图会自动更新
  • reactive函数期望接受一个合法的对象字面量作为参数。对象字面量是由花括号包裹,包含一系列键对值的结构,键是属性名值可以是各种数据类型reactive函数内不能声明函数与变量,只能包含对象字面量

2、题解

// TODO:待补充代码
const rules = reactive({
  name:[
    {validator:validateName = (rule,value,callback) => {
    if(value === ''){
      callback(new Error('请输入姓名'))
    }else if (/[^\u4e00-\u9fa5]/g.test(value)){
      callback(new Error('只能输入汉字'))
    }else{
      callback()
    }
  },trigger:'blur'}
  ],
  sex:[
    {required:true,message:'请选择性别',trigger:'blur'}
  ],
  age:[
    {required:true,message:'请输入年龄',trigger:'blur'}
  ],
  isCompetition:[
    {required:true,message:'请选择是否参加过编程比赛',trigger:'blur'}
  ],
  isEntrepreneurship:[
    {required:true,message:'请选择是否有过创业经历',trigger:'blur'}
  ]
})

五、找回连接的奇幻之旅

1、知识点

(1)arguments

基本概念:arguments对象包含了函数调用时传入的所有参数,其索引从0开始,可以通过索引来访问每个参数。不过argument并不是真正的数组,他没有数组的方法(如map、filter),但是具备length属性,用于表示传入参数的数量。
虽然arguments并不是真正的数组,但是我们可以通过方法将其转化为真正的数组

  • Array.from()方法
  • 扩展运算符...:可以将多余的参数(传递的参数在函数内部未被使用)收集到一个真正的数组中。

2、题解

function resetableOnce(fn) {
    // TODO: 待补充代码
    let done = false
    let result
    function runOnce() {
       if(!done){
            result = fn(...arguments)
            done=!done
       }
       return result
    }
    function reset() {
       done = false
    }  
    // TODO: END
    return { runOnce, reset};
}

六、tree命令助手

1、知识点

(1)map方法

map()是数组的一个高阶函数,它用于对数组中的每个元素执行一个给定的函数,并返回一个新的数组,新数组中的元素是原数组元素经过函数处理后的结果。
map方法的特点:

  • 不改变原数组:map()方法不会改变原始数组,而是返回一个新的数组。
  • 按顺序执行:map()方法按照数组元素的顺序依次调用回调函数,并且新数组中的元素顺序与原数组一致。
  • 对稀疏数组的处理:map()方法会跳过数组中缺少的元素(即稀疏数组中的空位),不会为这些空位调用回调函数。

2、题解

// 生成文件树
function generateTree(dirPath) {
  // TODO:待补充代码
  const items = fs.readdirSync(dirPath)
  return items.map((item)=>{
    console.log('dirPath是:',dirPath);
    console.log('item是:',item);
    const itemPath =path.join(dirPath,item)
    console.log('itemPath是:',itemPath);
    if(fs.statSync(itemPath).isDirectory()){
      return {
        name:item,
        children:generateTree(itemPath)
      }
    }else{
      return {
        name:item
      }
    }
  })
}

七、Github明星项目统计

1、知识点

(1)filter方法

filter()方法是数组的一个常用高阶函数,用于创建一个新数组,其中包含通过特定条件筛选出来的原数组中的元素。
filter方法的特点:

  • 不改变原数组:filter()方法不会改变原始数组,而是返回一个新的数组,新数组中的元素是根据条件筛选出来的原数组中的部分元素。
  • 按顺序执行:filter()方法按照数组元素的顺序依次调用回调函数,并且新数组中的元素顺序与原数组中满足条件的元素顺序一致。
  • 对稀疏数组的处理:filter()方法会跳过稀疏数组中的空位,不会为这些空位调用回调函数,也不会将其包含在新数组中。
(2)slice方法

slice()方法是数组和字符串都具有的方法,用于提取原数组或字符串的一部分,并返回一个新的数组或字符串,而不改变原始数组或字符串

语法:array.slice(begin,end) 遵循左闭右开原则

(3)箭头函数

在箭头函数中如果使用花括号包裹函数体则需要return返回,不适用花括号包裹函数体则不需要return返回

(4)Vue.ref()
  • ref用于创建一个包含响应式数据的引用对象,当引用对象的值改变时vue会自动追踪值的变化并更新与之绑定的dom元素。
  • 访问和修改ref的值需要使用.value属性,在 Vue 3 的 <script setup> 语法糖中,在模板里使用 ref 对象时可以直接引用,无需添加 .value,Vue 会自动处理。但在 JavaScript 代码里,仍然需要使用 .value 来访问和修改值。

2、题解

//任务1
<div>
  筛选语言
  <!-- TODO: 待补充代码 -->
  <select name="language" id="language" @change="changeHandle" v-model="language">
    <option v-for='lang in languages' :value="lang">{{lang}}</option>
  </select>
</div>

//任务2
// 语言筛选改变时或页面数字输入框数字改变时的处理函数
const changeHandle = () => {
  // TODO:待补充代码
  let newData = chartData.value.filter((item)=>item.language === language.value)//响应式数据对象需要.value才能获取到具体数值
  if(language.value === 'All'){
    newData = chartData.value
  }
  newData = newData.slice(pageStart.value-1,pageEnd.value)
  xData.value = newData.map((item)=>item.name)
  yData.value = newData.map((item)=>item.stars)
  initChart();
};

八、小蓝驿站

1、知识点

(1)push方法

push方法是 JavaScript 中数组的一个常用方法,用于在数组的末尾添加一个或多个元素,并返回新数组的长度。

2、题解

//任务1
<!-- 联系人列表 -->
<ul class="contacts-list">
    <!-- TODO:待补充代码 目标 1  -->
    <!--A 为例 start -->
    <li class="contacts-group" v-for='(item,index) in contacts'>   <!-- 字母分组渲染 DOM 结构-->
        <div class="contacts-group-title">{{item.letter}}</div>  <!-- 分组的 字母名称 -->
        <ul>
            <li class="contact-item" v-for='i in item.contacts'> <!-- contact-item 人名渲染 dom 结构-->
                <span class="contact-name">{{i.name}}</span>
                <button class="del-contact-button">删除</button>
            </li>
        </ul>
    </li>
</ul>



//任务2
// 定义添加联系人的方法
const addContact = () => {
    // TODO:待补充代码 目标 2 
    let inp = document.querySelector('.add-contact-input')
    let inpFirst = inp.value[0].toUpperCase()
    let index = contacts.value.map((item)=>item.letter).indexOf(inpFirst)
    if(index>=0){
        return contacts.value[index].contacts.push({
            "name":inp.value
        })
    }else{
        return contacts.value.push({
            "letter":inpFirst,
            "contacts":[{"name":inp.value}]
        })
    }
    // TODO:END
    // 添加完成清空联系人输入框
    newContact.value = "";
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/977973.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【原创工具】同文件夹PDF文件合并 By怜渠客

【原创工具】同文件夹PDF文件合并 By怜渠客 原贴&#xff1a;可批量合并多个文件夹内的pdf工具 - 吾爱破解 - 52pojie.cn 他这个存在一些问题&#xff0c;并非是软件内自主实现的PDF合并&#xff0c;而是调用的pdftk这一工具&#xff0c;但楼主并没有提供pdftk&#xff0c;而…

Kafka系列之:记录一次源头数据库刷数据,造成数据丢失的原因

Kafka系列之:记录一次源头数据库刷数据,造成数据丢失的原因 一、背景二、查看topic日志信息三、结论四、解决方法一、背景 源头数据库在很短的时间内刷了大量的数据,部分数据在hdfs丢失了 理论上debezium数据采集不会丢失,就需要排查数据链路某个节点是否有数据丢失。 数据…

llama.cpp 一键运行本地大模型 - Windows

文章目录 llama.cpp 一键运行本地大模型 - Windows嘿&#xff0c;咱来唠唠 llama.cpp 这玩意儿&#xff01;gguf 格式是啥&#xff1f;咱得好好说道说道基座模型咋选&#xff1f;所需物料&#xff0c;咱得准备齐全咯核心命令&#xff0c;得记牢啦运行方式咋选&#xff1f;测试应…

BGP状态和机制

BGP邻居优化 为了增加稳定性,通常建议实验回环口来建立邻居。更新源:建立邻居和邻居所学习到的路由的下一跳。多跳:EBGP邻居建立默认选哟直连,因为TTL=1,如果非直连,必须修改TTL。命令备注peer 2.2.2.2 connect-interface lo1配置更新源peer 2.2.2.2 ebgp-max-hop 2配置T…

Holoens2开发报错记录02_通过主机获取彩色和深度数据流常见错误

01.E1696 E1696 无法打开源文件 “stdio.h” 解决方法&#xff1a; 更新一下SDK 1&#xff09;打开Visual Studio Installer&#xff0c;点击修改 2&#xff09;安装详细信息中自己系统对应的SDK&#xff0c;点击修改即可 02.WinError 10060 方法来源 解决方法&#xff1a…

labview关于计时器的使用

通过使用计时器函数&#xff0c;可以对采集和保存实现很好的控制&#xff0c;因为之前通过等待函数有出现程序卡死的情况&#xff0c;这里用到定时器函数来实现时间控制。 根据用户输入的采集频率&#xff0c;和采集的单位来确定是否上次采集的时间间隔减去这次计时器的时间是…

go语言环境下载与配置(Windows)

下载 Go下载 - Go语言中文网 - Golang中文社区 建议在D盘中创建文件夹安装到 D 盘 &#xff0c;方便进行管理&#xff0c;然后进行傻瓜式安装。 安装 验证安装 go version 安装成功 配置环境变量 winE --> 右击此电脑 --> 选择属性 --> 高级系统设置 --> 点击…

低延迟,高互动:EasyRTC的全场景实时通信解决方案

在数字化时代&#xff0c;实时通信技术已成为连接人与人、人与设备的重要桥梁。无论是在线教育、远程医疗、智能家居&#xff0c;还是企业协作&#xff0c;高效的实时互动体验都是提升效率和满意度的关键。而 EasyRTC&#xff0c;作为领先的实时通信解决方案&#xff0c;凭借其…

车载诊断架构 --- LIN节点路由转发注意事项

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 简单,单纯,喜欢独处,独来独往,不易合同频过着接地气的生活,除了生存温饱问题之外,没有什么过多的欲望,表面看起来很高冷,内心热情,如果你身…

浏览器深度解析:打造极速、安全、个性化的上网新体验

在数字化时代,浏览器作为我们获取信息、娱乐休闲的重要工具,其性能与功能直接影响着我们的上网体验。今天,我将为大家介绍一款备受好评的浏览器——Yandex浏览器,并深入解析其独特功能与优势,帮助大家更好地了解并选择这款上网神器。 一、知名公司背书,开源项目融合 Yan…

vite react 项目打包报错处理

Could not find a declaration file for module lodash 安装 Lodash 类型声明文件 # 使用 npm npm install --save-dev types/lodash# 使用 yarn yarn add -D types/lodash 打包成功

PyTorch-基础(CUDA、Dataset、transforms、卷积神经网络、VGG16)

PyTorch-基础 环境准备 CUDA Toolkit安装&#xff08;核显跳过此步骤&#xff09; CUDA Toolkit是NVIDIA的开发工具&#xff0c;里面提供了各种工具、如编译器、调试器和库 首先通过NVIDIA控制面板查看本机显卡驱动对应的CUDA版本&#xff0c;如何去下载对应版本的Toolkit工…

[实现Rpc] 测试 | rpc部分功能联调 | debug | 理解bind

目录 服务端 客户端 Debug 运行 总结 服务端 调用 on Request 对请求做出回应 on 对...做处理 #include "../../common/net.hpp" #include "../../common/message.hpp" #include "../../common/dispatcher.hpp" #include "../../se…

LeetCode每日精进:622.设计循环队列

题目链接&#xff1a;622.设计循环队列 题目描述&#xff1a; 设计你的循环队列实现。 循环队列是一种线性数据结构&#xff0c;其操作表现基于 FIFO&#xff08;先进先出&#xff09;原则并且队尾被连接在队首之后以形成一个循环。它也被称为“环形缓冲器”。 循环队列的一个…

网络安全学习-常见安全漏洞检测以及修复方法-1

渗*透测试 渗透测试就是模拟攻击者入侵系统&#xff0c;对系统进行一步步渗透&#xff0c;发现系统的脆弱环节和隐藏风险。形成测试报告提供给系统的所有者&#xff0c;所有者根据报告对系统进行加固&#xff0c;提升系统的安全性&#xff0c;防止真正的攻击者入侵。 渗透测试…

鸿蒙开发深入浅出01(基本环境搭建、页面模板与TabBar)

鸿蒙开发深入浅出01&#xff08;基本环境搭建、页面模板与TabBar&#xff09; 1、效果展示2、下载 DevEco Studio3、创建项目4、新建页面模板5、更改应用信息6、新建以下页面7、Index.ets8、真机运行9、图片资源文件 1、效果展示 2、下载 DevEco Studio 访问官网根据自己的版本…

C/C++ | 每日一练 (4)

&#x1f4a2;欢迎来到张胤尘的技术站 &#x1f4a5;技术如江河&#xff0c;汇聚众志成。代码似星辰&#xff0c;照亮行征程。开源精神长&#xff0c;传承永不忘。携手共前行&#xff0c;未来更辉煌&#x1f4a5; 文章目录 C/C | 每日一练 (4)题目参考答案基础容器序列容器std:…

(八)趣学设计模式 之 装饰器模式!

目录 一、 啥是装饰器模式&#xff1f;二、 为什么要用装饰器模式&#xff1f;三、 装饰器模式的实现方式四、 装饰器模式的优缺点五、 装饰器模式的应用场景六、 装饰器模式 vs 代理模式七、 总结 &#x1f31f;我的其他文章也讲解的比较有趣&#x1f601;&#xff0c;如果喜欢…

快节奏生活

在当今快节奏的商务环境中&#xff0c;效率成为了决定企业竞争力的关键因素之一。亿可达软件连接平台&#xff0c;以其独特的功能和优势&#xff0c;为职场人士带来了前所未有的便捷与高效&#xff0c;成为了众多用户心中的“宝藏”工具。 1、亿可达&#xff1a;自动化流程的搭…

Jenkins protoc: command not found

个人博客地址&#xff1a;Jenkins protoc: command not found | 一张假钞的真实世界 在使用Jenkins编译Hadoop3.1.2时报错信息如下&#xff1a; [INFO] --- hadoop-maven-plugins:3.1.2:protoc (compile-protoc) hadoop-common --- [WARNING] [protoc, --version] failed: j…