前端面试题

盒子模型

https://www.bilibili.com/video/BV1sf4y1E7qN?p=2&vd_source=bb1c7fd921cf837ec97726bd611c96e1

css画三角形

https://www.bilibili.com/video/BV1sf4y1E7qN?p=7&vd_source=bb1c7fd921cf837ec97726bd611c96e1

bfc（重点！）

https://www.bilibili.com/video/BV1sf4y1E7qN?p=10&vd_source=bb1c7fd921cf837ec97726bd611c96e1

清除浮动

https://www.bilibili.com/video/BV1sf4y1E7qN?p=11&vd_source=bb1c7fd921cf837ec97726bd611c96e1

重绘和回流

https://www.bilibili.com/video/BV1rV411n72v?p=300&vd_source=bb1c7fd921cf837ec97726bd611c96e1

css隐藏一个元素的方法

css3有哪些新特性？

css的预编译器用过哪些，有什么特点？

定义变量、使用嵌套、运算

三栏布局的五种方式

https://www.bilibili.com/video/BV1G64y1y764?p=4&vd_source=bb1c7fd921cf837ec97726bd611c96e1

typeof的用法

https://www.bilibili.com/video/BV1rV411n72v?p=23&vd_source=bb1c7fd921cf837ec97726bd611c96e1

**instanceof **

https://www.bilibili.com/video/BV1Y84y1L7Nn?p=183&vd_source=bb1c7fd921cf837ec97726bd611c96e1

null和undefined的区别？

https://www.bilibili.com/video/BV12G411p7BQ/?spm_id_from=333.337.search-card.all.click&vd_source=bb1c7fd921cf837ec97726bd611c96e1

数组有哪些方法？

如何给一个对象转换成字符串？

我们可以用JSON.stringfy

如果给数组转换成一个字符串?

我们可以用arr.toString()

我们可以用数组方法arr.join(),而且这两个方法可以把多维数组转换为字符串，但是缺点是

缺点就是如果元素是对象的话，会出现[object,Object]

js如何合并两个数组？合并两个对象呢？
合并数组:1 for循环 2concat 3 push.apply 4 es6

合并对象

webapi（事件监听，事件流，事件冒泡，阻止冒泡，事件委托，dom的增删查）

https://www.bilibili.com/video/BV1Y84y1L7Nn?p=77&vd_source=bb1c7fd921cf837ec97726bd611c96e1

什么事件监听？

让程序检测是否有事件产生，一旦有事件触发，就立即调一个函数做出响应

 什么是事件流？

https://www.bilibili.com/video/BV1m7411L7YW/?spm_id_from=333.337.search-card.all.click&vd_source=bb1c7fd921cf837ec97726bd611c96e1

事件流 分为捕获阶段和冒泡阶段.
捕获阶段：当我点击一个元素，事件不会立即触发，而是从顶部document一层一层向目标元素流动，我们把这个阶段叫做捕获。

冒泡阶段：当事件触发后，事件会以冒泡的形式一层层向上传播，我们把这个过程叫做冒泡

我们绑定事件可以利用addEventListenrt,第三个参数默认是false，表示事件在冒泡阶段触发，true表示在捕获阶段触发

什么叫事件委托？

我们可以利用事件冒泡来事件委托,如果我想给多个子元素绑定相同的事件，我不需要每一个都绑定，直接在父元素上绑定事件，然后子元素通过冒泡去触发父元素的事件

事件循环

https://www.bilibili.com/video/BV1Y84y1L7Nn?p=127&vd_source=bb1c7fd921cf837ec97726bd611c96e1

闭包

https://www.bilibili.com/video/BV1Y84y1L7Nn?p=154&vd_source=bb1c7fd921cf837ec97726bd611c96e1

es6

https://www.bilibili.com/video/BV1tb4y1D7pR?p=92&vd_source=bb1c7fd921cf837ec97726bd611c96e1

数组解构：

let [a,b,c] = [1,2,3]

对象解构：{a,b,c} = {}

剩余参数 ...args

扩展运算符(用来给数组或者对象转为用逗号分割的参数列表，可以用来进行合并数组，伪数组变成数组，合并对象)

  let arr = [1,2,3]        console.log(...arr)

arr.push(...[4,5,6])    {name:'zhangsan',...{age:18}}               .

原型对象

https://www.bilibili.com/video/BV1Y84y1L7Nn?p=178&vd_source=bb1c7fd921cf837ec97726bd611c96e1

