记录第一次前端实习面试经历简单介绍一下自己的情况，从大一暑假开始学习前端，目前大二下为止大概学习了将近一年的前端知识，主

前言

简单介绍一下自己的情况，从大一暑假开始学习前端，目前大二下为止大概学习了将近一年的前端知识，主要技术栈是Vue（react基本不会），微信小程序（原生+uniapp），以及node后端（nestjs）。

在期末在各大招聘网站上投了将近100个前端实习岗位后，终于也是获得了来之不易的面试机会，下面浅浅记录一下面试时的感受以及相关的题目

感受

也不知道是从受了谁的影响，导致我觉得面试官都很严厉，想着法子去为难你，所以在去面试的路上真的非常非常紧张。

但是事实告诉我面试官并不会吃人。第一个面试官就是公司的老板，和他交谈的过程非常融洽。之后便是技术面，老板找来一个前端来作面试。技术面的面试官年龄也不大，我们交谈起来也是保持着轻松愉快的氛围。问的问题都是比较新的，比如最新的原生css支持嵌套、has()伪类选择器的作用。

最后技术面结束以后老板告诉我，公司自研以及外包都有做。自研主要做的是saas的低代码平台，外包目前做的是uniapp的电商平台。公司的项目对于我来说可能有一些困难，加上距离较远、上班时长、公司氛围的缘故希望我深思熟虑后再决定是否来实习。

面试题

只列举了一些记得起来的问题，可能不是很多，想起来了再补充

1、CSS选择器的优先级有哪些？

我的回答

从高到低依次为：

！important、内联样式、id选择器、class选择器、标签选择器。

参考答案

从高到低依次为：

在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
作为style属性写在元素内的样式
id选择器
类选择器
标签选择器
通配符选择器
浏览器自定义或继承

2、有使用过sass、less吗？他们和常规的css有什么区别

我的回答

有使用过，sass、less作为css的预处理框架，加入了变量定义、嵌套等等的新写法，例如在封装一个具有不同样式的组件时，可以通过定义变量数组，循环出不同的组件样式代码，增加代码的复用性。（这里忘记了混入mixin的概念）

参考答案

重用性: 样式属性值定义为变量 / 嵌套 / 继承
兼容性: 支持大部分CSS
维护性: 更加容易后期的修改，使代码更有易读

新增以下功能：嵌套，变量，mixin/继承，运算和模块化等

3、可以说说CSS盒模型吗，块级元素、行内元素有什么区别？

我的回答

在css中，任何元素都可以看成是一个盒子，由四部分组成的：内容（content）、内边框（padding）、边框（border）和外边框（margin）。块元素独占一行，可以直接设置他的marin以及padding，行内元素则不行。

参考答案

参考MDN官方文档：developer.mozilla.org/zh-CN/docs/…

4、CSS如何实现固定宽高比

我的回答

没有回答

参考答案

如果是可替换元素<img>或<video>，可以将width/height其一设定尺寸，另一个设为auto，则可替换元素会根据其固有尺寸进行变化。
使用aspect-ratio属性指定元素宽高比

5、你了解css的flex布局和grid布局吗

我的回答

flex布局常用的场景包括元素的居中，使用justify-content和align-items为center可以将flex内部单个元素居中，同时主轴侧轴也可以设置多元素的排列方式。另外flex-wrap可以实现弹性盒内部的多种换行形式。grid布局由于兼容性较差，暂时不怎么了解。

参考答案

MDN文档： developer.mozilla.org/zh-CN/docs/… developer.mozilla.org/zh-CN/docs/…

6、js中想要实现汉字的拼音排序应该怎么做？

我的回答

（尬住了.....）可能是自己写一个sort函数去作比较

参考答案

使用 localeCompare 实现，参考代码如下：

var array = ['武汉', '北京', '上海', '天津'];
var resultArray = array.sort(
    function compareFunction(param1, param2) {
        return param1.localeCompare(param2,"zh");
    }
);
console.log(resultArray);

