【JS】太棒了！2018-前端经典面试题整理合集，还附带大厂面试题分享！

1，盒模型

1.1，ie 盒模型算上 border、padding 及自身（不算 margin），标准的只算上自身窗体的大小 css 设置方法如下：

/* 标准模型 */box-sizing:content-box ;
/*IE 模型*/box-sizing:border-box ;

1.2，几种获得宽高的方式

  • dom.style.width/height：这种方式只能取到 dom 元素内联样式所设置的宽高，也就是说如果该节点的样式是在 style 标签中或外联的 CSS 文件中设置的话，通过这种方法是获取不到 dom 的宽高的。

  • dom.currentStyle.width/height：这种方式获取的是在页面渲染完成后的结果，就是说不管是哪种方式设置的样式，都能获取到。但这种方式只有 IE 浏览器支持。

  • window.getComputedStyle(dom).width/height：这种方的原理和 2 是一样的，这个可以兼容更多的浏览器，通用性好一些。

  • dom.getBoundingClientRect().width/height：这种方式是根据元素在视窗中的绝对位置来获取宽高的。

  • dom.offsetWidth/offsetHeight：这个就没什么好说的了，最常用的，也是兼容最好的。

1.3，拓展 各种获得宽高的方式

  • 获取屏幕的高度和宽度（屏幕分辨率）：
    window.screen.height/width

  • 获 取 屏 幕 工 作 区 域 的 高 度 和 宽 度 （ 去 掉 状 态 栏 ） ：
    window.screen.availHeight/availWidth

  • 网页全文的高度和宽度：
    document.body.scrollHeight/Width

  • 滚动条卷上去的高度和向右卷的宽度：
    document.body.scrollTop/scrollLeft

  • 网页可见区域的高度和宽度（不加边线）：
    document.body.clientHeight/clientWidth

  • 网页可见区域的高度和宽度（加边线）：
    document.body.offsetHeight/offsetWidth

1.4，距重叠解决方案(BFC) BFC 原理

  • 内部的 box 会在垂直方向，一个接一个的放置 每个元素的 margin box 的左边，与包含块 border box 的左边相接触（对于从做往右的格式化，否则相反）

  • box 垂直方向的距离由 margin 决定，属于同一个 bfc 的两个相邻 box 的 margin 会发生重叠

  • bfc 的区域不会与浮动区域的 box 重叠

  • bfc 是一个页面上的独立的容器，外面的元素不会影响 bfc 里的元素，反过来，里面的也不会影响外面的

  • 计算 bfc 高度的时候，浮动元素也会参与计算 创建 bfc ? float 属性不为 none（脱离文档流）

  • position 为 absolute 或 fixed

  • display 为 inline-block,table-cell,table-caption,flex,inine-flex ? overflow 不为 visible

  • 根元素 demo

2，居中方法

水平方向上

针对 inline, 内联块 inline-block, 内联表 inline-table, inline-flex 元素及img,span,button 等元素

.text_div{
text-align:center;
}
不定宽块状元素居中
.text_div{
margin:0 auto;//且需要设置父级宽度
}

通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

.wrap{
float:left;
position:relative;
left:50%;
clear:both;
}
.wrap-center{
left:-50%;
}

垂直居中

  • 单行内联(inline-)元素垂直居中
    通过设置内联元素的高度(height)和行高(line-height)相等，从而使元素垂直居中。

.text_div{
height: 120px;
line-height: 120px;
}

  • 利用表布局

.father {
display: table;
}
.children {
display: table-cell;
vertical-align: middle;
text-align: center;
}

  • flex 布局

.center-flex {
display: flex;
flex-direction: column;//上下排列
justify-content: center;
}

  • 绝对布局方式

已知高度

.parent {
position: relative;
}.child {position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}

未知高度

.parent {
position: relative;
}.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

垂直水平居中根据上方结合

flex 方式
.parent {
display: flex;
justify-content: center;
align-items: center;
}
grid 方式
.parent {
height: 140px;
display: grid;
}
.child {
margin: auto;
}

