前端面试题精选

Posted 2021-06-07 野猪佩奇007

1.数组的方法（至少说出6个）（js）!

push() 从队尾添加,改变原数组

pop() 移除数组末尾最后一项,返回移除的项

shift() 删除数组第一项,返回删除元素的值,如果数组为空返回undefined

unshift() 添加头部,改变原数组

sort() 数组排序,参数为一个匿名函数,如果匿名函数返回正值,则升序排列,反之相反

reverse() 翻转数组项的顺序 原数组改变

concat() 将参数添加到原数组,将参数添加到数组的末尾,并返回一个新数组,不改变原数组

slice() 返回原数组中指定开始下标到结束下标之间的项组成的新数组,slice接受两个参数,如果致谢一个参数,slice方法返回从该参数到数组末尾的所有项,如果有两个参数,该方法返回起始位置和结束位置之间的项,但不包括结束位置的项

splice() 可以实现删除,插入,替换 删除(可以删除任意属相的项,只需要指定2个参数,要删除的第一项的位置和要删除的项) 插入,替换(可以向指定位置插入任意数量的项,只需提供3个参数:起始位置,0(要删除的项),插入的项),splice()方法始终都会返回一个数组,数组中包括从原数组中删除的项,如果没有删除任何项则返回一个空数组

map() 对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组

some() 判断数组中是否存在满足条件的项,只要有一项满足条件,就返回true

every() 判断数组中每一项都是否满足条件,只有所有选项都满足条件,才会返回true

filter() 过滤功能,数组中的每一项运行给定函数,返回满足过滤条件组成的数组

forEach() 对数组进行循环遍历,对数组中的每一项运行给定函数,这个方法没有返回值,参数都是function类型,默认有传参功能,参数分别是,便利的数组内容,对应的索引,数组本身

indexOf() 接受两个参数,要查找的项和表示查找起点位置的索引,返回查找的项在数组的位置,没找到的情况下返回-1

2.伪数组转成真数组的方法（至少两种方法） （js）!!

Array.from()
Array.prototype.slice.call();

3.哪些操作会造成内存泄露（至少三个）（js）!!!

意外的全局变量引起的内存泄露
闭包引起的内存泄露
没有清理的DOM元素引用
被遗忘的定时器或者回调

4.react虚拟DOM实现原理 !!

在浏览器端用javascript实现一套DOMAPI，基于react进行开发时所有的DOM操作都是通过虚拟dom进行的，当数据变化时，react都会重新构建整个dom树，然后react将当前整个dom树与上一次的dom树进行对比，得到dom结构的区别，然后仅仅将需要变化的部分进行实际的浏览器dom更新。

5.call，apply，bind的区别（js）!!!

bind() 方法和前两者不同在于： bind() 方法会返回执行上下文被改变的函数而不会立即执行，而前两者是直接执行该函数。他的参数和call()相同

6.ES6有哪些新特性 !

Const 、 let 、class类 、 解构赋值 、 Set 、 箭头函数

7.H5新特性

（canvas，video，webstorage，语义化标签，表单控件 等） !

8.HTTP请求返回状态码（至少说出常见的200,304,404）!

304请求浏览器缓存的内容、
404 服务器请求错误、
500服务器错误、
200请求成功、

9.关系型数据库和非关系型数据库的区别和好处 !!!

关系型数据库通过外键关联来建立表与表之间的关系，结构清晰；非关系型数据库通常指数据以对象的形式存储在数据库中，而对象之间的关系通过每个对象自身的属性来决定，操作存取速度快。

10.web网络请求的过程 !!!

从打开浏览器开始进行域名解析 -> 建立连接 -> 发起请求 -> 等待响应 -> 接收数据。

11.闭包，原型作用域链，继承，面向对象,

使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。在js中，函数即闭包，只有函数才会产生作用域的概念。

12.闭包有三个特性：

1.函数嵌套函数
2.函数内部可以引用外部的参数和变量
3.参数和变量不会被垃圾回收机制回收

13.window.onload与document.ready的区别？

1.执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

2.编写个数不同
window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
$(document).ready()可以同时编写多个，并且都可以得到执行

3.简化写法
window.onload没有简化写法
$(document).ready(function())可以简写成$(function(){});

14.this的理解，如何使用？

this代表函数运行时，自动生成的一个内部对象，只能在函数内部使用，随着函数使用场合的不同，this的值会发生变化。但有一个总的原则就是，谁调用它，它就指向谁。一般在这几种情况下会用到它，

