前端面试题必问( 前端面试题)

2024-02-13 04:26:00 来源 : haohaofanwen.com 投稿人 : admin

下面是好好范文网小编收集整理的前端面试题必问( 前端面试题),仅供参考,欢迎大家阅读!

前端面试题必问

适用于二线城市中小厂,应届生,以vue为主的web前端岗位

以下题目查阅自网络,包含一些个人理解,理性阅读,有问题欢迎指出!

第一部分:自我介绍

第二部分:项目经验

有项目就简述一下项目内容,所用的技术栈,个人负责工作,以及最终上线的成果,

没有就跳过本部分

第三部分:针对性问答(根据你用的框架,针对的问,这里是vue)

1.为什么选择vue.js?它解决了什么问题?

分析:考vue框架的优点

参考回答:

①vue学习简单,容易上手,熟悉基础的html、css、Js知识后,即可快速上手;

②学习环境好,网上有什么有关vue的优质文章,同时官网也有完善的中文文档

③响应式布局,便于开发,组件化,易管理

④轻量高效,20KB运行大小,超快的虚拟dom

⑤国人研发,天生有好感

2.对Vue生命周期的理解

分析:Vue最常见的题目,简单说一下流程就行

参考回答:

概念:Vue中实例或者组件从创建到消灭中间经过的一系列过程

简单过程:beforeCreate -> created -> beforeMount -> mounted -> beforeUpdate -> updated -> beforeDestroy -> destroy ed

可能的追加问题:mounted和created的区别

参考回答:

created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。

mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。

简单来说,created在前,此时HTML还未渲染处理,用来初始化一些属性,渲染成视图,mounted在后,完成初始化页面后,可以对dom节点进行操作,进行数据绑定

3.v-if和v-show有什么区别

分析:Vue常见的考题,用一句话说明即可

参考回答:

v-if是通过DOM的添加和删除来实现效果,而且有v-else可以配合使用,但是更加消耗性能,v-show只是简单操作css

4.Vue.js中组件之间是如何通信的?

分析:举例题,一般说几个关键的方式即可

参考回答:

最常见的方法是:props/$emit

父组件向子组件传递数据,v-bind绑定一个变量,通过props传递;子组件向父组件传递数据,是通过$emit触发事件来做到的

还有其他方法

方法②:$emit/$on

方法③:$attrs/$listeners

方法④:provide/inject

方法⑤:$parent$children与 ref

方法⑥:Vuex

5.Vue中双向数据绑定的理解

分析:主要靠怎么实现,思路

参考回答:

采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调

可能的追加提问:如果用原生js,怎么实现双向数据绑定?简单谈谈思路

参考回答:

javaScript怎么实现双向数据绑定_柠檬_小强的博客-CSDN博客_js双向数据绑定

6.MVVM的理解,和MVC有什么区别?

分析:考模型理解

参考回答:

MVVM是Model-View-ViewModel的简写,即模型-视图-视图模型。

MVC是Model-View- Controller的简写,即模型-视图-控制器。

MVVM是双向数据绑定,MVC是单向数据绑定

mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低,加载速度变慢,影响用户体验

7.keep-alive是什么作用?

分析:主要考作用

参考回答:

keep-alive是Vue.js的一个内置组件,它能够把不活动的组件实例保存在内存中,而不是直接将其销毁。

第四部分:基础知识问答

JS部分

1.js中的 == 和 === 有什么区别

分析:基础题,一句话概括

参考回答:

== 是判断值等,=== 是判断值和类型全部相等

2.Js中的浅拷贝与深拷贝有什么区别?

分析:概念题,两个都解释一下

参考回答:

浅拷贝只复制指向某个对象的指针而不复制对象本身,新旧对象还是共享同一块内存。

深拷贝会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象。

可能的追加提问:如何实现一个深拷贝,谈谈简单思路

参考回答:

用JSON转换、用递归函数

3.对原型、构造函数以及实例的理解

分析:

参考回答:

原型:构造函数在创建的过程中,系统自动创建出来与构造函数相关联的一个空的对象

构造函数:自己定义的一个函数,用来在创建对象时初始化对象,通常配合new使用来新建一个对象

实例:通过构造函数和new创造出来的对象

三者关系:用构造函数和new创造出实例对象,同时也会创建出一个原型对象,实例对象的_proto_对象指向其原型

4."闭包"的理解

分析:一个较复杂的内容,各种文章的讲解不一,很难简单解释,建议自己多查查

参考回答:

(简单回答)一个内部函数可以访问到外部函数作用域的变量,这个内部函数就是闭包

可能的追加提问:闭包解决了什么问题?会导致什么问题?(闭包有哪些优点和缺点?)

参考回答:

可以读取函数内部的变量,可以避免全局污染,会导致变量不会被垃圾回收机制所清除,会大量消耗内存,并可能导致内存泄漏问题

5.如何理解Js中的this关键词

分析:一个大知识点,可能考概念,各种情况,已经改变this的方法

参考回答:

普通函数中的this:谁调用了函数或者方法,那么这个函数或者对象中的this就指向谁

匿名函数中的this:匿名函数的执行具有全局性,则匿名函数中的this指向是window,而不是调用该匿名函数的对象

函数内部的this可以通过 call appy bind改变

可能的追加提问: call appy bind的作用和区别

参考回答

作用:都可以改变函数内部的this指向。

区别点:

call 和 apply 会调用函数,并且改变函数内部this指向。

call 和 apply 传递的参数不一样,call 传递参数arg1,arg2...形式 apply 必须数组形式[arg]

bind 不会调用函数,可以改变函数内部this指向。

6.const、let、var的区别

分析:经典考题,主要从几个点说区别

参考回答:

const 定义的变量不可以修改,而且必须初始化

var 定义的变量属于函数作用域,可以修改,如果不初始化会输出undefined,不会报错,可以重复声明,存在变量提升现象

let 是块级作用域,函数内部使用let定义后,对函数外部无影响,不能重新声明

7.undefined和null对比

分析:经典考题,考概念和区别

参考回答:

undefined——表示变量声明过但并未赋过值,它是所有未赋值变量默认值

null——表示什么都没有,不指向任何地址

它们是两个不同的数据类型,如果用typeof方法,得出undefined是undefined对象,null是object对象

典型例子:undefined 转化为数字类型为NaN(Not-a-Number 非数字值),而null转化为数字类型,结果为0

8.ES6新增了哪些新元素?说几个关键的就行

分析:笼统考题,可以只说内容,不说作用

参考回答:

新增变量定义方法:let和const 

新增数据类型:symbol和bigint

字符串扩展方法:includes,startsWith,endsWith

箭头函数

对象的函数属性简写

map和reduce方法

异步方法promise

模块化export和import

对象扩展:keys,values,entries,assign

数组扩展:find,findindex,includes

9.js都有哪些数据类型?

分析:

参考回答:

基本数据类型:Number,String,Boolean,null,undefined,symbol,bigint

引用数据类型:object,function

可能的追加提问:两种数据类型有什么区别?

参考回答:

基本数据类型是直接存储在栈中的简单数据段,占据空间小、大小固定,运行速度快,属于被频繁使用的数据

引用数据类型是存储在堆内存中,占据空间大、大小不固定,运行速度更慢。

10.简述一下Set、Map、WeakSet 和 WeakMap 的区别

分析:分析区别题,四种类型介绍一遍

参考回答:

Set

成员不能重复;

只有键值,没有键名,类似于数组;

可以遍历,

WeakSet

成员都是对象(引用);

弱引用,随时可以消失。可以用来保存 DOM 节点,不容易造成内存泄露;

不能遍历

Map

本质上是键值对的集合,类似集合;

可以遍历,方法很多,可以跟各种数据格式转换;

WeakMap

只接收对象为键名(null 除外),不接受其他类型的值作为键名;

键名指向的对象,不计入垃圾回收机制;

不能遍历,方法同get、set、has、delete;

11.简述一下你对promise的理解

分析:经典问题,promise很复杂,很难简单解释,建议多看看相关文章

参考回答:

Promise是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大,简单地说,Promise好比容器,里面存放着一些未来才会执行完毕(异步)的事件的结果,而这些结果一旦生成是无法改变的。

promise的构造函数需要接收一个函数作为参数,而且需要给这个函数传入两个参数

resolve :异步操作执行成功后的回调函数

reject:异步操作执行失败后的回调函数

promise还有then和catch方法,用来指定resolve和reject的回调

可能的追加提问:promise和async await有什么区别

参考回答:

promise是ES6写法,属于链式写法,复杂场景时语法不够美观

async await是ES7写法,写法更加简洁美观,看起来像同步代码,async await是基于Promise实现的,返回的是一个Promise对象,且不能用于普通的回调函数

CSS部分

1.对CSS盒子模型的理解

分析:经典题,先介绍概念,后分着说两种模型

参考回答:

盒模型封装了周围的HTML元素,它包括:外边距(margin)、边框(border)、内边距(padding)、实际内容(content)四个属性

分类上分为:W3C盒子模型,即标准盒模型;和 IE盒子模型,即怪异盒模型

可能的追加提问:标准模型和IE模型的区别

参考回答:计算宽度和高度的不同,标准盒模型的width和height只包括内容高度,不包含padding和border的值,而IE盒模型的width和height是包含padding和border值的

2.如何实现水平居中(或者垂直居中)一个页面元素?

分析:方法题,针对回答,一般说出两种方法就可以了

参考回答:

水平居中:

行内元素的话,可以通过设置text-align: center; 

块级元素的话,可以通过设置margin: 0 auto;或者使用flex布局display: flex; justify-content: center;

垂直居中:

行内元素的话,可以通过设置display:table-cell;vertical-align: middle

块级元素的话,可以使用flex布局display: flex; align-items: center;

3.清除浮动的方式有哪些?