3，css 优先级确定

  • 每个选择器都有权值，权值越大越优先

  • 继承的样式优先级低于自身指定样式

  • ！important 优先级最高 js 也无法修改

  • 权值相同时，靠近元素的样式优先级高 顺序为内联样式表（标签内部）> 内部样式表（当前文件中）> 外部样式表（外部文件中）

4，如何清除浮动

不清楚浮动会发生高度塌陷：浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）

  • clear 清除浮动（添加空 div 法）在浮动元素下方添加空 div,并给该元素写 css 样式：{clear:both;height:0;overflow:hidden;}

  • 给浮动元素父级设置高度

  • 父级同时浮动（需要给父级同级元素添加浮动）? 父级设置成 inline-block，其 margin: 0 auto 居中方式失效

  • 给父级添加 overflow:hidden 清除浮动方法

  • 万能清除法 after 伪类 清浮动（现在主流方法，推荐使用）

.float_div:after{
content:".";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
.float_div{
zoom:1
}

5，link @import 导入 css

（1）link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事务；@import 属于CSS 范畴，只能加载 CSS。

（2）link 引用 CSS 时，在页面载入时同时加载；@import 需要页面网页完全载入以后加载。

（3）link 无兼容问题；@import 是在 CSS2.1 提出的，低版本的浏览器不支持。

（4）link 支持使用 Javascript 控制 DOM 去改变样式；而@import 不支持。

6， ["1", "2", "3"].map(parseInt)

首先, map 接受两个参数, 一个回调函数 callback, 一个回调函数的 this 值，其中回调函数接受三个参数 currentValue, index, arrary；而题目中, map 只传入了回调函数--parseInt.。其次, parseInt 只接受两个两个参数 string, radix(基数).

本题理解来说也就是 key 与 index

所以本题即问 parseInt('1', 0);parseInt('2', 1);parseInt('3', 2)；

parseInt(string, radix)

string 必需，要被解析的字符串。
radix 可选，表示要解析的数字的基数。该值介于 2 ~ 36 之间。

如果省略该参数或其值为 0，则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头，将以 16 为基数。

7，浅拷贝和深拷贝

  • 浅拷贝

// 第一层为深拷贝
Object.assign()
Array.prototype.slice()
扩展运算符 ...

  • 深拷贝

JSON.parse(JSON.stringify())

递归函数

function cloneObject(obj) {
var newObj = {} //如果不是引用类型，直接返回
if (typeof obj !== 'object') {
return obj
}
//如果是引用类型，遍历属性
else {
for (var attr in obj) {
//如果某个属性还是引用类型，递归调用
newObj[attr] = cloneObject(obj[attr])
}
}
return newObj
}

8，数组去重的方法

1）ES6 的 Set

let arr = [1,1,2,3,4,5,5,6]
let arr2 = [...new Set(arr)]

2）reduce()

let arr = [1,1,2,3,4,5,5,6]
let arr2 = arr.reduce(function(ar,cur) {
if(!ar.includes(cur)) {
ar.push(cur)
}
return ar
},[])

3）filter()

// 这种方法会有一个问题：[1,'1']会被当做相同元素，最终输入[1]
let arr = [1,1,2,3,4,5,5,6]
let arr2 = arr.filter(function(item,index) {
// indexOf() 方法可返回某个指定的 字符串值 在字符串中首次出现的位置
return arr.indexOf(item) === index
})

9，cookie、localStorage、sessionStorage的区别和使用？

cookie：是存储在本地的数据，有时候也用cookies，通常经过加密，应用最经典的就是判断注册用户是否已经登录过该网站。
localStorage：仅在客户端保存（即浏览器），不参与和服务器的通信；没有时间限制，即使浏览器关闭，数据依然存在；

创建和访问localStorage：
1）、设置数据：
var forgetData = {
phone:vm.phone
};
localStorage.setItem("forgetData",JSON.Stringfy(forgetData));
//forgetData是存储在localStorage里边的本地数据；JSON.Stringfy(forgetData)是将数据转化
为字符串格式；
获取数据：
vm.forgetData=JSON.parse(localStorage.getItem("forgetData")); //将字符串
转化为JSON化；
2）、设置：localStorage.name = "zhao";
获取：localStorage.name  //zhao
localStorage.setItem(key,value);//设置数据
localStorage.getItem(key);//获取数据
localStorage.removeItem(key);//删除单个数据
localStorage.clear();//清除所有localStorage的数据
sessionStorage：当用户的浏览器窗口关闭时，数据会被清除；

共同点：都是保存在浏览器端，且同源的。

区别：

cookie数据始终在同源的http请求中携带9即使不需要)，即cookie在浏览器和服务器之间来回传递；cookie数据还有路径的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据大小不能超过4K，同时因为每次http请求都会携带cookie，所以cookie只能保存很小的数据。
sessionStorage和localStorage不会自动把数据发给服务器，只在本地保存，虽然也有大小限制，但是要比cookie大得多，可以达到5M或者更大。