递归（老师讲的不太行，但是案例不错）

https://www.bilibili.com/video/BV1oG411T7bh/?spm_id_from=333.337.top_right_bar_window_history.content.click&vd_source=bb1c7fd921cf837ec97726bd611c96e1

有一个小孩正在爬楼梯，每次只能走1个台阶或者2个台阶，问你如果要爬到第n个台阶，有几种方式？
1    1
2.   (1+1,2)
3.   (1+1+1,1+2,2+1) 3
n   

深拷贝

https://www.bilibili.com/video/BV1Y84y1L7Nn?p=189&vd_source=bb1c7fd921cf837ec97726bd611c96e1

防抖节流底层实现

https://www.bilibili.com/video/BV1Y84y1L7Nn?p=196&vd_source=bb1c7fd921cf837ec97726bd611c96e1

什么是图片懒加载？

简单版：

https://www.bilibili.com/video/BV1jq4y117Qz/?spm_id_from=333.337.search-card.all.click&vd_source=bb1c7fd921cf837ec97726bd611c96e1

复杂版：

https://www.bilibili.com/video/BV1gX4y187pL/?spm_id_from=333.337.search-card.all.click&vd_source=bb1c7fd921cf837ec97726bd611c96e1

** 浏览器输入一个url按enter到底发生了什么（u rl地址解析，dns解析和预获取，tcp三次握手四次挥手，dom回流重绘）**

call，bind，apply的区别

https://www.bilibili.com/video/BV1Y84y1L7Nn?p=193&vd_source=bb1c7fd921cf837ec97726bd611c96e1

http请求方式的区别

https://www.bilibili.com/video/BV1rV411n72v?p=306&vd_source=bb1c7fd921cf837ec97726bd611c96e1

** ajax**

https://www.bilibili.com/video/BV1rV411n72v?p=305&vd_source=bb1c7fd921cf837ec97726bd611c96e1

跨域 

https://www.bilibili.com/video/BV1eX4y1C7Xn/?spm_id_from=333.337.search-card.all.click&vd_source=bb1c7fd921cf837ec97726bd611c96e1

promise

https://www.bilibili.com/video/BV1454y1R7vj?p=1&vd_source=bb1c7fd921cf837ec97726bd611c96e1

简单版promise的原理

https://www.bilibili.com/video/BV1GA411x7z1?p=25&vd_source=bb1c7fd921cf837ec97726bd611c96e1

0.1+0.2为什么等于0.3

https://www.bilibili.com/video/BV1Ji4y1t7DY/?spm_id_from=333.337.search-card.all.click&vd_source=bb1c7fd921cf837ec97726bd611c96e1

localstorage sessionstorage cookie

https://www.bilibili.com/video/BV1SL4y1i7ZL/?spm_id_from=333.337.search-card.all.click&vd_source=bb1c7fd921cf837ec97726bd611c96e1

vue八股文

https://www.bilibili.com/video/BV1TN411P7JC?p=2&vd_source=bb1c7fd921cf837ec97726bd611c96e1

谈谈你对生命周期的理解

1为什么要用到生命周期钩子函数：

比如我一个组件，进去就需要开启一个定时器，或者需要在调接口请求数据，可以利用到生命周期钩子函数。生命周期钩子函数会在一个关键性的时刻进行调用，vue会自动帮我们调用。而且生命周期钩子函数里面的this，vue已经帮我们维护好了，就是组件的实例。

beforecreate:无法访问data里面的数据和methods方法

created：可以放访问data里面的数据和methods方法，而且vue已经实现了对data里面数据的响应式拦截

vue开始解析模版，生成虚拟dom

beforemounted：这个时候页面呈现的是未经vue编译过的dom结构

vue把虚拟dom转换为真实的dom插入页面

mounted：这个时候页面中的dom是vue经过编译以后的dom结构，至此，我们可以去开启定时器，ajax请求，绑定自定义事件，至此，vue的整个初始化的过程就完成了。

当我们修改data里面数据的时候，会触发两个钩子函数beforeupdated和updated

beforeupdated：  数据是新的，但是页面是旧的。

会 根据新的数据生成新的虚拟dom，然后去跟旧的虚拟dom进行对比，更新dom

updated：数据是新的，页面也是新的，页面和数据保持同步

beforedestroyed：

destroyed：

谈谈你对mvvm的理解：

https://www.bilibili.com/video/BV1iw411d7h6?p=10&vd_source=bb1c7fd921cf837ec97726bd611c96e1