7、Vue实现跨多组件传参有什么解决方案？

我的回答

使用vuex
使用$bus实现数据总线

参考答案

Vue2中使用vuex、$bus可以实现跨组件传参
Vue3中使用

8、你了解过Web Component吗？

我的回答

在Vue中应该是使用了Web Component实现自定义标签，它作为前端组件化的基础吧，没有更深一步的了解了。

参考答案

Vue 与 Web Components： cn.vuejs.org/guide/extra…

MDN官方文档: developer.mozilla.org/zh-CN/docs/…

9、讲一下冒泡排序的原理

我的回答

从第一个元素开始，循环遍历数组依次与后面的元素作比较，直到遍历到最后一个元素。

参考答案

首先我们肯定有一个数组，里面存放着待排序的元素列表，我们如果需要把比较大的元素排在前面，把小的元素排在后面，那么需要从尾到头开始下面的比较操作：

从尾部开始比较相邻的两个元素，如果尾部的元素比前面的大，就交换两个元素的位置。
往前对每个相邻的元素都做这样的比较、交换操作，这样到数组头部时，第 1 个元素会成为最大的元素。
重新从尾部开始第 1、2 步的操作，除了在这之前头部已经排好的元素。
继续对越来越少的数据进行比较、交换操作，直到没有可比较的数据为止，排序完成。

10、操作系统的大作业选题是什么

我的回答

单CPU进程调度算法

11、vue中v-for的key有什么作用？

我的回答

key作为v-for中每一个元素的关键字，在遍历一个列表时可以指定key为index，作为数组下标进行遍历，也可以使用自定义的唯一key值作为每个元素的关键字。

**参考答案

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有唯一 id。

12、vue中v-for与v-if的区别？

我的回答

v-if是直接不渲染该标签，v-show是对该标签进行注释以实现隐藏的目的

参考答案

控制手段不同
编译过程不同
编译条件不同

控制手段：v-show隐藏则是为该元素添加css--display:none，dom元素依旧还在。v-if显示隐藏是将dom元素整个添加或删除

编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换

编译条件：v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染

v-show 由false变为true的时候不会触发组件的生命周期
v-if由false变为true的时候，触发组件的beforeCreate、create、beforeMount、mounted钩子，由true变为false的时候触发组件的beforeDestory、destoryed方法

性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；

13、讲讲防抖与节流

我的回答

防抖是当短时间内连续触发多次事件时，只调用该事件最后一次触发时的回调函数；节流是当短时间内连续触发多次事件时，执行一定时间内的最后一次事件回调函数

参考答案 防抖，就是指触发事件后 n 秒后才执行函数，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。

14、讲讲你项目中遇到的难点

我的回答

在识别小程序中，由于算法模型对图片分辨率有比较高的要求，使用原生微信小程序的拍照API会对画质进行压缩，因此我采用将h5页面嵌入到原生小程序wxml中的做法，调用原生拍照API来实现原画质拍照。

15、除了项目中的axios，还有那些发送ajax请求的方式？

我的回答

axios是对原生xhr的封装，除此以外还有fetch请求也可以发送ajax请求。

参考答案

发送ajax主要有以下几种方式

原生XMLHttpRequest
Fetch
jQuery
Axios

结语

我最后的决定是放弃了这次机会，虽说机会难得，当我真正面临选择的时候又是十分困难的。毕竟这是我参加参加工作前的最后一次暑假了（自己也想偷偷懒不那么累hhh），学校工作室那边也仍然还有任务，我自己也有准备开始学习产品相关知识，尝试下与人和业务打交道的工作，未来具体从事怎么样的岗位也是未知的。

我始终相信意义存在于生命的每一个角落，或许某件事情在你看来是无用的，正如这次面试没有取到成果，但是他确确实实让我重新思考了自己。

今后依然好好吃饭、好好睡觉、好好生活！