如何用ai给网站做logo,宝安网站制作公司,iphone wordpress,网站名称更改需要多久提示#xff1a;本篇文章仅仅是作者自己目前在备赛蓝桥杯中#xff0c;自己学习与刷题的学习笔记#xff0c;写的不好#xff0c;欢迎大家批评与建议 由于个别题目代码量与题目量偏大#xff0c;请大家自己去蓝桥杯官网【连接高校和企业 - 蓝桥云课】去寻找原题#xff0…提示本篇文章仅仅是作者自己目前在备赛蓝桥杯中自己学习与刷题的学习笔记写的不好欢迎大家批评与建议 由于个别题目代码量与题目量偏大请大家自己去蓝桥杯官网【连接高校和企业 - 蓝桥云课】去寻找原题在这里只提供部分原题代码
本题目为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 (11)*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 i1;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 classinner styletransition: unset; transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg); background-position: right center; div classscreen styletransition: unset; transform: rotateX(0deg);…/div div classcomputerbody…/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),初始值 感谢观看此篇文章谢谢大家的支持本片文章只是我自己学习的历程有些写的不好地方欢迎大家交流改动。
长路漫漫我们还需努力