m的意思是model，模型的意思，对应的是data里面的数据

v的意识view，视图的意思，对应的就是我们的页面

vm，viewmodel对应的就是我们的vue实例

mvvm就是当我data里面的数据改变，页面会随之改变。当我修改页面里面的数据，data里面的数据也会被改变

vue的响应式原理
let vm = {data:{name:'张三',age:15,hobby:[1,2,3]} }

function Observe(data){

    for(let key in data) {

        if(Array.isArray(data[key])){

            console.log(data[key],'我进来啦')

            observeArray(data[key])

        }else{

            defineReactive(key,data,data[key])

        }

    }

}

function defineReactive(key,data,value){

      Object.defineProperty(data,key,{

            get(){

              return value

          },

          set(val){

              console.log(key+'的值改变了,我要去渲染页面了')

              value = val

          }

      })

}

function observeArray(arr){

    arr.__proto__ ={

        push(...args){

          Array.prototype.push.call(arr,...args) 

          console.log('数组变化啦，我去渲染试图啦') 

        },

        pop(){

        },

        shift(){

        },

        unshift(){

        },

        sort(){

        }

    }

}

Observe(vm.data)

首先要搞清楚defineProperty的用法

利用Observe方法返回一个实例，对data里面的数据进行劫持, 把这个实例挂载到vm对象上的_data上。当我修改observe实例的属性的时候，会触发set方法，修改data里面的数据的同时，去进行页面的重新渲染

检测数组变化：

当面试官问我vue如何检测数组的变化，我首先回答，在vue2里面，我们直接通过下标来修改数组里面的元素，页面是不会变化的，如果想让页面变化，我们需要使用push,pop,unshift,shift,splice,sort,reverse.

那是因为，vue重写了数组的方法，

vue路由传参

query传参通过url地址问号后面拼接传参，参数用query传和地址用path或name传

params传餐需要在配置路由的时候提前设置好占位符，地址用path或name传和参数用params传（用to的对象形式跳转，地址必须用name）

v-if和v-show的区别
v-if隐藏元素，页面会直接移除这个dom元素；v-show隐藏元素，页面会利用样式display:none去隐藏这个元素，不会暴力的去动我们的dom树

如果我们需要频繁的切换一个元素的显示与隐藏，那么我们建议用v-show，因为v-show的话，这个节点是存在的，性能较高。

谈谈你对keep-alive的理解:

keep-alive是vue自带的一个组件，可以用来对别的组件进行缓存，被缓存的组件会多出两个钩子函数，一个叫activated,一个叫deactivated。
keep-alive应用场景：从列表页面，进入详情页，返回列表页再次进入同一个详情页，我不想再去调用接口请求数据，我可以利用keep-alive把页面缓存起来。如果进入不同的详情页，我可以在钩子函数activated里面根据id进行判断，如果id和上一次不相同，我就再次调接口请求。

v-for中key的作用与原理（先给学生演示一下，然后视频从第十分钟开始放）

https://www.bilibili.com/video/BV1iw411d7h6?p=30&vd_source=bb1c7fd921cf837ec97726bd611c96e1

vue2中的diff算法？

 diff算法主要是对父元素里面的所有子元素的新旧虚拟dom进行一个比对。四个指针，
oldstart,oldend,newstart,newend

https://www.bilibili.com/video/BV14i4y1g7iQ/?spm_id_from=333.337.search-card.all.click&vd_source=bb1c7fd921cf837ec97726bd611c96e1

vue3中生命周期钩子有哪些？

vue3和vue2有什么区别？

vue2是选项式api，vue3组合式api

vue3生命周期也可以写成组合式api的形式

vue2里面用mixin混入(多个组件存在重复代码)，vue3采用了自定义hooks

vue2响应式原理defineproperty，vue3响应式proxy

vue3中的响应式原理？

https://www.bilibili.com/video/BV11f4y1j7Vx/?spm_id_from=333.337.search-card.all.click&vd_source=bb1c7fd921cf837ec97726bd611c96e1

vue3中的diff算法？

https://www.bilibili.com/video/BV1a5411V7kX/?spm_id_from=333.337.search-card.all.click

vue3为什么要添加组合式api？vue3有哪些组合式api？

 ref reactive computed watch

 watchEffect(监视的回调中用到哪个属性，就监视哪个属性，有点类似computed) 

 toRef 

toRefs（将响应式数据中的某个属性单独交给外部使用）