数据有效期不同，
sessionStorage仅在当前浏览器窗口关闭前有效，不能持久保存；
localStorage：始终有效，浏览器窗口关闭也一直保存；
cookie：只在cookie设置的过期时间之前保存，即使浏览器窗口关闭。

作用域不同，
sessionStorage在不同浏览器窗口的数据不能共享，即使是同一个页面；
localStorage在所有的同源窗口中都是共享的；
cookie也是在同源窗口中共享的

10、ajax请求时get和post的区别？

get：从服务器上获取数据，传送数据量小，安全性低，请求会被缓存，缓存是针对URL进行缓存的，get请求参数直接加在URL地址后面，一种参数组合就会产生一种URL的缓存，重复的请求结果是相同的；

post：向服务器发送数据；传送数据量大，请求不会被缓存，参数封装在二进制的数据体中，服务器也不会记录参数，相对安全，所以涉及用户隐私的数据都要用post传送

11、常见状态码

2开头 （请求成功）表示成功处理了请求的状态代码

3开头 （请求被重定向）表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向

4开头 （请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理

5开头（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错

12，移动端触摸事件

①touchstart：当手指触碰到屏幕的时候触发
②touchmove：当手指在屏幕上滑动的时候触发
③touchend：当手指离开屏幕的时候时候触发
④touchcancel 事件：当系统停止跟踪触摸的时候触发(这个事件很少会用，一般不做深入研究)。电话接入或者弹出信息等其他事件切入 event：

（1）touches：表示当前跟踪的触摸操作的 touch 对象的数组。
（2） targetTouches：特定于事件目标的 Touch 对象的数组。
（3） changeTouches：表示自上次触摸以来发生了什么改变的 Touch 对象的数组。 每个 touch 对象包含的属性
（4） clientX：触摸目标在视口中的 x 坐标。
（5） clientY：触摸目标在视口中的 y 坐标。
（6）identifier：标识触摸的唯一 ID。
（7） pageX：触摸目标在页面中的 x 坐标。
（8） pageY：触摸目标在页面中的 y 坐标。
（9）screenX：触摸目标在屏幕中的 x 坐标。
（10） screenY：触摸目标在屏幕中的 y 坐标。
（11） target：触目的 DOM 节点目标。

13，生命周期

总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

（1）什么是vue生命周期

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载
Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

（2）vue生命周期的作用是什么

它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

（3）vue生命周期总共有几个阶段

可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后

（4）第一次页面加载会触发哪几个钩子

第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

（5）DOM 渲染在 哪个周期中就已经完成

DOM 渲染在 mounted 中就已经完成了

（6）简单描述每个周期具体适合哪些场景

生命周期钩子的一些使用方法：

  • beforecreate : 可以在这加个loading事件，在加载实例时触发

  • created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用

  • mounted : 挂载元素，获取到DOM节点

  • updated : 如果对数据统一处理，在这里写上相应函数

  • beforeDestroy : 可以做一个确认停止事件的确认框

  • nextTick : 更新数据后立即操作dom

