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

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

一、智能停车系统

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 modetool.style.display = "none"; // 隐藏工具layoutContainer.classList.add('two-column-layout'); // 添加两列布局类layoutContainer.classList.remove('three-column-layout'); // 移除三列布局类} else if (this === layoutOptions[1]) {// Browse modetool.style.display = "none"; // 隐藏工具layoutContainer.classList.add('three-column-layout'); // 添加三列布局类layoutContainer.classList.remove('two-column-layout'); // 移除两列布局类} else if (this === layoutOptions[2]) {// Tool modetool.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()),回调函数的参数设置为dataconsole.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 = initialValuefor (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 = falselet resultfunction runOnce() {if(!done){result = fn(...arguments)done=!done}return result}function reset() {done = false}  // TODO: ENDreturn { 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 = "";
};

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

flink operator v1.10对接华为云对象存储OBS

1 概述 flink operator及其flink集群&#xff0c;默认不直接支持华为云OBS&#xff0c;需要在这些java程序的插件目录放一个jar包&#xff0c;以及修改flink配置后&#xff0c;才能支持集成华为云OBS。 相关链接参考&#xff1a; https://support.huaweicloud.com/bestpracti…

免费PDF工具

Smallpdf.com - A Free Solution to all your PDF Problems Smallpdf - the platform that makes it super easy to convert and edit all your PDF files. Solving all your PDF problems in one place - and yes, free. https://smallpdf.com/#rappSmallpdf.com-解决您所有PD…

去中心化技术P2P框架

中心化网络与去中心化网络 1. 中心化网络 在传统的中心化网络中&#xff0c;所有客户端都通过一个中心服务器进行通信。这种网络拓扑结构通常是一个星型结构&#xff0c;其中服务器作为中心节点&#xff0c;每个客户端只能与服务器通信。如果客户端之间需要通信&#xff0c;必须…

muduo源码阅读:linux timefd定时器

⭐timerfd timerfd 是Linux一个定时器接口&#xff0c;它基于文件描述符工作&#xff0c;并通过该文件描述符的可读事件进行超时通知。可以方便地与select、poll和epoll等I/O多路复用机制集成&#xff0c;从而在没有处理事件时阻塞程序执行&#xff0c;实现高效的零轮询编程模…

Pinia 3.0 正式发布:全面拥抱 Vue 3 生态,升级指南与实战教程

一、重大版本更新解析 2024年2月11日&#xff0c;Vue 官方推荐的状态管理库 Pinia 迎来 3.0 正式版发布&#xff0c;本次更新标志着其全面转向 Vue 3 技术生态。以下是开发者需要重点关注的升级要点&#xff1a; 1.1 核心变更说明 特性3.0 版本要求兼容性说明Vue 支持Vue 3.…

【图像处理 --- Sobel 边缘检测的详解】

Sobel 边缘检测的详解 目录 Sobel 边缘检测的详解1. 梯度计算2. 梯度大小3. 梯度方向4. 非极大值抑制5. 双阈值处理6. 在 MATLAB 中实现 Sobel 边缘检测7.运行结果展示8.关键参数解释9.实验与验证 Sobel 边缘检测是一种经典的图像处理算法&#xff0c;用于检测图像中的边缘。它…

LeetCode 热题100 15. 三数之和

LeetCode 热题100 | 15. 三数之和 大家好&#xff0c;今天我们来解决一道经典的算法题——三数之和。这道题在 LeetCode 上被标记为中等难度&#xff0c;要求我们从一个整数数组中找到所有不重复的三元组&#xff0c;使得三元组的和为 0。下面我将详细讲解解题思路&#xff0c…

基因组组装中的术语1——from HGP

Initial sequencing and analysis of the human genome | Nature 1&#xff0c;分层鸟枪法测序hierarchical shotgun sequencing

安全开发-环境选择

文章目录 个人心得虚拟机选择ubuntu 22.04python环境选择conda下载使用&#xff1a; 个人心得 在做开发时配置一个专门的环境可以使我们在开发中的效率显著提升&#xff0c;可以避免掉很多环境冲突的报错。尤其是python各种版本冲突&#xff0c;还有做渗透工具不要选择windows…

数字体验驱动用户参与增效路径

