备赛蓝桥杯之第十五届职业院校组省赛第三题:产品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 //6

function 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),初始值`


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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/961962.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于FPGA的BT656解码

概述 BT656全称为“ITU-R BT.656-4”或简称“BT656”,是一种用于数字视频传输的接口标准。它规定了数字视频信号的编码方式、传输格式以及接口电气特性。在物理层面上,BT656接口通常包含10根线(在某些应用中可能略有不同,但标准配置为10根)。这些线分别用于传输视频数据、…

随机矩阵投影长度保持引理及其证明

原论文中的引理 2 \textbf{2} 2 引理 2 \textbf{2} 2的内容​​ &#x1f449;前提 1 1 1&#xff1a;设一个随机矩阵 S ( s i j ) ∈ R t d S\text{}(s_{ij})\text{∈}\mathbb{R}^{t\text{}d} S(sij​)∈Rtd&#xff0c;每个元素 s i j s_{ij} sij​独立同分布于 N ( 0 , …

详细解释java当中的所有知识点(前言及数据类型及变量)(第一部分)

会将java当中的所有的知识点以及相关的题目进行分享&#xff0c;这是其中的第一部分&#xff0c;用红色字体标注出重点&#xff0c;以及加粗的方式进行提醒 目录 一、Java语言概述 1.Java语言简介 2.语言优势 二、main方法 1.Java程序结构组成 2.运行Java程序 3.注释 4.…

STM32 PWMI模式测频率占空比

接线图&#xff1a; PWMI基本结构 代码配置&#xff1a; 与上一章输入捕获代码一样&#xff0c;根据结构体&#xff0c;需要在输入捕获单元再配置一个通道。我们调用一个函数 这个函数可以给结构体赋值&#xff0c;当我们定义了一遍结构体参数&#xff0c;再调用这个函数&…

Fort Firewall:全方位守护网络安全

Fort Firewall是一款专为 Windows 操作系统设计的开源防火墙工具&#xff0c;旨在为用户提供全面的网络安全保护。它基于 Windows 过滤平台&#xff08;WFP&#xff09;&#xff0c;能够与系统无缝集成&#xff0c;确保高效的网络流量管理和安全防护。该软件支持实时监控网络流…

Baklib引领内容管理平台新时代优化创作流程与团队协作

内容概要 在迅速变化的数字化时代&#xff0c;内容管理平台已成为各种行业中不可或缺的工具。通过系统化的管理&#xff0c;用户能够有效地组织、存储和共享信息&#xff0c;从而提升工作效率和创意表达。Baklib作为一款新兴的内容管理平台&#xff0c;以其独特的优势和创新功…

【算法设计与分析】实验2:递归与分治—Hanoi塔、棋盘覆盖、最大子段和

目录 一、实验目的 二、实验环境 三、实验内容 四、核心代码 五、记录与处理 六、思考与总结 七、完整报告和成果文件提取链接 一、实验目的 掌握递归求解问题的思想及对应的程序编码结构。针对不同的问题&#xff0c;能够利用递归进行问题求解&#xff0c;并利用Jav…

mysql_init和mysql_real_connect的形象化认识

解析总结 1. mysql_init 的作用 mysql_init 用于初始化一个 MYSQL 结构体&#xff0c;为后续数据库连接和操作做准备。该结构体存储连接配置及状态信息&#xff0c;是 MySQL C API 的核心句柄。 示例&#xff1a; MYSQL *conn mysql_init(NULL); // 初始化连接句柄2. mysql_…

C语言------数组从入门到精通

1.一维数组 目标:通过思维导图了解学习一维数组的核心知识点: 1.1定义 使用 类型名 数组名[数组长度]; 定义数组。 // 示例&#xff1a; int arr[5]; 1.2一维数组初始化 数组的初始化可以分为静态初始化和动态初始化两种方式。 它们的主要区别在于初始化的时机和内存分配的方…

留学毕业论文如何利用不同问题设计问卷

在留学毕业论文的写作中&#xff0c;我们经常会遇到各种问题&#xff0c;例如选择合适的问题&#xff0c;选择合适的研究方法&#xff0c;以及设计合理的研究过程。然而在完成留学毕业论文的过程中&#xff0c;我们往往会在研究设计这里卡住。即使我们选准了研究问题和研究方法…

范冰冰担任第75届柏林电影节主竞赛单元评委 共鉴电影佳作

近日&#xff0c;备受瞩目的柏林电影节迎来了新一届盛事&#xff0c;而华人演员范冰冰将以主竞赛单元评委身份亮相&#xff0c;引发了广泛关注。此前她已担任过戛纳国际电影节、东京国际电影节、圣塞巴斯蒂安国际电影节等众多电影节主竞赛单元评委。作为国际影坛的知名人物&…

对顾客行为的数据分析:融入2+1链动模式、AI智能名片与S2B2C商城小程序的新视角

摘要&#xff1a;随着互联网技术的飞速发展&#xff0c;企业与顾客之间的交互方式变得日益多样化&#xff0c;移动设备、社交媒体、门店、电子商务网站等交互点应运而生。这些交互点不仅为顾客提供了便捷的服务体验&#xff0c;同时也为企业积累了大量的顾客行为数据。本文旨在…

如何用 Groq API 免费使用 DeepSeek-R1 70B,并通过 Deno 实现国内访问

这几天都被Deepseek刷屏了&#xff0c;而且Deepseek由于异常访问量&#xff0c;这几天都不能愉快的和它玩耍了&#xff0c; 我发现Groq新增了一个Deepseek的70b参数的模型&#xff0c; DeepSeek-R1 70B 作为一款强大的开源模型&#xff0c;提供了卓越的推理能力&#xff0c;而 …

docker配置mysql并使用mysql connector cpp编程

mysql 配置mysql使用docker 这里使用docker安装了&#xff0c;比较简洁&#xff0c;不想使用了直接就可以把容器删掉&#xff0c;首先获取下镜像&#xff0c;如下命令 docker pull container-registry.oracle.com/mysql/community-server这里直接默认使用最新版本的mysql了 …

STM32 TIM输入捕获 测量频率

输入捕获简介&#xff1a; IC&#xff08;Input Capture&#xff09;输入捕获 输入捕获模式下&#xff0c;当通道输入引脚出现指定电平跳变时&#xff0c;当前CNT的值将被锁存到CCR中&#xff0c;可用于测量PWM波形的频率、占空比、脉冲间隔、电平持续时间等参数 每个高级定时器…

【已解决】windows7虚拟机安装VMtools频繁报错

为了在虚拟机VMware中安装win7&#xff0c;题主先在网上下载了windows7 professional版本的镜像&#xff0c;在vmware中安装vmtools时报错&#xff0c;信息如下 &#xff08;安装程序无法继续&#xff0c;本程序需要您将此虚拟机上安装的操作系统更新到SP1&#xff09; 然后就…

7.抽象工厂(Abstract Factory)

抽象工厂与工厂方法极其类似&#xff0c;都是绕开new的&#xff0c;但是有些许不同。 动机 在软件系统中&#xff0c;经常面临着“一系列相互依赖的对象”的创建工作&#xff1b;同时&#xff0c;由于需求的变化&#xff0c;往往存在更多系列对象的创建工作。 假设案例 假设…

电路研究9.2.3——合宙Air780EP中FTP——FTPGET 命令使用方法研究

怎么说呢&#xff0c;之前也是看的&#xff0c;但是也很迷茫&#xff0c;感觉上虽然是对的&#xff0c;但是无法联系到应用里面&#xff0c;今天研究一下FTP 命令使用方法吧。 15.29 使用方法举例 这里发现下面那些看的不懂呢&#xff0c;于是就返回FTP的应用了。 9.5.4 FTP 应…

高精度加法乘法

高精度加法&乘法都是把数字转化成数组进行运算&#xff0c;存储 高精度加法 建议多在纸上画画&#xff0c;梳理思路 代码实现 输入字符串 //初始化数组存储 int a[250]{0}; int b[250]{0}; int c[251]{0}; //定义字符串&#xff0c;输入字符串 string s1,s2; getline(c…

【C++】STL介绍 + string类使用介绍 + 模拟实现string类

目录 前言 一、STL简介 二、string类 1.为什么学习string类 2.标准库中的string类 3.auto和范围for 4.迭代器 5.string类的常用接口说明 三、模拟实现 string类 前言 本文带大家入坑STL&#xff0c;学习第一个容器string。 一、STL简介 在学习C数据结构和算法前&#xff0c;我…