14，Vue 的 nextTick 的原理是什么？

1）为什么需要 nextTick
Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM，但有时候业务需要必须对数据更改--刷新后的 DOM 做相应的处理，这时候就可以使用 Vue.nextTick(callback)这个 api 了。

2）理解原理前的准备
首先需要知道事件循环中宏任务和微任务这两个概念(这其实也是面试常考点)。
常见的宏任务有 script, setTimeout, setInterval, setImmediate, I/O, UI rendering
常见的微任务有 process.nextTick(Nodejs),Promise.then(),MutationObserver;

3）理解 nextTick
而 nextTick 的原理正是 vue 通过异步队列控制 DOM 更新和 nextTick 回调函数先后执行的方式。如果大家看过这部分的源码，会发现其中做了很多 isNative()的判断，因为这里还存在兼容性优雅降级的问题。可见 Vue 开发团队的深思熟虑，对性能的良苦用心。

15，Vue中引入组件的步骤?

1）采用ES6的import ... from ...语法或CommonJS的require()方法引入组件
2）对组件进行注册,代码如下

// 注册
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})

3）使用组件 <my-component></my-component>

16，说出至少4种vue当中的指令和它的用法？

  • v-if：判断是否隐藏；

  • v-for：数据循环；

  • v-bind:class：绑定一个属性；

  • v-model：实现双向绑定

17，vuex

（1）vuex是什么？怎么使用？哪种功能场景使用它？

vue框架中状态管理。在main.js引入store，注入。新建一个目录store，….. export 。

场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

（2）vuex有哪几种属性？

有五种，分别是 State、 Getter、Mutation 、Action、 Module

  • vuex的State特性
    A、Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的data
    B、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新
    C、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中

  • vuex的Getter特性
    A、getters 可以对State进行计算操作，它就是Store的计算属性
    B、 虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用
    C、 如果一个状态只在一个组件内使用，是可以不用getters

  • vuex的Mutation特性
    Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态；Action可以包含任意异步操作。

（3）不用Vuex会带来什么问题？

  • 可维护性会下降，想修改数据要维护三个地方；

  • 可读性会下降，因为一个组件里的数据，根本就看不出来是从哪来的；

  • 增加耦合，大量的上传派发，会让耦合性大大增加，本来Vue用Component就是为了减少耦合，现在这么用，和组件化的初衷相背

18，vuex 是基于redux

1）全局的store
2）响应式
3）不能直接修改，commit（mutation）
vuex使用单一状态树 吧store的实例注入到所有的子组件，mutation处理同步事务
1）action ： 提交mutation，异步
2）module

19，vue更新data

1）异步更新
2）多次更新data，只在最后一次渲染

20，react的setState

1）两个参数。 setState(updater,[callback]) ,第一个参数是更新的对象，第二个参数是更新完成的回调函数；
2）setStat本身执行过程和代码是同步的
3）合成事件(onClick、onChanged等)和钩子函数中setState是异步的，将多次合并成一次更新；
4）在原生事件和 setTimeout 中都是同步的。
5）浅合并 Objecr.assign()

21，react的setState流程

1）将state放入数组（队列）；
2）检查是否在更新阶段
3）是：组件放在dirtyComponent
4）否：调用update更新，标记当前处于更新阶段
5）最后再遍历dirtyComponent执行更新

22，react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

【JS】太棒了！2018-2020前端经典面试题整理合集，还附带大厂面试题分享！

【JS】太棒了！2018-2020前端经典面试题整理合集，还附带大厂面试题分享！