shallowReactive(只给第一层数据添加响应式)

 shallowRef(给基本类型添加响应式，对于对象类型的替换也有响应式，但是对象内部属性的修改，没有响应式) 

 readonly(给我一个响应式数据，我给他变成只读的)

shallowreadonly(响应式数据的第一层 是只读的)

provide/inject（祖孙组件，跨级组件之间的通信）

vue3里面父组件怎么调用子组件啊？

vue3的生命周期钩子函数有哪些？

vue3里面没有breforedestroyed和destroyed了，改成了beforeunmount和unmount

vue3里面可以按照vue2的方式去书写生命周期钩子函数，

当然vue3也提供了组合式api的生命周期钩子函数:

beforemount--->onbeforemount

mounted-->onMounted

beforeupdate-->onBeforeUpdate

updated-->onUpdated

beforeUnmount-->onbeforeUnmount

unmounted--onunmounted

笔试题：

1、写一个函数，递归实现从1累加到n

2、写一个函数，递归实现数组求和 function(arr){ }

3、手写一下数组去重

4、两数之和

5、给你一个数字，比如123，变成321，比如100，变成001但是要给0删掉

27期程森面试遇到的问题：

1 面试官问你：大学都学了哪些专业啊？ 建议这么回答回答：c语言，数据结构，数据库，linux等等，因为前端现在比较火，自己对前端交互非常感兴趣，对js也非常热爱，所以就自学了一些前端知识

2面试官问你:那你英语怎么样啊，4级过了没啊？ 如果没过，建议这么回答：老师我四级没过，但是在学前端的过程中，自己一直在背单词，代码报错了我也一直积极的去翻译错误，积累解决问题的方法

3程森说自己vue用得多，element UI用的多，面试官问你，原生html用过么，在什么情况下用过？这个问题主要是考察你，是不是只会用elementui，自己有没有画过页面。 这么回答：elementui是一套帮我们封装好的ui组件库，如果ui设计师给我的样式，elementui无法满足，当然我自己也需要去手动画一些样式，封装一些组件，肯定要用到原生html

4面试官说 eacharts你用过么？用了哪些功能？ 这么回答：echart是一款基于canvas的制图插件，我用他来制作过折线图，柱状图，地图，等可视化面板。 面试又问：怎么做样式的穿透啊？回答：echart配置项 options里面有专门的属性来修改style样式

5面试官说 你们项目有架构师吗？回答：有，我们前端架构师主要去进行技术的选型，项目的搭建，ui组件库的封装，模块的划分，路由的配置，网络请求axios的配置 等等，架构师我们的组长也会对我们提交的代码进行审核，审核后再合并入主分支

6 面试官问：你们做过大屏的适配么？ 这么回答：做过，但是当时搭建不是我自己搭建的，我们大屏的话主要是用rem布局实现的，然后在用echart渲染的时候，单位用的都是%和rem

7面试官问:vue2全家桶你都用过哪些功能啊？他们是解决什么问题的啊？ 这么回答：我用过vuerouter，他主要是用来实现单页面应用，根据路径可以切换不同的组建，还可以用路由守卫进行判断拦截；vuex，用来做数据的集中处理，把公共的信息在前端做存储，组件之间的通信；elementui，一套ui组件库，主要是用来快速生成页面，提升开发效率

8面试官问你：请求有没有做过封装啊？程森回答请求拦截器和响应拦截器，面试官说，他们干了什么啊？ 请求拦截器我们可以配置一些请求头，响应拦截器我们对响应做统一处理，做一些弹框提示，退出登录

9 面试官问：你这个导入怎么做的？前端做的后端做的？（如果前端做，前端解析，用插件解析出来一个数组，当作参数传给后端）（如果后端做，把整个excel文件传给后端，后端自己解析，放进数据库）

10面试官问：封装了哪些组件啊？

弹幕组件：

1我们设置一个div容器，宽是100%，高度自己设置。我给容器分为三个部分，top，center，bottom。

 2 每个弹幕其实是我自己利用createelement方法生成的span标签，他们的定位设置成absolute，他的高度是随机的。写了一个getposition的方法 ,参数可以传('top') bottom center 根据位置，去设置弹幕的top属性，left属性默认设置为0px。

3 我给每个span标签，加上一个类barrage，然后通过类去添加animation动画效果，持续时间是自定义的，比如3s。

4 我生成弹幕标签，并且通过append方法添加到容器中去，同时需要开启一个定时器，定时器的时间和动画的时间要保持一致，时间到了，利用remove方法去销毁这个弹幕。