当前位置: 首页 > news >正文

备赛蓝桥杯之第十五届职业院校组省赛第三题:产品360度展示

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


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

本题目为:2024年十五届省赛职业院校组真题第三题:产品360度展示


题目:

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

/*** @param {*} initialValue 初始值* @param {Array} sequence 由普通函数或 Promise 函数组成的数组* @return {Promise} */const pipeline = (initialValue, sequence) => {// TODO: 待补充代码};

题目要求:

请在 `js/utils.js` 文件中的 TODO 部分,实现以下目标:封装一个支持异步的 `pipeline` 管道函数,能够按顺序执行一系列异步操作,每个异步操作的结果将作为下一个异步操作的输入。

答案:

const pipeline = (initialValue, sequence) => {// TODO: 待补充代码return sequence.reduce(async (x, f) => f(await x), initialValue)
};

拓展学习

组合与管道

    reduce方法

    累加器与当前值的类似操作`(x,y)=>y(x),初始值`

前言

我们假设一种需求,即“让一个数字,先进行+1,再进行*3”

通常我们普遍来说会像这样来实现这个效果

// value (1+1)*3 //6function add1(x){return x + 1;
}
function mul3(x){return x * 3;
}console.log(mul3(add1(1))) //6

这样写,我们可以实现上述操作

但是如果有很多的步骤,那么我们会发现后续调用的方法会非常多非常麻烦

所以我们就引入了一个方法组合(compose)

组合

像上述假设,我们再使用组合的方法来实现

function add1(x){return x + 1;
}
function mul3(x){return x * 3;
}function compose (f,g){return function (x){return f(g(x))}
}console.log(compose(mul3,add1)(1)) //6

注意compose组合是从右向左去执行,因此在上述定义代码中

compose (f,g)

先去执行函数g再去执行函数f,即f(g(x))

在运用代码中

compose(mul3,add1)

先去执行add1再去执行mul3

当产生更多的操作时,我们可以使用递归迭代的方法来定义compose

递归

当有[funs[0],funs[1],funs[3]]时

将funs[3]输出结果传递给funs[1]再将结果传递给funs[0]

定义代码如下

function add1(x){return x + 1;
}
function mul3(x){return x * 3;
}
function compose(...funs){let count = funs.length -1;let result = undefined;return function fn(x){if(count < 0){return result;}result = funs[count--](x)return fn(result)}
}
console.log(compose(mul3,add1)(1)) //6

迭代

当有[funs[0],funs[1],funs[3]]时

相比递归来说,迭代的方法,就是把funs[3]->funs[1]->funs[0]三个方法,初步灌进去

定义代码如下

function add1(x){return x + 1;
}
function mul3(x){return x * 3;
}
function compose(...funs){let callback = function(f,g){return function(x){return f(g(x))}}let fn = function(funs[2](x)){return funs[0]funs[1](fun[2](x))}for(let i=1;i < funs.length; i++){fn = callback(fn, funs[i])}return fn;}console.log(compose(mul3, add1)(1)) //6

reduce的实现

reduce的实现就是累加器的功能

function add1(x){return x + 1;
}
function mul3(x){return x * 3;
}
function compose(...funs){if(funs.length === 0){return arg => arg}if(funs.length ===1){ }return funs.reduce((a,b) => (...args) => a(b(...args)))
}console.log(compose(mul3, add1)(1)) //6

管道

管道相比组合来说唯一的区别其实就是

组合:从右向左

管道:从左向右

而对于定义代码来说,

就是加上reverse()即可

function add1(x){return x + 1;
}
function mul3(x){return x * 3;
}
function pipe(...funs){if(funs.length === 0){return arg => arg}if(funs.length ===1){ }return funs.reverse().reduce((a,b) => (...args) => a(b(...args)))
}//这就变成了'先*3再+1'
console.log(pipe(mul3, add1)(1)) //4

本题作者想说

目标

    Pipeline 管道函数

    处理一系列的异步操作,并且在处理时,需要按顺序执行,每个任务的结果会作为下一个任务的输入。

思路

观察代码

    观察需要修改的代码

    在题目中也有相对官方的解释