1.单纯的函数调用；2.作为对象方法的调用；3.作为构造函数调用；4.apply调用，apply（）是函数对象的一个方法，它的作用是改变函数的调用对象，它的第一个参数就表示改变后的调用这个函数的对象，当它的参数为空时，默认调用全局对象

15.map与each方法的区别？

map()方法主要用来遍历操作数组和对象，each()主要用于遍历jquery对象。
each()返回的是原来的数组，并不会新创建一个数组。
map()方法会返回一个新的数组。如果在没有必要的情况下使用map，则有可能造成内存浪费。

16.你了解node吗？

npm koa框架 单线程 非阻塞I/O 事件驱动

17.css3的定位？让一个容器水平垂直居中？

方法一：position加margin
方法二： diaplay:table-cell
方法三：position加 transform
方法四：flex;align-items: center;justify-content: center
方法五：display:flex;margin:auto
方法六：纯position
方法七：兼容低版本浏览器，不固定宽高

18.如何跨域？

1、通过jsonp跨域
2、通过修改document.domain来跨子域
3、使用window.name来进行跨域
4、使用html5中新引进的window.postMessage方法来跨域传送数据（但是缺点是IE6、IE7不支持）
最佳解决方案：把刀架在后端的脖子上

19.对后台技术了解多少？
Node.js java php

20.doctype这个标签是干嘛的？

声明文档类型

21.讲一下你对盒模型的了解

有padding、margin、border、content

22.怎么缓存

sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；

localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；

cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

23.position定位

Relitive: 相对于自身,会指引子元素相对于他自身进行定位
Absolute: 根据父元素的relitive进行定位
Fixed:现对于window窗口定位

24.网页优化

减少CND查询次数
减少http请求
Ajax本地缓存
压缩css,js
压缩图片

25.rem原理与em/ vw/vh 区别

Rem是基于根元素的字体大小发生改变,而em是基于body的字体大小发生改变
1.因为html5和css3引入视口的概念来代替显示器的物理尺寸。通过在meta标签上的设置，视口的长宽可以跟设备的物理分辨率相等，也可以不相等（以便手机上可以实现用两个手指来放大会缩小页面），可根据需要灵活掌握。在PC中，视口的长宽则是跟浏览器窗口的物理分辨率恒等的。

2.1vw等于视口宽度（viewport width）的百分之一，也就是说100vw就是视口的宽度。同理，1vh等于视30px改成5vw，意思就是窗口宽度的5%，同理10vw。

3.不过由于vw和vh是css3才支持的长度单位，所以在不支持css3的浏览器中是无效的口高度（viewport height）的百分之一。

26.跨域机制，如何解决，为什么这样做，for of 的循环的原理，什么样的数据类型可以使用。generator的使用

因为同源策略的诞生,只能访问相同端口,协议,域名的网站,所以我们要进行跨域,通过JsonP(动态创建一个script标签,通过src属性,设置一个端口号,通过接口上的某个参数向服务器传送一个函数,通过之歌回调函数接受服务器返回的数据) cors 反向代理
解构的原理
Var arr = [1,2,3]
Var {a,b,c} = arr //1,2,3
只要等号两边的模式相同，左边的变量就会被赋予匹配的右边的值

27. 事件委托,不冒泡的情况怎么实现事件代理，哪些事件没有冒泡

事件委托就是利用事件冒泡的机制,用父元素代替子元素绑定触发事件

28.路由都是怎么配置,如果要获取路由中的参数 你是怎么实现的

Vue路由传参 : 路径传参 name:”xxx” params {“xx”=”xxx”} 用this.$router.params接受query传参path:”xxx”query:用this.$router.query
react路由传参:通过param
s
第一步在路由表中设置 <Route path=’/sort/:id’component={Sort}>
第二步在link中设置<Link to={’/sort/’+‘2’} activeClassName=‘active’>XXXX 或者在js中设置
this.props.router.push( ‘/sort/’+‘2’ )
第三步 通过 this.props.params.id(传过来的参数)通过query <Link to={{ path:’/sort ‘, query:{ name :
‘sunny’ }}}>或者this.props.router.push({ path : ‘/sort’ ,query : { name: ’ sunny’} }) 通过this.location.query.name
通过state 同上 但是state穿过去的参数是保密的
路由如何实现异步加载
const table = (location, cb) => {
require.ensure(
[], (require) => { cb(null, require(’./pages/menu/table’).default) }, ‘table’)
}

29.vuex的实现原理

