备赛蓝桥杯之第十五届职业院校组省赛第三题：产品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)) //6reduce的实现
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),初始值`
感谢观看此篇文章，谢谢大家的支持，本片文章只是我自己学习的历程，有些写的不好地方欢迎大家交流改动。
长路漫漫，我们还需努力！