- `initialValue`:管道的初始值(即 `sequence` 中第一个函数的参数)。它是整个异步管道的起点。第一个异步步骤将以此值开始,并且后续步骤将在前一步骤的输出基础上进行。

- `sequence`:是一个由具有返回值和可以传参的函数组成的数组,函数可以是普通函数也可以是 Promise 函数。每个函数接收前一个步骤的输出(即该函数的参数是上一个函数的执行结果),并返回一个 Promise。这个数组定义了整个管道中的处理步骤和它们的顺序。

- `pipeline` 函数返回一个 `Promise`,这个 `Promise` 最终解析为整个管道执行完成后的结果。

    我们自己理解起来呢,即

    sequence就是让产品动起来的函数,由于动起来的情况与函数太多,所以sequence就是一个函数数组

    initialValue就是整个sequence函数数组的初始值,即初始的产品状态

     /*** @param {*} initialValue 初始值* @param {Array} sequence 由普通函数或 Promise 函数组成的数组* @return {Promise}*/const pipeline = (initialValue, sequence) => {// TODO: 待补充代码};

    经过我们的console.log分析,发现

    initialValue的值为:

    <div class="inner" style="transition: unset; transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg); background-position: right center;">

        <div class="screen" style="transition: unset; transform: rotateX(0deg);">…</div>

        <div class="computerbody">…</div>

    </div>

    sequence的值为:

    (5) [ƒ, ƒ, ƒ, ƒ, ƒ]

        0: (element) => {…}

        1: (element) => {…}

        2: (element) => {…}

        3: (element) => {…}

        4: (element) => {…}

        length: 5

    [[Prototype]]: Array(0)

    这样我们就可以清晰的理解,sequence中的函数来控制initialValue某些具体的值从而实现360度的展示

    其次,观察具体的值之后,我们还看到了`const pipeline = (initialValue, sequence) =>`

    这就表示我们要最具体的使用pipeline管道函数来处理这个事件

分析逻辑

    Pipeline 管道函数:Pipeline 管道函数是一种用于数据处理和转换的编程模式,它将一系列的处理步骤串联起来,使得数据可以在这些步骤之间流动和转换。

    我们首先知道了具体的函数操作,那么我们就要使其每个函数都被执行,可以理解为将数组中的每个函数都遍历一遍

    这样我们就用到了reduce方法:reduce方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。

    将每个sequence中的方法进行遍历

sequence.reduce()

    内部的处理,首先我们要定义两个值

    一个为累加器,将当前被执行的函数进行保存与执行:x

    一个当前的值(当前执行的方法),说明当前正在用的是sequence中的哪个方法:f

    (x, f) =>

    之后我们将当前的x作为函数去执行当前的方法f,

    在后面会说明,因为每次调用之后,都会有一个函数,重新初始化这个x值,因此传入x值无关紧要

    f(x)

    之后定义异步函数,因为该操作一定要是异步的,即当await后的函数执行过后,再次执行async的函数

    这里就是当x传入之后再执行下一次sequence中的函数,即:

    async (x, f) => f(await x)

    最后题目要求中提到`第一个异步步骤将以此值开始,并且后续步骤将在前一步骤的输出基础上进行。`

    说明每一个方法的执行都要使initialValue作为初始值,因此再次定义一个初始值,即:

    , initialValue

    最后将代码返回出去即可

    return
设计代码
    return sequence.reduce(async (x, f) => f(await x), initialValue)

注意

    Pipeline 管道函数

    reduce方法

    累加器与当前值的类似操作`(x,y)=>y(x),初始值`


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

长路漫漫,我们还需努力!

相关文章:

备赛蓝桥杯之第十五届职业院校组省赛第三题:产品360度展示

提示&#xff1a;本篇文章仅仅是作者自己目前在备赛蓝桥杯中&#xff0c;自己学习与刷题的学习笔记&#xff0c;写的不好&#xff0c;欢迎大家批评与建议 由于个别题目代码量与题目量偏大&#xff0c;请大家自己去蓝桥杯官网【连接高校和企业 - 蓝桥云课】去寻找原题&#xff0…...

业余无线电 对讲机常用频率使用

我自己的总结是&#xff0c;基本可以无忧使用&#xff1a; 144.035-145.800 146.000-148.000 430.000-431.900 432.240-435.000 438.000-439.000 50Mhz一般手台不支持&#xff0c;暂不记录。 以下为附录可以自行阅读&#xff0c;本文内容如有错误请留言指正。 特定波段…...

个性化的语言模型构建思路

将开源模型(如Llama3、Qwen、Falcon3 … 等)转变为个人专属的大语言模型,通常涉及知识库的构建、微调(fine-tuning)和模型定制等步骤。下面提供一个详细的技术解决方案,涵盖了如何利用现有的资料(如文档、PDF、Excel、PPT、图片、语音、视频等)将开源模型转换为个人专属…...

QT开发技术【QFileDialog卡顿问题】

一、直接用QFileDialog 在window 一般卡顿7秒 qDebug() << "begin:" << QDateTime::currentDateTime().toString("yyyy-MM-dd hh:mm:ss.zzz");QDateTime sTime QDateTime::currentDateTime();QString str QFileDialog::getOpenFileName(null…...

关于为什么java中nextInt()和nextLine()不能混用 | nextInt()和nextInt()之类的可以一起用

键盘录入的区别&#xff1a; 第一套体系&#xff1a;遇到空格、制表符、回车都结束&#xff0c;并且都不接收 nextInt()、nextDouble()、next() 遇到空格、制表符、回车就结束&#xff0c;只接收其之前的数据&#xff0c;空格以及空格之后的数据都在缓冲区内&#xff0c;如果…...

Android OpenGL(六) 纹理

纹理 纹理是一个2D图片&#xff08;甚至也有1D和3D的纹理&#xff09;&#xff0c; 它可以用来添加物体的细节&#xff1b;你可以想象纹理是一张绘有砖块的纸&#xff0c;无缝折叠贴合到你的3D的 房子上&#xff0c;这样你的房子看起来就像有砖墙外表了 纹理环绕方式 纹理坐…...

git和idea重新安装后提交异常

场景&#xff1a;我重装了系统&#xff0c;idea装了2024.3版本的&#xff0c;git也重新装了&#xff0c;但是项目中还是有.git文件夹的&#xff0c;下载了idea的码云插件后&#xff0c;提交报错如下&#xff1a; 异常&#xff1a;Error updating changes: detected dubious ow…...

leetcode刷题记录(八十一)——236. 二叉树的最近公共祖先

&#xff08;一&#xff09;问题描述 236. 二叉树的最近公共祖先 - 力扣&#xff08;LeetCode&#xff09;236. 二叉树的最近公共祖先 - 给定一个二叉树, 找到该树中两个指定节点的最近公共祖先。百度百科 [https://baike.baidu.com/item/%E6%9C%80%E8%BF%91%E5%85%AC%E5%85%B…...

STM32-CAN总线

1.CAN总线简介 CAN总线是由BOSCH公司开发的一种简洁易用、传输速度快、易扩展、可靠性高的串行通信总线 2.CAN总线特征 两根通信线&#xff08;CAN_H、CAN_L&#xff09;&#xff0c;线路少&#xff0c;无需共地差分信号通信&#xff08;相对的是单端信号&#xff09;&#…...

node.js 07.npm下包慢的问题与nrm的使用

一.npm下包慢 因为npm i 默认从npm官网服务器进行下包,但是npm官网服务器是海外服务器所以响应很慢. 于是我们通过npm下包的时候通常用淘宝镜像进行下包,下面是切换到淘宝镜像地址下包的操作. 二.nrm的使用 nrm是一个管理切换npm下包地址的工具,可以快速切换下包的地址. 安…...

ubuntu改变swap存储空间,遇到 fallocate 失败: 文本文件忙

ubuntu改变swap存储空间&#xff0c;遇到 fallocate 失败: 文本文件忙 sudo fallocate -l 16G /swapfile fallocate: fallocate 失败: 文本文件忙这种情况是swap空间正在使用&#xff0c;需要先关闭swap分区&#xff1a; sudo swapoff /swapfile sudo fallocate -l 16G /swap…...

20250122-正则表达式

1. 正则标记 表示一位字符&#xff1a;\\ 表示指定的一位字符&#xff1a;x 表示任意的一位字符&#xff1a;. 表示任意一位数字&#xff1a;\d 表示任意一位非数字&#xff1a;\D 表示任意一个字母&#xff1a;[a-zA-Z]&#xff08;大写或小写&#xff09; 表示任意一个…...

QT之CMAKE教程

介绍 CMake 是一个跨平台的自动化构建系统&#xff0c;它使用配置文件&#xff08;称为 CMakeLists.txt&#xff09;来生成标准的构建文件&#xff0c;如 Unix 的 Makefile 或 Windows 的 Visual Studio 工程文件。CMake 能够支持多种编程语言&#xff0c;尤其是 C 和 C&#…...

网络安全 | 0day漏洞介绍

关注&#xff1a;CodingTechWork 引言 在网络安全领域&#xff0c;0day漏洞&#xff08;Zero-day Vulnerability&#xff09;是指一个尚未被厂商、开发者或安全人员发现、修复或发布修补程序的安全漏洞。0day漏洞是黑客利用的一个重要攻击工具&#xff0c;因其未被披露或未被修…...

关于WPF中ComboBox文本查询功能

一种方法是使用事件&#xff08;包括MVVM的绑定&#xff09; <ComboBox TextBoxBase.TextChanged"ComboBox_TextChanged" /> 然而运行时就会发现&#xff0c;这个事件在疯狂的触发&#xff0c;很频繁 在实际应用中&#xff0c;如果关联查询数据库&#xff0…...

07_游戏加载窗口

隐藏动态提示窗口 创建空节点 命名为 LoadingWnd 意为加载窗口 并设置全屏 在子级下创建Image作为加载背景 也设置成全屏 将以下资源放进Art文件夹中 设置好精灵模式后拖拽至 Image的Source Image框选 创建文本作为提示内容 增加描边组件OutLine可以美化字体 创建Image作为加载…...

awk命令进阶

1.连接文件 awk NRFNR{a[$1]$0;next} NR!FNR{ if(($5) in a) print a[$1],$0 } file1 file2 命令详解&#xff1a; 这个命令的目的是将 file1 和 file2 基于某个共同字段进行连接&#xff08;类似于 SQL 中的 JOIN 操作&#xff09;。下面我们逐步解析它的工作原理。 1. NRF…...

解锁Java中的国密算法:安全保障的密钥

一、引言 在数字化浪潮席卷全球的当下&#xff0c;信息安全已然成为国家、企业乃至个人无法忽视的重要议题。国密算法&#xff0c;作为我国自主研发的密码算法体系&#xff0c;宛如坚固的盾牌&#xff0c;为国家信息安全筑起了一道坚不可摧的防线。它的诞生&#xff0c;不仅承载…...

基于迁移学习的ResNet50模型实现石榴病害数据集多分类图片预测

完整源码项目包获取→点击文章末尾名片&#xff01; 番石榴病害数据集 背景描述 番石榴 &#xff08;Psidium guajava&#xff09; 是南亚的主要作物&#xff0c;尤其是在孟加拉国。它富含维生素 C 和纤维&#xff0c;支持区域经济和营养。不幸的是&#xff0c;番石榴生产受到降…...

在现有 Docker Desktop 环境下安装与配置独立 Kubernetes环境(Mac)

在现有 Docker Desktop 环境下安装与配置独立 Kubernetes 集群环境 目标 在已安装Docker Desktop自带Kubernetes的情况下&#xff0c;搭建一个独立 Kubernetes 集群环境。配置独立的 kubectl 工具&#xff0c;使其默认管理独立的 Kubernetes 集群。保留 Docker Desktop 的 Ku…...

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

三维GIS开发cesium智慧地铁教程(5)Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

linux 错误码总结

1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...

Linux云原生安全:零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

css的定位(position)详解:相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

人工智能(大型语言模型 LLMs)对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...