当前位置: 首页 > 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…...

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

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

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

让AI看见世界:MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

Android第十三次面试总结(四大 组件基础)

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

【JVM】Java虚拟机(二)——垃圾回收

目录 一、如何判断对象可以回收 &#xff08;一&#xff09;引用计数法 &#xff08;二&#xff09;可达性分析算法 二、垃圾回收算法 &#xff08;一&#xff09;标记清除 &#xff08;二&#xff09;标记整理 &#xff08;三&#xff09;复制 &#xff08;四&#xff…...

LRU 缓存机制详解与实现(Java版) + 力扣解决

&#x1f4cc; LRU 缓存机制详解与实现&#xff08;Java版&#xff09; 一、&#x1f4d6; 问题背景 在日常开发中&#xff0c;我们经常会使用 缓存&#xff08;Cache&#xff09; 来提升性能。但由于内存有限&#xff0c;缓存不可能无限增长&#xff0c;于是需要策略决定&am…...

NPOI操作EXCEL文件 ——CAD C# 二次开发

缺点:dll.版本容易加载错误。CAD加载插件时&#xff0c;没有加载所有类库。插件运行过程中用到某个类库&#xff0c;会从CAD的安装目录找&#xff0c;找不到就报错了。 【方案2】让CAD在加载过程中把类库加载到内存 【方案3】是发现缺少了哪个库&#xff0c;就用插件程序加载进…...