数据结构与算法
这一块在笔试、面试的代码题中考核较多,其中常考的数据结构主要有:数组、链表、队列、栈、Set、Map、哈希表等,不同数据结构有不同的方法以及储存原理,这些算是技术岗的必备知识。算法部分主要分为两大块,排序算法与一些其他算法题。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
排序算法根据考频高低主要有:快速排序、归并排序、堆排序、冒泡排序、插入排序、选择排序、希尔排序、桶排序、基数排序、Timsort这十种,这类考核点要么是算法的时间、空间复杂度、稳定度,要么是直接手写代码,故在理解算法原理的同时,对JS语言版的排序算法代码也要加强记忆。
- 二叉树层序遍历
- B 树的特性,B 树和 B+树的区别
- 尾递归
- 如何写一个大数阶乘?递归的方法会出现什么问题?
- 把多维数组变成一维数组的方法
- 知道的排序算法 说一下冒泡快排的原理
- Heap 排序方法的原理?复杂度?
- 几种常见的排序算法,手写
- 数组的去重,尽可能写出多个方法
- 如果有一个大的数组,都是整型,怎么找出最大的前 10 个数
- 知道数据结构里面的常见的数据结构
- 找出数组中第 k 大的数组出现多少次,比如数组【1,2, 4,4,3,5】第二大的数字是 4,出现两次,所以返回 2
- 合并两个有序数组
- 给一个数,去一个已经排好序的数组中寻找这个数的位 置(通过快速查找,二分查找)
-
createStore
-
combineReducers
-
bindActionCreators
-
applyMiddleware
-
compose 本篇文章介绍applyMiddleware。
在分析源码applyMiddleware 之前,让我们先看看middleware是个啥。
Redux里我们都知道dispatch一个action,就会到达reducer,而middleware就是允许我们在dispatch action之后,到达reducer之前,搞点事情。
比如:打印,报错,跟异步API通信等等
下面,让我们一步步来理解下middle是如何实现的:
step 1
假设我们有个需求,想打印出dispatch的action之后,nextState的值。
如图:
先用一种很简单的方式去实现
let action = toggleTodo(‘2’);
console.log(‘dispatch’, action);
store.dispatch(action);
console.log(‘next state’, store.getState())
Step 2
包裹进函数里
function dispatchAndLoge (store, action) {
let action = toggleTodo(‘2’);
console.log(‘dispatch’, action);
store.dispatch(action);
console.log(‘next state’, store.getState())
}
现在目前感觉还不错了呢~ 但是我们并不想每次要用的时候都需要import这个函数进来,而是希望在用dispatch的时候,直接自带这个功能,于是想到了,直接复写store里的dispatch.
Step 3
const next = store.dispatch;
store.dispatch = function (action) {
let action = toggleTodo(‘2’);
console.log(‘dispatch’, action);
next(action)
console.log(‘next state’, store.getState())
}
这样下一次我们在用dispatch的时候就自动附带了log的功能,这里的每一个功能,我们都称之为一个middleware,用来增强dispatch的作用。
接下来我们就需要思考,如何可以连接多个middleware,比如一个middle完成打印功能,一个完成报错功能
先把middleware包装成函数写上来
function patchStoreToAddLogging(store) {
let next = store.dispatch
store.dispatch = function dispatchAndLog(action) {
console.log(‘dispatching’, action)
let result = next(action)
console.log(‘next state’, store.getState())
return result
}
}
function patchStoreToAddCrashReporting(store) {
//此时这个dispatch 就是打印log的功能
let next = store.dispatch
store.dispatch = function dispatchAndReportErrors(action) {
try {
// 执行打印log
return next(action)
} catch (err) {
// 执行错误检测
console.error(‘Caught an exception!’, err)
Raven.captureException(err, {
extra: {
action,
state: store.getState()
}
})
throw err
}
}
}
这样我们在用的时候,就可以
// 第一步先将store.dipatch 赋给打印功能
patchStoreToAddLogging(store);
// 第二步先执行第一步的打印功能,在执行自己的功能
patchStoreToAddCrashReporting(store);
这样我们就完成了使用多个middleware。
但是這裏有個不好的地方,就是使用兩個middleware就調用了兩次dispatch
我们应该希望的是很多middleware一层一层的执行,有点像给一个礼物包装上一个又一个的盒子,而这盒子就类似中间件。
这里我们用替代了store.dispatch的方式,其实我们可以直接return store.dispatch,就可以在后面实现一个链式调用。
step 4
function logger(store) {
let next = store.dispatch
return function dispatchAndLog(action) {
console.log(‘dispatching’, action)
let result = next(action)
console.log(‘next state’, store.getState())
return result
}
}
这里需要一个applyMiddleware的方法,可以将这两个middleware连起来。
它主要做一件事:
将上一次返回的函数赋值给store.dispatch
下面是applyMiddleware的雏形,先将参数整理好,然后将每一次middleware返回的函数都赋值给store.dispatch
function applyMiddleware(store, middlewares) {
middlewares = middlewares.slice()
middlewares.reverse()
// Transform dispatch function with each middleware.
middlewares.forEach(middleware =>
// 由于每次middle会直接返回返回函数,然后在这里赋值给store.dispatch,
// 下一个middle在一开始的时候,就可以通过store.dispatch拿到上一个dispatch函数
store.dispatch = middleware(store)
)
}
解释下代码,当我们将[logger1,logger2]作为一个中间件数组传入到applyMiddleware,你猜会发生什么?
在这个middlewares.forEach的循环中,遍历到第一个logger,
store.dispatch = middleware(store)
就相当于
store.dispatch = function Logger1(action) {
console.log(‘Logger1 dispatching’, action)
let result = next(action)
console.log(‘Logger1 next state’, store.getState())
return result
}
注意,这里的next是store之前的dispatch。
也就是说
这个store现在的dispatch方法为
store.dispatch = function Logger1(action) {
console.log(‘Logger1 dispatching’, action)
let result = next(action)
console.log(‘Logger1 next state’, store.getState())
return result
}
然后再遍历到第二个logger
store.dispatch = function Logger2(action) {
console.log(‘Logger2 dispatching’, action)
let result = next(action)
console.log(‘Logger2 next state’, store.getState())
return result
}
注意,到这里的时候,next是等于之前的那个store.dispatch,也就是说这里的next是上面的Logger2
next = function Logger1(action) {
console.log(‘Logger1 dispatching’, action)
let result = next(action)
console.log(‘Logger1 next state’, store.getState())
return result
}
所以现在这个箭头指向的store的dispatch是什么呢?
没错,就是现在这个样子
store.dispatch = function Logger2(action) {
console.log(‘Logger2 dispatching’, action)
let result = function Logger1(action) {
console.log(‘Logger1 dispatching’, action)
let result = next(action)
console.log(‘Logger1 next state’, store.getState())
return result
}
console.log(‘Logger2 next state’, store.getState())
return result
}
看,实际上,现在的store的dispatch是被logger1包装起来,然后再被logger2包装起来。像极了一个礼物呗几个盒子包起来了。
原理实际上就是不断地更新store.dispatch
接下来,我们就可以这样用
applyMiddleware(store, [logger, crashReporter])
刚刚说过,在applyMiddle里必须要给store.dispatch赋值,否则下一个middleware就拿不到最新的dispatch。
但是有别的方式,那就是在middleware里不直接从store.dipatch里读取next函数,而是将next作为一个参数传入,在applyMiddleware里用的时候把这个参数传下去。
step 5
function logger(store) {
return function wrapDispatchToAddLogging(next) {
return function dispatchAndLog(action) {
console.log(‘dispatching’, action)
let result = next(action)
console.log(‘next state’, store.getState())
return result
}
}
}
接着,在applyMiddleware里有可以不用立刻对store.dispatch赋值啦,可以直接赋值给一个变量dispatch,作为middleware的参数传递下去,这样就能链式的增强dispatch的功能啦~
function applyMiddleware(store, middlewares) {
middlewares = middlewares.slice();
middlewares.reverse();
最后
面试一面会问很多基础问题,而这些基础问题基本上在网上搜索,面试题都会很多很多。最好把准备一下常见的面试问题,毕竟面试也相当与一次考试,所以找工作面试的准备千万别偷懒。面试就跟考试一样的,时间长了不复习,现场表现肯定不会太好。表现的不好面试官不可能说,我猜他没发挥好,我录用他吧。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
96道前端面试题:
常用算法面试题:
前端基础面试题:
内容主要包括HTML,CSS,JavaScript,浏览器,性能优化
atch的功能啦~
function applyMiddleware(store, middlewares) {
middlewares = middlewares.slice();
middlewares.reverse();
最后
面试一面会问很多基础问题,而这些基础问题基本上在网上搜索,面试题都会很多很多。最好把准备一下常见的面试问题,毕竟面试也相当与一次考试,所以找工作面试的准备千万别偷懒。面试就跟考试一样的,时间长了不复习,现场表现肯定不会太好。表现的不好面试官不可能说,我猜他没发挥好,我录用他吧。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
96道前端面试题:
- [外链图片转存中…(img-Ev33hYin-1715428917708)]
常用算法面试题:
- [外链图片转存中…(img-pe42N8pF-1715428917709)]
前端基础面试题:
内容主要包括HTML,CSS,JavaScript,浏览器,性能优化
- [外链图片转存中…(img-Y18XyOiV-1715428917709)]