Vuex的状态存储是响应式的，当Vue组件从store中读取状态时，若store中状态发生改变，响应的组件也会得到更新状态。但不能直接改变state,必须通过显示的提交(commit)mutations来追踪每一个状态的变化。

30.类组件和函数组件；

函数组件中无法使用state，也无法使用组件的生命周期方法
函数组件都是展示性组件，接受props，渲染DOM
函数组件中没有this，但在类组件中仍要绑定this这个琐碎的事，如：在render（）方法中要使用this.props来替换props
类组件中可以使用局部状态state和生命周期方法。

31.网络安全及解决方法

为防止xss攻击,将用户的输入进行html转译

32.vue和react的区别

(1)React严格上只针对MVC的view层,Vue则是MVVM模式
(2)virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制
(3)组件写法不一样, React推荐的做法是 JSX + inline style, 也就是把HTML和CSS全都写进JavaScript了,即’all in js’; Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,jd写在同一个文件;
(4)数据绑定: vue实现了数据的双向绑定,react数据流动是单向的
(5)state对象在react应用中不可变的,需要使用setState方法更新状态;在vue中,state对象不是必须的,数据由data属性在vue对象中管理

33.vue的SPA开发性能优化
可以使用CDN资源引入,将插件的占用空间减小

34.一个需求一个分支进行开发的时候，一个新的紧急需求加入进来，当前编辑的需求不想提交，如何进行下一个分支的编辑又不会造成污染？

在当前分支上执行 $ git stash 命令。将当前分支存起来,这时候再执行 $ git status 命令，显示没有东西需要提交，这个时候你就可以切换到master分支上了。接着就可以在主分支master上创建并切换到新的分支去修复另一个Bug了.

35.gulp和webpack的区别？

Gulp是基于流的前端自动化构建工具，基于流的任务式的工具。
Webpack是一款模块化打包工具，webpack是基于配置的。

36.怎么设置border设置四种颜色
Border-color: red green blue pink;

37.浏览器的事件机制

事件捕获阶段—处于目标阶段 — 事件的冒泡阶段---- 事件的默认阶段

38.什么是flex布局及一些属性
弹性布局 justify-content , flex-direction ,align-items …

39.Target的原理
利用事件流获取当前操作的dom元素

40.事件流
事件流分为三个阶段,捕获过程,目标过程,冒泡过程

41.vue路由的原理
通过地址栏的变化,进行组件的安装和卸载

42.盒模型和怪异盒模型
盒模型的内容宽度就是内容的宽度,怪异盒模型的内容宽度包括padding,margin,border

43.Es6 的Promise方法原理
他是异步编程的一种解决方案 ,可以将异步操作以同步的方式表现出来,避免回调地狱的产生

44.怎么配置Webpack
在webpack.config.js中配置多入口多出口,单入口单出口,单入口多出口,插件在plugin中配置

45.持久登录怎么做的？
localStorage cookie的存在时间

46.Css3的动画
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

47.对工程化的理解
前端工程化可以自动化处理一些繁复的工作,提高开发效率,减少低级错误(gulp,webpack)

48.对node的理解
单线程 非阻塞I/O 事件驱动,适应于数据高并发,适合多请求,但不适合高运算,有权限读取操作系统级别的API

49.Css3 过渡
Transition 元素从一种样式逐渐变成另一种样式的效果

50.fetch怎么携带cookie
Fetch默认是不携带cookie的,携带cookie可以配置其credentials项为include

51.On绑定事件和delegate绑定事件的区别

参数顺序不同 事件(events)和事件源(seleter)的顺序不同,delegate是先事件源在事件,on相反
Axios请求数据的过程
Axios.get(“/xxx”,{}).then((data) =>{
Console.log(data)
}).catch((err)=>{
})

52.Axios和ajax的区别

Ajax实现了网页的局部数据刷新,axios实现了对ajax的封装
创建一个对象方式（5种）
工厂模式,构造函数,原型,组合模式,字面量

53.项目里用px还是rem，px和rem对比，用rem比较爽的地方

Rem 因为rem 可以做到自适应,只需要设置一个全局js就可以全局应用
Document.documentElement.style.fontSize = document.documentElement.clientWidth / xxx + ‘px’;
Window.onresize = function(){
Document.documentElement.style.fontSize = document.documentElement.clientWidth / xxx + ‘px’;
}

54.pc端和移动端需要注意的地方对比

Click事件,px和rem,touch事件

React非法路径路由怎么设置，弹出提示非法路径框

＜Redirect from="**" to="/xxx>

55.项目的目录结构

 project
    config
     public
     scripts
     src
          components
          css
          js
          modules
          store