备赛蓝桥杯之第十六届模拟赛3期职业院校组

提示：本篇文章仅仅是作者自己目前在备赛蓝桥杯中，自己学习与刷题的学习笔记，写的不好，欢迎大家批评与建议

---

由于个别题目代码量与题目量偏大，请大家自己去蓝桥杯官网【连接高校和企业 - 蓝桥云课】去寻找原题，在这里只提供部分原题代码

本题目为：备赛蓝桥杯之第十六届模拟赛3期职业院校组

第十六届蓝桥杯（Web 应用开发）模拟赛 3 期-职业组 - 蓝桥云课

---

题目1：跨屏变形记

需要考生作答的代码段如下：

/* TODO:请补充代码 *//* TODO:END */

题目要求：

请使用 CSS 的媒体查询功能，为页面实现移动端布局，具体实现如下：

• 页面宽度小于 768px 时，页面样式如下：
  • 轮播图（id="banner"）与新闻（id="news"）上下排列分布，都独占一行，且宽度填充满整个页面。
  • 轮播图（id="banner"）与新闻（id="news"）之间间隔 45px。

答案：

@media(max-width: 768px) {#container {flex-direction: column;}#banner {margin-bottom: 45px;width: 100%;}#news {width: 100%;}
}

本题作者想说

本题主要考察的知识：

1.css

2.css的媒体查询

CSS的媒体查询（Media Queries）是CSS3引入的一个非常有用的特性，它允许你根据不同的媒体类型（如屏幕、打印等）和特定的条件（如屏幕宽度、分辨率等）来应用不同的样式规则。这样，你可以为不同的设备或环境编写特定的CSS代码，从而实现响应式设计。

媒体查询的基本语法如下：

@media not|only mediatype and (expressions) {CSS-Code;
}

not：排除某种媒体类型。

only：指定某种媒体类型，防止旧浏览器不支持带媒体查询的样式时应用到所有设备。

mediatype：媒体类型，如screen（屏幕）、print（打印）等。

expressions：一个或多个表达式，用于测试特定的条件，如屏幕宽度、高度、分辨率等。

 本题要求对于“页面宽度小于 768px 时”对页面中的元素进行调整，那么首先要用@media(max-width: 768px)进行限制，此处我们设置当页面最大宽度为768px时，也就是小于768px时，对下列元素进行css设置

• 轮播图（id="banner"）与新闻（id="news"）上下排列分布，都独占一行，且宽度填充满整个页面。
• 轮播图（id="banner"）与新闻（id="news"）之间间隔 45px。

此处各个元素都是由id进行定义的，所以用css时要用“#”才可以，上下排布独占一行，可以使用flex布局中的横轴与交叉轴的定义，对页面中元素进行纵向排布，flex-direction: column;宽度占满整个页面，则是子元素的设置，我们需要将子元素的id单独拿出来进行css定义，并设置 width: 100%;要求轮播图与新闻之间间隔45px，我们则采用外边距的方式将二者隔开margin-bottom: 45px;最后结果如此

本题的判题程序可能出现问题，因此有些能实现效果的代码也有可能不通过

---

题目2：垃圾分类