内容概要 在数字化转型深化的当下&#xff0c;数字内容体验已成为企业与用户建立深度连接的核心切入点。通过个性化推荐引擎与智能数据分析系统的协同运作&#xff0c;企业能够实时捕捉用户行为轨迹&#xff0c;构建精准的用户行为深度洞察模型。这一模型不仅支撑内容分发的动…

Python 字符串(str)全方位剖析:从基础入门、方法详解到跨语言对比与知识拓展

Python 字符串&#xff08;str&#xff09;全方位剖析&#xff1a;从基础入门、方法详解到跨语言对比与知识拓展 本文将深入探讨 Python 中字符串&#xff08;str&#xff09;的相关知识&#xff0c;涵盖字符串的定义、创建、基本操作、格式化等内容。同时&#xff0c;会将 Py…

使用C++实现简单的TCP服务器和客户端

使用C实现简单的TCP服务器和客户端 介绍准备工作1. TCP服务器实现代码结构解释 2. TCP客户端实现代码结构解释 3. 测试1.编译&#xff1a;2.运行 结语 介绍 本文将通过一个简单的例子&#xff0c;介绍如何使用C实现一个基本的TCP服务器和客户端。这个例子展示了如何创建服务器…

Java Web开发实战与项目——Spring Boot与Spring Cloud微服务项目实战

企业级应用中&#xff0c;微服务架构已经成为一种常见的开发模式。Spring Boot与Spring Cloud提供了丰富的工具和组件&#xff0c;帮助开发者快速构建、管理和扩展微服务应用。本文将通过一个实际的微服务项目&#xff0c;展示如何使用Spring Boot与Spring Cloud构建微服务架构…

VMware建立linux虚拟机

本文适用于初学者&#xff0c;帮助初学者学习如何创建虚拟机&#xff0c;了解在创建过程中各个选项的含义。 环境如下&#xff1a; CentOS版本&#xff1a; CentOS 7.9&#xff08;2009&#xff09; 软件&#xff1a; VMware Workstation 17 Pro 17.5.0 build-22583795 1.配…

Linux8-互斥锁、信号量

一、前情回顾 void perror(const char *s);功能&#xff1a;参数&#xff1a; 二、资源竞争 1.多线程访问临界资源时存在资源竞争&#xff08;存在资源竞争、造成数据错乱&#xff09; 临界资源&#xff1a;多个线程可以同时操作的资源空间&#xff08;全局变量、共享内存&a…

LD_PRELOAD 绕过 disable_function 学习

借助这位师傅的文章来学习通过LD_PRELOAD来绕过disable_function的原理 【PHP绕过】LD_PRELOAD bypass disable_functions_phpid绕过-CSDN博客 感谢这位师傅的贡献 介绍 静态链接&#xff1a; &#xff08;1&#xff09;举个情景来帮助理解&#xff1a; 假设你要搬家&#x…

【无人集群系列---无人机集群编队算法】

【无人集群系列---无人机集群编队算法】 一、核心目标二、主流编队控制方法1. 领航-跟随法&#xff08;Leader-Follower&#xff09;2. 虚拟结构法&#xff08;Virtual Structure&#xff09;3. 行为法&#xff08;Behavior-Based&#xff09;4. 人工势场法&#xff08;Artific…

Oracle Fusion Middleware更改weblogic密码

前言 当用户忘记weblogic密码时&#xff0c;且无法登录到web界面中&#xff0c;需要使用服务器命令更改密码 更改方式 1、备份 首先进入 weblogic 安装目录&#xff0c;备份三个文件&#xff1a;boot.properties&#xff0c;DefaultAuthenticatorInit.ldift&#xff0c;Def…

MongoDB 复制(副本集)

MongoDB 复制(副本集) 引言 MongoDB是一个高性能、可扩展、易于使用的文档存储系统。它以JSON-like的文档存储结构&#xff0c;支持灵活的数据模型。在分布式系统中&#xff0c;为了提高数据可用性和系统稳定性&#xff0c;常常需要实现数据的备份和冗余。MongoDB提供了副本集…

【Erdas实验教程】009:非监督分类及分类后评价

文章目录 一、分类过程二、分类评价ERDAS 的 ISODATA 算法是基于最小光谱距离来进行的非监督分类,聚类过程始于任意聚类平均值或一个已有分类模板的平均值;聚类每重复一次,聚类的平均值就更新一次,新聚类的均值再用于下次聚类循环。这个过程不断重复,直到最大的循环次数已…