2024年Web前端最新前端进阶之认识与手写compose方法，前端开发学习路线

最后

整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》

• 第一个函数是多元的（接受多个参数），后面的函数都是单元的（接受一个参数）

• 执行顺序的自右向左的

• 所有函数的执行都是同步的

还是用一个例子来说，比如有以下几个函数

let init = (…args) => args.reduce((ele1, ele2) => ele1 + ele2, 0)

let step2 = (val) => val + 2

let step3 = (val) => val + 3

let step4 = (val) => val + 4

这几个函数组成一个任务队列

steps = [step4, step3, step2, init]

使用compose组合这个队列并执行

let composeFunc = compose(…steps)

console.log(composeFunc(1, 2, 3))

执行过程

6 -> 6 + 2 = 8 -> 8 + 3 = 11 -> 11 + 4 = 15

所以流程就是从init自右到左依次执行，下一个任务的参数是上一个任务的返回结果，并且任务都是同步的，这样就能保证任务可以按照有序的方向和有序的时间执行。

compose的实现

---

好了，我们现在已经知道compose是什么东西了，现在就来实现它吧！

最容易理解的实现方式

思路就是使用递归的过程思想，不断的检测队列中是否还有任务，如果有任务就执行，并把执行结果往后传递，这里是一个局部的思维，无法预知任务何时结束。直观上最容易理解。

const compose = function(…funcs) {

let length = funcs.length

let count = length - 1

let result

return function f1 (…arg1) {

result = funcs[count].apply(this, arg1)

if (count <= 0) {

count = length - 1

return result

}

count–

return f1.call(null, result)

}

}

删繁就简来看下，去掉args1参数

const compose = function(…funcs) {

let length = funcs.length

let count = length - 1

let result

return function f1 () {

result = funcscount

if (count <= 0) {

count = length - 1

return result

}

count–

return f1(result)

}

}

这就好看很多，我们假设有三个方法，aa，bb，cc

function aa() {

console.log(11);

}

function bb() {

console.log(22);

}

function cc() {

console.log(33);

return 33

}

然后传入compose

compose(aa,bb,cc)

此时count = 2，则下面其实是执行cc

result = funcscount

然后count–。再递归执行f1，则下面其实就是执行bb

result = funcscount

这样，就实现了 从funcs数组里从右往左依次拿方法出来调用，再把返回值传递给下一个。

后面的步骤同理。

这其实是一种面向过程的思想

手写javascript中reduce方法

为什么要手写？其实你要是能够很熟练的使用reduce，我觉得不必手写reduce，只是我觉得熟悉一下reduce内部的实现可以更好地理解后面的内容，况且 也不会太难呀！

function reduce(arr, cb, initialValue){

var num = initValue == undefined? num = arr[0]: initValue;

var i = initValue == undefined? 1: 0

for (i; i< arr.length; i++){

num = cb(num,arr[i],i)

}’

return num

}

如代码所示，就是先判断有没有传入初始值，有的话，下面的循环直接 从i = 0开始，否则i=1开始。

如果没有传入初始值，num就取 数组的第一个元素。这也是说明了为什么传入初始值，i就=1，因为第一个都被取出来了，就不能再取一次啦啦啦！

下面使用我们写的reduce方法

function fn(result, currentValue, index){

return result + currentValue

}

var arr = [2,3,4,5]

var b = reduce(arr, fn,10)

var c = reduce(arr, fn)

console.log(b)   // 24

好了 ，没毛病，既然我们了解了reduce原理，就看看下面的redux中compose的实现吧

redux中compose的实现

function compose(…funcs) {

if (funcs.length === 0) {

return arg => arg

}

if (funcs.length === 1) {

return funcs[0]

}

debugger

return funcs.reduce((a, b) => (…args) => a(b(…args)))

}

ES6

• 列举常用的ES6特性：

• 箭头函数需要注意哪些地方？

• let、const、var

• 拓展：var方式定义的变量有什么样的bug？

• Set数据结构

• 拓展：数组去重的方法

• 箭头函数this的指向。

• 手写ES6 class继承。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

微信小程序

• 简单描述一下微信小程序的相关文件类型?

• 你是怎么封装微信小程序的数据请求？

• 有哪些参数传值的方法？

• 你使用过哪些方法，来提高微信小程序的应用速度？

• 小程序和原生App哪个好？

• 简述微信小程序原理？

• 分析微信小程序的优劣势

• 怎么解决小程序的异步请求问题？

其他知识点面试

• webpack的原理

• webpack的loader和plugin的区别？

• 怎么使用webpack对项目进行优化?

• 防抖、节流

• 浏览器的缓存机制

• 描述一下二叉树, 并说明二叉树的几种遍历方式?

• 项目类问题

• 笔试编程题：

最后

技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。

其他知识点面试

• webpack的原理

• webpack的loader和plugin的区别？

• 怎么使用webpack对项目进行优化?

• 防抖、节流

• 浏览器的缓存机制

• 描述一下二叉树, 并说明二叉树的几种遍历方式?

• 项目类问题

• 笔试编程题：

最后

技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。