备赛蓝桥杯之第十六届模拟赛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。

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

答案：

        // 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.length

            return[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: 添加商品到购物车，如果商品已存在，则数量+1
    const 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
        });

如此便可完成。

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

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