备赛蓝桥杯之第十五届职业院校组省赛第五题：悠然画境

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

---

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

本题目为：2024年十五届省赛职业院校组真题第五题：悠然画境

---

题目：

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

function generateAndDisplayImages(imageCount, selectedText) {let imgAry = [] // 定义最佳匹配的图片数组// TODO：待补充代码 //TODO：ENDreturn imgAry;
}

题目要求：

  根据函数参数 `imageCount` 和 `selectedText` 与已提供 `artDataArray` 数组中的图片相关词语进行规则匹配，并返回匹配度最高的图片数组。最佳匹配的规则为，文本内容中包含对应图片 `tag` 的数量最多则为匹配度最高，**放在数组前面**，如果多张图片匹配度相同，则任意选择匹配到的图片。

答案：

function generateAndDisplayImages(imageCount, selectedText) {let imgAry = [] // 定义最佳匹配的图片数组// TODO：待补充代码 imgAry = artDataArray.map(v => {const keys = v.tags.split('、')const count = keys.filter(v => selectedText.includes(v)).lengthreturn {...v,count}}).sort((a, b) => b.count - a.count).slice(0, imageCount)//TODO：ENDreturn imgAry;
}

---

拓展学习

本题作者想说

这段JavaScript代码定义了一个名为`generateAndDisplayImages`的函数，用于根据给定的文本（`selectedText`）和图片数量（`imageCount`）生成并返回一个包含最佳匹配图片的数组。以下是代码的详细解释：

函数参数

- `imageCount`：一个整数，表示需要返回的图片数量。
- `selectedText`：一个字符串，表示用户选择的文本。

函数实现

1. 定义图片数组：
   ```javascript
   let imgAry = []
   ```
   这里定义了一个空数组`imgAry`，用于存储最终返回的图片数据。

2. 待补充代码：
   ```javascript
   // TODO：待补充代码 
   ```
   这部分代码需要开发者自行补充，目前是空的。

3. 处理图片数据：
   ```javascript
   imgAry = artDataArray.map(v => {
       const keys = v.tags.split('、')
       const count = keys.filter(v => selectedText.includes(v)).length
       return {
           ...v,
           count
       }
   }).sort((a, b) => b.count - a.count).slice(0, imageCount)
   ```
   这段代码实现了以下功能：
   - 遍历`artDataArray`数组中的每个元素`v`。
   - 将每个元素的`tags`属性（假设它是一个用`、`分隔的字符串）拆分成一个数组`keys`。
   - 计算每个元素中包含`selectedText`的标签数量，并存储在`count`变量中。
   - 将每个元素及其`count`属性合并成一个新对象，并返回这个新对象。
   - 按照每个元素的`count`属性降序排序。
   - 取前`imageCount`个元素。

4. 返回结果：
   ```javascript
   return imgAry;
   ```
   返回处理后的图片数组`imgAry`。

注意事项

- `artDataArray`：在代码中未定义，假设这是一个包含图片数据的数组，每个元素至少包含`tags`属性。
- `tags`属性：假设它是一个用`、`分隔的字符串，表示图片的标签。
- `selectedText`：在计算匹配数量时，假设它是小写的，如果实际应用中可能包含大写字母，需要统一转换为小写。

用途

该函数的用途是根据用户选择的文本，从一组图片数据中筛选出与用户选择最相关的图片，并返回指定数量的图片数据。这在需要根据用户输入动态展示相关内容的场景中非常有用，例如图片搜索、推荐系统等。

---

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

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