title: 2021金三银四面试总结
date: 2021-02-28 15:27:24
tags:

  • 面试
    categories: 学习
    copyright: false
    top_img: /img/bg1.png

自开年准备面试找工作到现在，陆陆续续也面试了很多公司，再此做一个面经总结。

本篇文章包括面试中遇到的面试题和本人复习时的认为比较重要的部分。

css相关面试点

flex布局介绍？

flex：1具体代表什么意思？

如果让你用flex实现一个左边固定200px，右边自适应你该如何实现?还有别的方式吗?

第一种:左边利用float固定宽度，然后脱离文档流了之后，右边的就直接margin-left左边的宽度.

  1. .left{
  2.     float:left;
  3.     width:600px;
  4.     height:200px;
  5.     background:red;
  6. }
  7. .right{
  8.     margin-left:600px;
  9.     height:200px;
  10.     background:gold;
  11. }
  12. <div class="left">这里有东西</div>      /*这个浮动的只能放上面*/
  13. <div class="right">这里自适应</div>

第二种:定位

  1. .wrap{
  2.     position:relative;
  3.     left:0;
  4.     top:0;
  5. }
  6. .cont{
  7.     margin-left:600px;
  8.     height:300px;
  9.     background:greenyellow;
  10. }
  11. .sid{
  12.     position:absolute;
  13.     left:0;
  14.     top:0;
  15.     width:600px;
  16.     height:300px;
  17.     background:darkgoldenrod;
  18. }
  1. <div class="three">
  2.     <div class="cont">自适应</div>
  3.     <div class="sid">这里有东西</div>
  4. </div>

第三种: flex

  1. .parent{
  2.     display:flex;
  3. }
  4. .side{
  5.     width:600px;
  6.     height:300px;
  7.     background:blue;
  8. }
  9. .main{
  10.     flex:1; //或者flex-grow:1
  11.     height:300px;
  12.     background:yellow;
  13. }
  1. <div class="parent">
  2.     <div class="side">边边</div>
  3.     <div class="main">自适应</div>
  4. </div>

第四种:BFC

  1. .bian{
  2.     width:600px;
  3.     height:400px;
  4.     float:left;
  5.     background:aqua;
  6. }
  7. .text{
  8.     overflow:hidden; /*利用BFC不与浮动元素重叠的特性 */
  9.     height:400px;
  10.     background:blanchedalmond;
  11. }
  1. <div class="bian">边边</div>
  2. <div class="text">自适应</div>

如果想给span元素添加宽高，该怎么做？还有其他方式嘛？

不确定宽高div设置垂直水平居中？

:nth-child和:nth-of-type的区别?

标准盒模型和怪异盒模型的区别?

如果想实现动态换肤功能，应该如何做到？

less有了解过吗，都使用过其中的哪些？

屏幕适配~~移动端适配你是如何做的?

javascript面试点

var,let,const的区别？

promise的概念特点以及相关用法？

事件循环机制

change,input,blur三者区别（change和input是怎么实现的）

blur与change事件在绝大部分的情况下表现都非常相似，输入结束后，离开输入框，会先后触发change与blur，唯有两点例外。

1、没有进行任何输入时，不会触发change

在这种情况下失焦后，输入框并不会触发change事件，但一定会触发blur事件。在判断表单的修改状态时，这种差异会非常有用，通过change事件能轻易地找到哪些字段发生了变更以及其值的变更轨迹。

2、输入后值并没有发生变更

这种情况是指，在没有失焦的情况下，在输入框内进行的删除与输入操作，但最终的值与原值一样，这种情况下失焦后，keydown、input、keyup、blur都会触发，但change依旧不会触发。

去重方式有哪些？

Array.from(new Set(arr))有哪些坑？

向 Set 加入值的时候，不会发生类型转换，所以5和"5"是两个不同的值。Set 内部判断两个值是否不同，使用的算法叫做“Same-value-zero equality”，它类似于精确相等运算符（===），主要的区别是向 Set 加入值时认为NaN等于自身，而精确相等运算符认为NaN不等于自身。

所以Set是无法去重对象字符串等引用类型。

浅拷贝，深拷贝区别？(实现方式)

数组常用方法的介绍和用法，map，every，some等

实现数组的交集和并集？

  1. let a = new Set([1, 2, 3]);
  2. let b = new Set([4, 3, 2]);
  4. // 并集
  5. let union = new Set([...a, ...b]);
  6. // Set {1, 2, 3, 4}
  8. // 交集
  9. let intersect = new Set([...a].filter(x => b.has(x)));
  10. // set {2, 3}
  12. // （a 相对于 b 的）差集
  13. let difference = new Set([...a].filter(x => !b.has(x)));
  14. // Set {1}

如果有两个变量，在没有第三个变量的情况下，如何相互赋值?

es5,es6用过哪些方法?

class有了解过吗?

vue框架相关面试点

style-scoped 作用以及实现原理?

何为scoped？

在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped，相当于实现了样式的模块化。

scoped的实现原理

vue中的scoped属性的效果主要通过PostCSS转译实现，如下是转译前的vue代码：

  1. <style scoped>
  2. .example {
  3.  color: red;
  4. }
  5. </style>
  6. <template>
  7.  <div class="example">hi</div>
  8. </template>

转义后：

  1. <style>
  2. .example[data-v-5558831a] {
  3.  color: red;
  4. }
  5. </style>
  6. <template>
  7.  <div class="example" data-v-5558831a>hi</div>
  8. </template>

即：PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性，然后，给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom，这种做法使得样式只作用于含有该属性的dom——组件内部dom。

那如果要在scope中修改全局样式要如何定义？

虚拟dom有什么作用，如何实现?

template是如何渲染的?

v-model实际上是做了哪些事情?

v-for的时候为什么要加上key,有什么作用?

vue中的通信方式都有哪些?

在父组件中如果要获取子组件中的dom结构该如何定义?

v-if和v-show的区别 ?

用过路由守卫吗?

vuex中有哪些辅助函数？

你说你用过vue3，请简单阐述下vue3在vue2的基础上做了哪些优化？

响应式原理？

vuex实现原理？

非技术问题

你为什么从上家公司离职？

你认为你有什么缺点？

你期望薪资是多少？

你能说说你的职业规划的什么嘛？

你还有什么想问的嘛？

自我介绍(最烦这个环节)????

个人面试总结