数据结构与算法
这一块在笔试、面试的代码题中考核较多，其中常考的数据结构主要有：数组、链表、队列、栈、Set、Map、哈希表等，不同数据结构有不同的方法以及储存原理，这些算是技术岗的必备知识。算法部分主要分为两大块，排序算法与一些其他算法题。
排序算法根据考频高低主要有：快速排序、归并排序、堆排序、冒泡排序、插入排序、选择排序、希尔排序、桶排序、基数排序、Timsort这十种，这类考核点要么是算法的时间、空间复杂度、稳定度，要么是直接手写代码，故在理解算法原理的同时，对JS语言版的排序算法代码也要加强记忆。
- 二叉树层序遍历
- B 树的特性，B 树和 B+树的区别
- 尾递归
- 如何写一个大数阶乘？递归的方法会出现什么问题？
- 把多维数组变成一维数组的方法
- 知道的排序算法 说一下冒泡快排的原理
- Heap 排序方法的原理？复杂度？
- 几种常见的排序算法，手写
- 数组的去重，尽可能写出多个方法
- 如果有一个大的数组，都是整型，怎么找出最大的前 10 个数
- 知道数据结构里面的常见的数据结构
- 找出数组中第 k 大的数组出现多少次，比如数组【1，2， 4，4，3，5】第二大的数字是 4，出现两次，所以返回 2
- 合并两个有序数组
- 给一个数，去一个已经排好序的数组中寻找这个数的位 置（通过快速查找，二分查找）
本次页面核心知识点：（1）【search表单模块】搜索search、重置功能reset、日期选择器DatePicker、下拉框使用select；（2）【列表展示模块】时间规范化moment、tag标签的使用、省略款的Tooltip使用；
目录
1. 看页面需求
分析：页面分为两个核心部分：【搜索栏】【列表】
2. 分析接口文档
（1）留言列表接口-主要是在页面初始化时调用。pageNum pageSize为请求参数，非必须。响应参数在list中。
（2）搜索接口 - 但搜索接口一般可以直接使用列表接口即可
- 参照UI编写页面代码
（1） 列表部分
使用封装的组件（代码后附），data={listData}表示列表中绑定listData数据，注意dataIndex需要对照接口返回的参数编写
function Feedback({
dispatch,
feedback: { listData, detailData },
loading
}: any) {
const init = useCallback(() => {
dispatch('feedback/init')
}, [dispatch])
useEffect(() => {
init()
}, [init])
const columns = useMemo(
() => [
{
title: '序号',
dataIndex: '_id'
},
{
title: '用户名',
dataIndex: 'username'
},
{
title: '反馈标题',
dataIndex: 'title'
},
{
title: '反馈内容',
dataIndex: 'content',
},
{
title: '提交时间',
dataIndex: 'createdTime',
},
{
title: '状态',
dataIndex: 'status',
},
{
title: '操作',
render: (value: any) => (
<>
{value.status === 0 && (
<a type="primary" onClick={() => toggleMessage(value.id)}>
反馈留言
)}
{value.status === 1 && (
<a type="primary" onClick={() => toggleDetail(value.id)}>
查看
)}
</>
)
}
],
[toggleDetail, toggleMessage]
)
return (
<PageHeaderLayout className={'commonList'}>
<Card
className={styles.table}
style={{ marginTop: 1 }}
bordered={false}
bodyStyle={{ padding: '8px 32px 32px 32px' }}
<StandardTable
loading={loading}
data={listData}
columns={columns}
onChange={handleStandardTableChange}
/>
)
}
（2）search查询栏部分
const Search: any = Form.create()(function({ form, init, dispatch }: any) {
const { validateFields } = form
const simpleForm = useMemo(() => {
const { getFieldDecorator, getFieldValue } = form
const { query } = getLocation()
return (
layout="inline"
style={{ display: 'flex' }}
className={styles.commonForm}
<Form.Item label="">
{getFieldDecorator('username', {
initialValue: query.username
})()}
</Form.Item>
<Form.Item label="">
{getFieldDecorator('title', {
initialValue: query.title
})()}
</Form.Item>
<Form.Item label="">
{getFieldDecorator('submitTimeBegin', {
initialValue: query.startDate || ''
})(
<DatePicker
onChange={change1}
disabledDate={disabledDate1}
placeholder="请选择日期"
/>
)}
</Form.Item>
<Form.Item label="">
{getFieldDecorator('submitTimeEnd', {
initialValue: query.startDate || ''
})(
<DatePicker
onChange={change2}
disabledDate={disabledDate2}
placeholder="请选择日期"
/>
)}
</Form.Item>
<Form.Item>
{getFieldDecorator('status', {
initialValue: query.status || ''
})(
状态 {feedbackStatus.map((v: any) => ( {v.value} ))})}
</Form.Item>
查询
<Button
className={styles.reset}
style={{ marginLeft: 10 }}
onClick={handleFormReset}
icon="undo"
重置
)
}, [form, handleFormReset, handleSearch, time1, time2])
return (
)
})
可以看到，在页面将search设置成组件，并在后面掉哦组件。至此已达到页面效果，但是还没有数据
4.初始化页面 - 列表数据显示
在page页面的主函数中写init函数
const init = useCallback(() => {
dispatch('feedback/init')
}, [dispatch])
useEffect(() => {
init()
}, [init])
在model页面中写详细的接口调用信息
init: async (action, { dispatch }) => {
const { query } = getLocation()
const data = await dispatch({
type: 'feedback/post',
params: ['manage/feedback/page', { ...query }]
})
dispatch({
type: 'feedback/setStore',
params: [{ listData: listMOM1(data) }]
})
},
其中我们使用到了ListMOM1组件来帮助页面数据回显，其主要功能是，添加页面的数据编号和实现分页功能，详细的封装代码后附。
其中type: 'feedback/setStore',表示把数据存储在缓存中，可以通过组件传递数据，因此在StandardTable中需要绑定data={listData}，从而实现数据初始化显示。
// list数据处理中间件
export const listMOM1 = (resData: any) => {
const {
content,
// total,
totalCount,
currPage: currPage = 1,
pageSize: pageSize = 40,
data,
list
} = resData
const list1 = content || data || list
//添加序号
if (list) {
list.forEach((element: any, index: number) => {
element._id = index + 1 + (currPage - 1) * pageSize
element._symbol = element._id
})
}
//分页
const pagination = {
total: totalCount,
pageSize: Number(pageSize) || 40,
current: Number(currPage)
}
return {
list,
pagination: totalCount && { ...listData.pagination, ...pagination }
}
}
5.列表数据按需渲染render
可以看到后台返回的数据如下，
但是，（1）【标题和内容】数据过长，我们需要将其展示前5个字符后省略号（比如这样就。。。）.（2）对于【日期】数据只需要显示到具体某天，不需要时分秒，（3）对于【状态】数据显示为0，1但是前端也需要整理为‘未回答’‘已回答’
（1）数据截取缩略显示，hover后显示全部---使用Tooltip组件
{
title: '反馈内容',
dataIndex: 'content',
render: (text: any, record: any, index: any) => {
if (record.content.length <= 5) {
return record.content
} else {
return (
{record.content.substring(0, 5) + '...'}
)
}
}
},
（2）日期截取同理
最后
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等
前端视频资料：