阿里

  • 使用过的koa2中间件

  • koa-body原理

  • 介绍自己写过的中间件

  • 有没有涉及到Cluster

  • 介绍pm2

  • master挂了的话pm2怎么处理

  • 如何和MySQL进行通信

  • React声明周期及自己的理解

  • 如何配置React-Router

  • 路由的动态加载模块

  • 服务端渲染SSR

  • 介绍路由的history

  • 介绍Redux数据流的流程

  • Redux如何实现多个组件之间的通信，多个组件使用相同状态如何进行管理

  • 多个组件之间如何拆分各自的state，每块小的组件有自己的状态，它们之间还有一些公共的状态需要维护，如何思考这块

  • 使用过的Redux中间件

  • 如何解决跨域的问题

  • 常见Http请求头

  • 移动端适配1px的问题

  • 介绍flex布局

  • 其他css方式设置垂直居中

  • 居中为什么要使用transform（为什么不使用marginLeft/Top）

  • 使用过webpack里面哪些plugin和loader

  • webpack里面的插件是怎么实现的

  • dev-server是怎么跑起来

  • 项目优化

  • 抽取公共文件是怎么配置的

  • 项目中如何处理安全问题

  • 怎么实现this对象的深拷贝

网易

  • 介绍redux，主要解决什么问题

  • 文件上传如何做断点续传

  • 表单可以跨域吗

  • promise、async有什么区别

  • 搜索请求如何处理（防抖）

  • 搜索请求中文如何请求

  • 介绍观察者模式

  • 介绍中介者模式

  • 观察者和订阅-发布的区别，各自用在哪里

  • 介绍react优化

  • 介绍http2.0

  • 通过什么做到并发请求

  • http1.1时如何复用tcp连接

  • 介绍service worker

  • 介绍css3中position:sticky

  • redux请求中间件如何处理并发

  • 介绍Promise，异常捕获

  • 介绍position属性包括CSS3新增

  • 浏览器事件流向

  • 介绍事件代理以及优缺点

  • React组件中怎么做事件代理

  • React组件事件代理的原理

  • 介绍this各种情况

  • 前端怎么控制管理路由

  • 使用路由时出现问题如何解决

  • React怎么做数据的检查和变化

滴滴

  • react-router怎么实现路由切换

  • react-router里的<Link>标签和<a>标签有什么区别

  • 标签默认事件禁掉之后做了什么才实现了跳转

  • React层面的性能优化

  • 整个前端性能提升大致分几类

  • import { Button } from 'antd'，打包的时候只打包button，分模块加载，是怎么做到的

  • 使用import时，webpack对node_modules里的依赖会做什么

  • JS异步解决方案的发展历程以及优缺点

  • Http报文的请求会有几个部分

  • cookie放哪里，cookie能做的事情和存在的价值

  • cookie和token都存放在header里面，为什么只劫持前者

  • cookie和session有哪些方面的区别

  • React中Dom结构发生变化后内部经历了哪些变化

  • React挂载的时候有3个组件，textComponent、composeComponent、domComponent，区别和关系，Dom结构发生变化时怎么区分data的变化，怎么更新，更新怎么调度，如果更新的时候还有其他任务存在怎么处理

  • key主要是解决哪一类的问题，为什么不建议用索引index（重绘）

  • Redux中异步的请求怎么处理

  • Redux中间件是什么东西，接受几个参数（两端的柯里化函数）

  • 柯里化函数两端的参数具体是什么东西

  • 中间件是怎么拿到store和action，然后怎么处理

  • state是怎么注入到组件的，从reducer到组件经历了什么样的过程

  • koa中response.send、response.rounded、response.json发生了什么事，浏览器为什么能识别到它是一个json结构或是html

  • koa-bodyparser怎么来解析request

  • webpack整个生命周期，loader和plugin有什么区别

  • 介绍AST（Abstract Syntax Tree）抽象语法树

  • 安卓Activity之间数据是怎么传递的

  • 安卓4.0到6.0过程中WebView对js兼容性的变化

  • WebView和原生是如何通信

  • 跨域怎么解决，有没有使用过Apache等方案

以上是 【JS】太棒了！2018-前端经典面试题整理合集，还附带大厂面试题分享！ 的全部内容， 来源链接： utcz.com/a/97447.html

回到顶部