需要考生作答的代码段如下：

        const garbagesorting = () => {// TODO：待补充代码};

题目要求：

完善 index.html 中的 garbagesorting 方法。

点击一键分类，把垃圾 waste 中的数据中的 txt 根据分类 type 依次放到对应的数组，对应的数组如下：

let food_waste = ref([]); //厨余垃圾
let recyclable_waste = ref([]); //可回收垃圾
let other_waste = ref([]); //其他垃圾
let harmful_waste = ref([]); //有害垃圾。

如 food_waste 最后的结果是 ["剩菜剩饭", "骨头", "菜根菜叶"]。

答案：

        const garbagesorting = () => {// TODO：待补充代码waste.value.forEach(({type,txt})=>({厨余垃圾:food_waste,可回收垃圾:recyclable_waste,其他垃圾:other_waste,有害垃圾:harmful_waste})[type].value.push(txt))};

本题作者想说

本题主要考察的知识：

主要将已存在的数组按数组内部的属性进行再分类

 本题主要是要求我们对waste中的垃圾属性，按照垃圾类型一对一进行分类，既然涉及到了“一对一”那我们首先要想到循环遍历，也就是将数组一个一个进行定义（forEach）

forEach 是 JavaScript 中数组的一个方法，用于对数组的每个元素执行一次提供的函数。它不会改变原数组，也不会返回任何值（即返回 undefined）。

以下是 forEach 方法的基本语法：

array.forEach(function(currentValue, index, arr), thisValue)

currentValue：当前正在处理的数组元素。

index（可选）：当前正在处理的数组元素的索引。

arr（可选）：正在被遍历的数组本身。

thisValue（可选）：执行回调函数时用作 this 的值。

这个语法其实没什么难的，最主要的就是要明白你要对那个进行循环操作，在本题中，我要对waste数组中的type与txt进行循环，这样我们就要把这两个属性，作为一个整体的对象在foreach中展示

waste.value.forEach(({type,txt})=>()
)

 如此，我们明白了要把什么循环，之后就要考虑对要循环的东西怎么循环，根据题意，题目中已经把各个类型垃圾都已经做好了定义，那么我们要做的就是把该属于这类的垃圾与watse中乱序的垃圾分类进行一一的映射，并根据类型的值将watse中的txt推送到其中

一一映射：在一一对应时，注意“，”的使用

              厨余垃圾:food_waste,可回收垃圾:recyclable_waste,其他垃圾:other_waste,有害垃圾:harmful_waste

根据类型（[type]）的值（.value）将watse中的txt推送到其中（.push(txt) ）最后结果如此

因此题的{}与（）过于多，所以需要答题者一定要注意foreach用到的符号与自己定义的对象符号，不要搞混

---

题目3：神奇的滤镜

需要考生作答的代码段如下：

filterTrigger.forEach(trigger => {// TODO：待补充代码});

题目要求：

请在 js/index.js 文件中的 TODO 部分补充代码实现需求，变量 filterTrigger 为所有滤镜复选框元素。为复选框 .Header input 绑定选择事件，当选择某个复选框时，会弹出对应的滤镜效果的弹窗（class="Filter"）。当选择多个复选框时，滤镜会进行叠加，通过调用以提供的 updateZIndex 函数将后选择的滤镜覆盖在最上层。

例如：当勾选页面中 data-filter-name="brightness" 对应的复选框时，与其对应的滤镜弹窗（class="Filter" data-filter-name="brightness")将显示在页面中（注意，只能通过修改 display 属性控制其显隐）。

答案：

filterTrigger.forEach(trigger => {// TODO：待补充代码document.querySelector('header').onchange = ({target}) => {filterTrigger.forEach((trigger,id) => {filters[id].style.display = trigger.checked ? 'block' : 'none'if(trigger===trigger){updateZIndex(filters[id])}})}
});

本题作者想说

本题主要考察的知识：

利用js寻找改变的元素，并利用循环遍历与监听器，持续不断的判断状态以达到内部属性的改变

 本题的代码过于冗杂，这便更考到我们理解代码的能力，首先我们要清楚filterTrigger 为控制所有滤镜框的复选框元素，我们要做到当点击页面头部的选项时，滤镜框的复选框同时被选择，同时可以显示滤镜框，trigger代表在循环时滤镜框的另一种代指，滤镜效果的弹窗（class="Filter"）即表示滤镜框，但是值得注意的上述代码const filters = document.querySelectorAll('.Filter');已经将.Filter变成了filters，所以filters为滤镜框

首先找到页面头部的复选框是否被选中，并添加一个监听器，使随时可以监听是否选择

  document.querySelector('header').onchange = ({target})

这里target代表头部复选框的另一种代指，之后我们首先有了前提条件复选框的控制选项，之后通过复选框选项再次循环对滤镜框的复选框元素

=> {filterTrigger.forEach((trigger,id) => {}

与之前不同的是，我们把id也传入进去，这样编程就知道了谁被选择了，之后我们就可以根据id将滤镜框展示出来，另外多个展示框展示时，题目有明确要求使用updateZIndex（）函数放置上层

      filters[id].style.display = trigger.checked ? 'block' : 'none'if(trigger===trigger){updateZIndex(filters[id])}})

 如此便完成了

本题难点就难在了一层层的套环，一层层数据的传递

---

题目4：解密工具

需要考生作答的代码段如下：

function getPossiblePasswords(max, count) { // TODO: 待补充代码  }

题目要求：

完善 js/index.js 中的 getPossiblePasswords 函数，该函数接受两个参数：

• max：密码数组中的最大数字
• count：密码数组的长度

该方法返回值为一个二维数组，里面包含所有的可能解密的数组。解密的数组从1开始，无需考虑二维数组中包含的数组顺序以及密码数组中数字的顺序。即[[2,4],[3,4]]跟[[4,3],[4,2]] 是一样的。

答案：

function getPossiblePasswords(max, count) {// TODO: 待补充代码  const resultArr = []const handleArr = (start, res) => { if (res.length == count) {resultArr.push([...res])return}for (let i = start; i <= max; i++) { res.push(i)handleArr(i + 1, res) res.pop() }}handleArr(1, [])return resultArr
}

本题作者想说

本题主要考察的知识：

通过两个数字的限制，生成符合排列组合的二维数组

本题其实就是让答题人限制最大数与数组的个数，生成符合个数且最大数不超过限定的最大数的排列组合数组

定义一个数组用来存放最后的数组    const resultArr = []

之后我们再定义一个处理数组的方法，传入start和res，start表示当前排列组合的起始数字，res是一个数组，用于存储当前的排列组合。

const handleArr = (start, res) => {}

如果res数组的长度等于count，则将res数组的副本推入resultArr数组中，并返回

if (res.length == count) {resultArr.push([...res])return
}

 函数通过一个for循环遍历从start到max的所有整数，对于每个整数i，将其推入res数组，然后递归调用handleArr函数，传入i + 1作为新的start值，递归调用后，将res数组的最后一个元素弹出，以便尝试下一个可能的排列组合

for (let i = start; i <= max; i++) { res.push(i)handleArr(i + 1, res) res.pop() 
}

之后我们用这个函数将1与空数组【】传入，在处理之后，返回最后的数组

    handleArr(1, [])return resultArr

 如此便完成了，

---

题目5：搜索重试

需要考生作答的代码段如下：

async function retry(operation, maxAttempts, delayBetweenRetries) {// TODO:待补充代码}

题目要求：

补充 js/index.js 中 retry 函数的 TODO 部分，retry 允许一个 promise 函数在操作失败时进行多次重试，直到操作成功或达到最大重试次数为止。

该函数接收三个参数， 参数的作用和解释如下：

• operation 为一个函数，该函数会返回成功或者失败的 promise。
• maxAttempts 最大重试次数，类型为数字 number。
• delayBetweenRetries 重试之间的时间间隔（单位：ms），类型为数字 number。

如果异步操作（即执行 operation() ）在规定次数内返回成功，retry 函数会返回 operation() 执行成功时的 resolve 值；如果异步操作返回失败，并且达到了最大重试次数，函数会抛出一个错误 throw error，error为 operation() 执行失败时返回的 reject 值。

答案：

async function retry(operation, maxAttempts, delayBetweenRetries) {// TODO:待补充代码for(let i=1;i<=maxAttempts;i++){try{const res = await operation()return res}catch(error){if(i>=maxAttempts){return error}else{await new Promise(reslove =>setTimeout(reslove,delayBetweenRetries))}}}
}

本题作者想说

本题主要考察的知识：

1.同步与异步的操作

2.try{}catch{}语法

3.Promise

 本题主要想实现的目标就是在点击按钮后，实现重复循环一个方法的操作，并且随着操作的某个部分的报错而进行提示

既然是循环执行函数，那么首先就要用到for循环，  for(let i=1;i<=maxAttempts;i++){} 将整体的步骤循环下来，因为在之后可能会出现操作异常的报错，所以我们在这里使用try...catch 语句    try{}catch(error){}

try...catch 语句由一个 try 块和一个 catch 块或 finally 块（或两者皆有）组成。首先执行 try 块中的代码，如果它抛出异常，则将执行 catch 块中的代码。finally 块中的代码将在控制流退出整个结构之前始终被执行。

如果没有出现异常即运行函数成功则，定义一个结果容器，给异步的函数，并且返回出来

      const res = await operation()return res

 如果出现异常了即重试失败，则首先我们判断他有没有超出最大重试次数，如果超出了，则直接返回题目中所指的error错误即可

if(i>=maxAttempts){return error
}else{}

如果没有超出最大重试次数，则使用promise函数实现一个简单的延迟功能

await关键字：await关键字用于等待一个Promise对象的状态变为resolved。它只能在async函数内部使用。当遇到await时，JavaScript引擎会暂停执行async函数，直到Promise对象的状态变为resolved，然后继续执行async函数。

new Promise：创建一个新的Promise对象。

reslove：这是Promise构造函数的参数，是一个函数，用于将Promise对象的状态从pending变为resolved。

setTimeout(reslove, delayBetweenRetries)：setTimeout函数用于设置一个定时器，在指定的延迟时间（delayBetweenRetries）后调用reslove函数。这样，Promise对象的状态会在延迟时间后变为resolved。

    await new Promise(reslove =>setTimeout(reslove,delayBetweenRetries))

 如此便实现了。

---

题目6：学生探览

需要考生作答的代码段如下：

        // TODO1 START 请在下面补充代码// TODO1 END

        // TODO2 START 请在下面补充代码const classAverageScores = ref[] // 将此属性改为计算属性// TODO2 END

             radar: {// TODO3 START 请在下面补充代码// TODO3 END},

题目要求：

1.请在 TODO1 处使用 AXIOS 请求班级数据，并储存到变量 items 中。

• 数据地址已经储存在变量 mockUrl 中，请直接使用此变量作为请求地址。
• 其中每个对象代表一个学生信息， scores 数组包含三个数字元素，分别代表该学生的“技术能力得分”、“硬实力得分”、“软技能得分”三个方面的成绩。

2.请在 TODO2 处补全代码，当对班级学生信息进行查询时会触发。根据班级数据（即目标 1 获取赋值的 items 变量）分别计算班级在“技术能力得分”、“硬实力得分”、“软技能得分”三个方面的平均成绩，并将这三个方面的平均成绩以数组的方式赋值到计算属性 classAverageScores 中。

3.请在 TODO3 处补全代码，完成雷达图渲染。

• echarts 配置项 radar 的 API 用法如下：

  名称	说明	类型
  shape	雷达图绘制类型	'polygon' | 'circle'
  startAngle	坐标系起始角度，也就是第一个指示器轴的角度	number
  indicator	雷达图的指示器，用来指定雷达图中的多个变量	Array
  indicator.name	指示器名称	string
  indicator.max	指示器的最大值	number
  indicator.min	指示器的最小值	number

• 要求绘制圆形雷达图，第一个指示器应处于圆的正右侧处（即起始角度为0），指示器的显示顺序为“技术能力得分”、“硬实力得分”、“软技能得分”，指示器范围均为 0 ~ 100。

答案：

        // TODO1 START 请在下面补充代码axios.get(mockUrl).then((res)=>{items.value = res.data})// TODO1 END

        // TODO2 START 请在下面补充代码const classAverageScores = computed(()=>{let score1 = 0 // 代表班级技术能力得分let score2 = 0 // 代表班级硬实力得分let score3 = 0 // 代表班级软技能得分items.value.forEach(item => {score1 += item.scores[0]score2 += item.scores[1]score3 += item.scores[2]});let totleNum = items.value.lengthreturn[Math.round(score1/totleNum),Math.round(score2/totleNum),Math.round(score3/totleNum)]})// TODO2 END

             radar: {// TODO3 START 请在下面补充代码shape:'circle',startAngle:0,indicator:[{name: '技术能力得分',max: 100,min: 0},{name: '硬实力得分',max: 100,min: 0},{name: '软技能得分',max: 100,min: 0}]// TODO3 END},

本题作者想说

本题主要考察的知识：

主要使用js的知识对页面进行渲染，与数据的计算，属性的使用

目标一：使用axios引入mockUrl数据

目标二：计算成绩

目标三：题目中提示属性的引入

使用axios，了解axios语法即可，值得注意的就是注意是item"s"."value"=res."data"

题目中提到将定义的变量数组改为计算属性，则我们修改其中的代码，计算成绩，首先定义一些容器来储存数据

            let score1 = 0 // 代表班级技术能力得分let score2 = 0 // 代表班级硬实力得分let score3 = 0 // 代表班级软技能得分

 其中成绩都在items.value里面，所以我们要使用foreach把成绩遍历出来计算，实现累加

                score1 += item.scores[0]score2 += item.scores[1]score3 += item.scores[2]

最后既然是计算平均值，我们还要用到分母，也就是总人数，这里人数即为 items.value的长度

最后返回的时候，在使用Math.round()函数计算一下，即可

目标三，在题目中已经明确的给出了属性，并且有radar: {}，所以我们只需要根据题目给出的API表格赋值即可。

---

题目7：购物狂欢节

需要考生作答的代码段如下：

    async function fetchProducts(category) {// TODO: 根据分类获取商品数据}

  function addProduct(product) {// TODO: 添加商品到购物车，如果商品已存在，则数量+1}

  const totalPrice = computed(() => {// TODO: 计算总价});

题目要求：

1.在 js/stores/useProducts.js 中补充 fetchProducts 函数， category 参数代表商品的分类。可能传来值为 books 、 clothing 、 electronics ，三个值对应的请求文件分别为 api/products/ 中 books.json 、 clothing.json 、 electronics.json 的数据，将请求到的数据赋值到 this.products 中（每次请求都要重新赋值，请求数据不累加），函数不需要返回值。

每个商品对象具有以下属性：

• id （Number）: 电子产品的唯一标识符。
• name （String）: 电子产品的名称。
• price （Number）: 电子产品的价格。

2.在 js/stores/useCart.js 补充 addProduct 函数，添加商品到购物车，商品对象通过 product 参数传入。如果商品已存在，则数量+1，数量使用 product.quantity 字段表示，如果商品不存在，则数量 product.quantity 值为 1。函数不需要返回值。

3.在 js/stores/useCart.js 补充 totalPrice 函数，计算购物车中的总价格并返回。

总价格 = 商品 1 价格 * 商品 1 数量 + 商品 2 价格 * 商品 2 数量……

答案：

    async function fetchProducts(category) {// TODO: 根据分类获取商品数据const response = await fetch(`api/products/${category}.json`)const data = await response.json()this.products = data}

  function addProduct(product) {// TODO: 添加商品到购物车，如果商品已存在，则数量+1const index = products.value.findIndex((p)=>p.name === product.name)if(index>=0){products.value[index].quantity++;}else{products.value.push({...product,quantity:1})}}

  const totalPrice = computed(() => {// TODO: 计算总价return products.value.reduce((total, product) => {return total + product.price * product.quantity;}, 0);});

本题作者想说

本题主要考察的知识：

类似购物车的商品渲染、添加商品、计算总价等操作

 目标一主要就是将商品按照类别渲染到页面上，题目中指出“将请求到的数据赋值到 this.products 中”，但是数据却在api/products/ 的books.json 、 clothing.json 、 electronics.json 之中，我们要做的就是把数据从之中找出来，这就要用到fetch语法和json()语法

fetch 函数主要用于从服务器获取资源，如 JSON 数据、图片、文件等。

json()通常用于将 JavaScript 对象或数组转换为 JSON 字符串。

之后直接赋值即可

目标二主要的任务就是添加商品，并在数量之上进行增加，如果在此之前没有数据则新增商品并设置数量为1

我们通过findIndex来找是否已经有了该商品

findIndex 是 JavaScript 数组对象的一个方法，用于查找数组中满足提供的测试函数的第一个元素的索引。如果没有找到符合条件的元素，则返回 -1。

并且定义一个下标index来供以后商品使用

    const index = products.value.findIndex((p) => p.name === product.name);

在这里我们通过是否已经有了商品名字（name）来判断

注意products为已选商品，product为全部商品，不要弄混

    if (index >= 0) {} else {}

数据返回大于0，说明已经有了该商品，则数量加一，注意角标index的使用

products.value[index].quantity++;

数据返回小于0，说明还没有该商品，则我们将选择的商品（product）推到已选商品（products）之中，并定义数量为1 

        products.value.push({...product,quantity: 1});

 如此便可完成。

---

感谢观看此篇文章，谢谢大家的支持，本片文章只是我自己学习的历程，有些写的不好地方欢迎大家交流改动。

长路漫漫，我们还需努力！