分析:方法题,掌握四大方法即可

参考回答:

① 额外标签法: 给谁清除浮动,就在其后额外添加一个空白标签

②父级添加overflow方法

③使用after伪元素清除浮动

④使用before和after双伪元素清除浮动

4. 行内元素和块级元素什么区别,怎么相互转换?

分析:概念题,介绍即可,区别说display的三种即可

参考回答:

块级元素

①总是从新的一行开始,即各个块级元素独占一行,默认垂直向下排列;

②高度、宽度、margin及padding都是可控的,设置有效,有边距效果;

③宽度没有设置时,默认为100%;

④块级元素中可以包含块级元素和行内元素。

行内元素

①和其他元素都在一行,即行内元素和其他行内元素都会在一条水平线上排列;

②高度、宽度是不可控的,设置无效,由内容决定。

③根据标签语义化的理念,行内元素最好只包含行内元素,不包含块级元素。

如何转换

使用display属性:

①display:inline;转换为行内元素;

②display:block;转换为块状元素;

③display:inline-block;转换为行内块状元素。

5.重绘和回流是什么?它们有什么区别?

分析:概念题,介绍一遍,然后说区别

参考回答:

重绘: 当页面中元素样式的改变并不影响它在文档流中的位置时,也就是说布局没有发生改变时(比如只是改变元素的颜色)。

回流:当渲染树(Render Tree)中的部分(或全部)元素的尺寸、结构、显示隐藏等发生改变时,浏览器重新渲染的过程称为回流

区别:重绘只改变自身样式,不会影响到其他元素;而回流的元素大小或者位置发生改变(当页面布局发生改变的时候),会触发重新布局导致渲染树重新计算布局和渲染,回流一定会触发重绘,而重绘不一定会触发回流

浏览器/服务器/HTTP协议相关

1.考几个HTTP响应码

分析:

参考答案(高频提问):

20X:请求成功,很少会考具体

30X:请求被重定向

400:错误请求

401:未授权

403:禁止

404:未找到

500:服务器内部错误

502:错误网关

503:服务不可用

504:网关超时

2.cookies,sessionStorage和localStorage的共同点和不同点

分析:概念题,抓住不同方面说明

参考回答:

共同点:三者都是保存在浏览器端,且是同源的。

区别:

①保存方式不同

cookies始终在同源http请求中携带,即在浏览器和服务器间来回传递,而sessionstorage和localstorage不会自动把数据发给服务器,仅在本地保存

②存储大小的限制不同

cookie保存的数据很小,不能超过4k,而sessionstorage和localstorage保存的数据大,可达到5M

③数据的有效期不同

cookie在设置的cookie过期时间之前一直有效,即使窗口或者浏览器关闭。sessionstorage仅在浏览器窗口关闭之前有效。localstorage始终有效,窗口和浏览器关闭也一直保存,用作长久数据保存

④作用域不同

cookie在所有的同源窗口都是共享;sessionstorage不在不同的浏览器共享,即使同一页面;localstorage在所有同源窗口都是共享

3.简单介绍一下同步和异步

分析:同步和异步知识很深,如果要问只能简单回答一下

参考回答:

同步是指在主线程上排队执行的任务,只有前一个任务执行完毕,才能继续执行下一个任务。

异步是指不进入主线程,而进入 任务队列的任务,只有任务队列通知主线程,某个异步任务可以执行了,该任务才会进入主线程。

可能的追加提问:怎么实现异步(Js)

参考回答:

回调函数(Callback)、事件监听、发布订阅、Promise/A+、生成器Generators/ yield、async/await

4.GET和POST请求有什么区别?

分析:经典考题,比较基础

参考回答:

get是通过拼接url进行传递参数,所以其参数url可见,同时get请求可以缓存,回退时不影响,get的传输数据大小一般为有限的;而post是通过请求体的body传递参数,其url参数是不可见的,post请求不可以缓存,在页面回退时会重新提交请求,能传输的数据可以无限大,而且post理论上比get更安全

5.跨域问题怎么解决?介绍几种方法

分析:介绍几种常用的即可

参考回答:

①第三方模块CORS

②jsonp(有局限性)

③webSocket

④webpack的devServer配置代理

第五部分:综合能力

一般都是了解一下学习能力,项目开发的能力,对面试的影响就不大了

1.你平时都是怎么学习前端知识?

参考回答:菜鸟教程、w3cschool,博客园、CSDN论坛、网站的授课视频,牛客网刷题等等

2.遇到不会的问题,你会怎么办?

参考回答:首先分析这个问题的具体细节,如果是基础知识的问题就去复习知识,如果是没见过的回去搜索引擎或者论坛查阅,如果无法线上找到资料的,会求助身边的程序员朋友

3.对未来职业有什么规划?

参考回答:一边工作,一边学习,往后端发展,或者成为全栈工程师(个人回答)

4.谈谈你对企业级开发的个人理解

参考回答:无标准答案

祝大家都能收到满意的offer!


相关文章

专题分类