小孙前端面试经历

2023-04-24 神州智慧（软通外包）

形式：

腾讯会议视频面试
两个面试官

问题：

1.先做一下自我介绍吧
2.天津人为什么来北京工作？
3.项目是怎么部署的？
4.首页展示日历是怎么做的？
5.比如说日历里面要显示节假日，怎么做？
6.css怎么画三角形？
7.列表如何返回上一页呢？
8.token是什么？作用是什么？
9.对象数组的去重怎么实现？
10.报表组件怎么封装的？暴露了哪些接口？
11.配合项目经理预估工时，工时单位是什么？以什么标准估？
12.一套增删改查功能，大概多久?
13.echarts图表是怎么封装的？给页面暴露了哪些参数？

答案：

3.项目是怎么部署的？
初始化npm : npm init -y
下载安装webpack工具：npm i webpack webpack-cli -D
开始打包：npx webpack

5.elementUI中日历要显示节假日，怎么做？
el-calendar有相应的dateCell 属性，设置一下就可以了

6.css怎么画三角形？
一个宽高都是 0 的盒子的每一条边都加一个很粗很粗的 border
然后我们把不想要的颜色都设定成 transparent

7.列表如何返回上一页呢？
vue中的路由导航this.$router.go(-1);
9.数组的去重怎么做？

for (let i = 0; i < arr.length; i++) {
    for (let j = i + 1; j < arr.length; j++) {
      if (arr[i] === arr[j]) {
	        arr.splice(j, 1);
	        j--;
      }
}

10.报表组件怎么封装的？暴露了哪些接口？

setData(data): 设置LuckySheet数据；
getOption(): 获取LuckySheet选项配置；
setOption(option): 设置LuckySheet选项配置；
resize(): 调整LuckySheet表格大小；
destroy(): 销毁LuckySheet实例；
on(eventName, callback): 监听LuckySheet表格事件。

11.配合项目经理预估工时，工时单位是什么？以什么标准估？
按天估值，以模块估，或者功能估

13.echarts图表是怎么封装的？给页面暴露了哪些参数？

option： Echarts 图表的配置项，包括数据和样式等；
height： 图表组件的高度；
width： 图表组件的宽度；
theme： 图表组件的主题，可以设置不同主题颜色；
loading： 是否显示加载中状态；
dataZoom： 是否开启缩放功能。

总结：

这次是小孙第一次面试，过程有些紧张，感觉面得也不是很好

2023-04-25 上海思锐

形式：

腾讯会议，没开摄像头，一个面试官

问题：

1.筛选查询后，再点击进入详情页，再返回到列表页的时候如何显示之前筛选查询的结果以及保留之前的placeholder

把筛选条件存在VUEX中，然后从详情页面出来的时候去vuex里面查询，把筛选条件拿出来，再调一遍后台接口。

2.px和em有什么区别
px绝对单位
em相对单位
1em = 16px

3.flex布局常用的属性

display: 定义容器为 Flex 布局，取值为 flex 或者 inline-flex。

flex-direction: 定义主轴的方向，取值为 row（默认值，水平方向）、 column（垂直方向）、row-reverse（反转水平方向）或 column-reverse（反转垂直方向）。

justify-content: 定义主轴上的对齐方式，取值为 flex-start（默认值，左对齐）、flex-end（右对齐）、center（居中对齐）、space-between（两端对齐，元素之间留有空隙） 、space-around（每个元素周围留有空隙）、space-evenly（每个元素之间留有相等的空隙）。

align-items: 定义侧轴上的对齐方式，与 justify-content 相对应，取值为 stretch（默认值，元素自动拉伸以适应容器）、flex-start（上对齐）、flex-end（下对齐）、center（居中对齐）、baseline（基线对齐）。

flex-wrap: 定义是否换行，取值为 nowrap（默认值，不换行）、wrap（换行）、wrap-reverse（反向换行）。

align-content: 定义多行元素之间的对齐方式，取值与 justify-content 类似，但是只在有多行元素时生效。

order: 定义元素的排列顺序，数值越小越靠前，默认为 0。

flex-grow: 定义元素的放大比例，用于填充剩余空间，数值越大占用空间越多，默认为 0。

flex-shrink: 定义元素缩小比例，用于填补空间不足的情况，数值越大缩小越多，默认为 1。

flex-basis: 定义元素在主轴上的初始尺寸，默认为 auto，即由元素的内容决定

4. opacity 0 是什么意思
   不透明

5. css如何实现一个自适应的正方形
   vw
   vh

6. 如何清除浮动
   clear: both;
   display:table
   overflow:auto