面试常问，答案简易版

一、判断数据类型的方法

数据类型：

基本数据类型：number、string、undefined、boolean、null，symbol

引用数据类型：Object(Object,Array,Function)

基本数据类型判断：Typeof可以判断基本数据类型,判断烦返回的是一个字符串

引用数据类型判断：Object.prototype.toString方法判断属于哪种内置类型

var a =[]

var xxx = Object.prototype.toString.call(a)

console.log(xxx)Array

二、 new 操作符具体干了什么呢?

创建一个空对象
此空对象的__proto__指向构造函数的prototype
this指向该对象并添加属性和方法
返回这个对象

(

var p ={}
Person.call(p)
p.__ptoto__= person.prototype

)

三、什么是回调地狱，怎么解决回调地狱？

由于回调函数是异步的，每一层回调函数都需要依赖上一层的回调执行完毕，所以形成了层层嵌套的关系最终形成了回调地狱

解决：

避免函数的嵌套
模块化开发
使用Promise解决

四、对Es6中Promise的理解

Promise是解决异步操作的一种方法，使用promise之后可以使用一种链式调用的方式来组织代码，让代码更加直观

promise有三种状态：pending初始状态，fufilled已完成状态，rejected拒绝状态，promise内部有resolve和reject两个函数参数，通过then和catch方法可以执行promise的成功和失败函数

五、 Js 的原型和原型链？原型链的应用？

原型：所有的函数都有一个prototype(原型)属性，这个属性指向函数的原型对象，每一个实例对象都有一个__proto__(隐式原型)属性，这个属性指向它构造函数的prototype

原型链：当访问一个对象的某个属性时，先会在这个对象自身的属性上查找，如果没有找到的话就会去它的__proto__也就是构造函数的prototype上查找，如果还没有查找到，就会在这个构造函数的prototype的__proto__上查找，这样层层查找形成了原型链，直到null还没找到就会返回undefined，Object.prototype.__proto__=null

应用：解决继承的问题，查找对象的属性（方法）

六、什么是内存泄漏，哪些常见操作会造成内存泄漏

一块不能使用，也不能回收的内存

全局变量引起的
闭包引起的
Dom清空或者删除时，事件未清除导致的

七、 webpack的基本功能有哪些?

代码转换：借用对应的模块加载器loader，将typescript转化为javascript,scss转化为css

文件优化：压缩源码，去除无用代码，打包后的代码体积更小便于发布，浏览器加载更快

模块化：允许将各种资源分成若干份，在文件中把资源导出，用的地方再导入

自动刷新：监听本地源代码的变化，自动构建，刷新浏览器

八、对Json的了解

是js对象的表示法

轻量级的数据交互格式，实现前后端数据的交互

易于读写，占用带宽小

解析方便

九、 json字符串和Json对象怎么相互转化

JSON.stringify()将js对象转化为字符串

JSON.parse()将字符串转化为js对象

十、 http和https的区别是什么

连接方式不同，端口号也不同，前者为80，后者为443

https需要密钥和确认加密算法过程，更安全

十一、 get和post的区别

get请求的地址栏会暴露所有参数，服务器也会记录参数

post请求的地址栏只有资源路径，参数封装在请求体中，服务器也不会记录参数

十二、 jsonp的原理，有什么优缺点

ajax由于受到同源策略的影响，不能实现跨域获取数据，而script标签的src属性的链接到不同域的js脚本，利用这一特性，服务器不需要返回json格式的数据，而是返回某个函数的js代码，在src中调用即可

优点：实现跨域处理

缺点：只能用get请求方式

十三、跨域的几种解决方式

cors实现跨域：服务器在HTTP返回头上加上“Access-Control-Allow-Origin:*”
代理跨域：webpack.config.js设置配置项
jsonp：利用script的src属性

十四、同源策略

同协议，同域名，同端口号

十五、简述ajax的交互原理,以及同步和异步的区别

通过xmlhttprequest向服务器发送异步请求，从服务器获取数据，通过js操作dom刷新页面

具体操作：

1、创建xmlhttprequest对象

2、进行连接（get或者post请求方式）

3、发送数据

4、注册回调方法

5、执行回调

区别：同步发出请求后，只有等上一个任务执行完才能执行下一步，异步则是不等上一个任务执行完，在任务队列并行执行下一步

十六、 Ajax的缺点

Ajax不支持浏览器back回退按钮

ajax暴露了域服务器交互的细节，不安全

对搜索引擎支持比较低

破坏了程序的异常机制

不容易调试

十七、请写出至少 5 种常见的 http 状态码以及代表的意义

200：请求成功，并将返回客户端请求的结果

303(see other)：告知用户使用另一个url

400（bad request）:语义有误，当前请求无法被服务器理解

404（NOT Found）:请求失败，请求所希望的资源没有找到或者不存在

500(internal serve error)：服务器的源代码出现错误

十八、为什么使用 node？

轻量：node本身即是代码（node使用的是javascript,json来编码），又是服务器，前后端使用统一的语言

可扩展：可以轻松应对多实例，多服务器架构，同时有海量的第三方应用组件

强大：非阻塞IO，可以适应分块传输数据，较慢的网络环境，尤其擅长高并发访问

十九、 Node.js 的适用场景？

实时应用：在线聊天，实时通知推送等

分布式应用：通过高效的并行I/O使用已有的数据

工具类应用：海量的工具，小到前端压缩部署，大到桌面图形界面应用程序

游戏类应用：游戏领域对实时和并发有和很高的要求

前后端编程语言环境统一：前端开发人员可以非常快速的切入到服务器端的开发

二十、 Css选择符的权重

Id选择符权重：0100

Class选择符权重：0010

类选择符权重：0001

行内样式权重：1000

通配符选择器权重：0

就近原则：直接选择的，一定比继承的权重大

行内>内联>外联>导入

！important能够提升权限，但是不能提升继承的

二十一、闭包是什么其优缺点

闭包是指有权访问另一个函数作用于中变量的函数，创建闭包最常见的方式就是在一个函数内返回创建的子函数，将子函数暴露在全局作用域下，这就形成了闭包

通过闭包，父函数的局部变量没有被销毁，可通过闭包去调用，但同时，这个局部变量也不会被全局变量污染

优点：避免全局变量的污染

缺点：使用不当，会造成内存泄漏，且函数内部的变量都被保存在内存中，会导致内存消耗大

二十二、 push、pop、shift、unshift

push()在数组的末尾添加一个元素

pop()将数组中的最后一个元素删除

unshift在数组的第一个元素前添加一个元素

shift()将数组的第一个元素删除

二十三、 Hash和history

hash指地址栏#以及之后的内容，开发默认使用这个模式，hash虽然在地址栏中，但不会包括在http请求中，对后端完全没有影响，所以改变hash不会重新加载页面。

history符合地址规范，不带#，适合推广宣传，h5新增的pushState和replaceState方法，用来完成URL跳转而无需重新加载页面

二十四、描述cookie，sessionStorage 和 localStorage 的区别？

数据与服务器交互方式：Cookie在浏览器和服务器之间来回传递数据，sessionstorage和localstorage不会把数据发给服务器，只会在本地存储

存储大小：cookie数据不能超过4k，sessionstorage和localstorage虽然有存储大小限制，但比cookie大的多，可以达到5M或更大

有效时间：localstorage存储持久数据，浏览器关闭后数据不会丢失除非主动删除数据，sessionstorage数据在当前浏览器窗口关闭后自动删除，设置的cookie过期事件之前一直有效，即使窗口或者浏览器关闭

二十五、深拷贝和浅拷贝

浅拷贝：只是增加了一个指针指向已有的内存地址，双方互相影响

深拷贝：增加了一个指针并且申请了一个新的内存地址，使这个新增的指针指向这个新的内存地址，各自独立

（深拷贝与浅拷贝还受拷贝的数据影响，基本类型的值存储在栈内存中，引用类型的值存储在堆内存中，浅拷贝可以简单的理解为发生在栈中的拷贝行为，拷贝基本值和引用值的地址，深拷贝理解为同时发生在栈和堆中的拷贝行为，除了拷贝基本值和引用值的地址外，地址指向的堆中的对象也会发生拷贝）

二十六、防抖和节流

防抖：高频率触发的事件，在指定时间内，只响应最后一次，如果在指定时间内再次触发，则重新计算时间（后面触发的事件执行，替代了前面的事件）

节流：高频率触发的事件，在指定的时间内，只响应第一次（前面触发的时间执行，替代，忽略了后面的事件）

二十七、防抖和节流的使用场景

防抖：

search搜索时，用户在不断的输入值，用防抖来节约资源
window触发resize的时候，会不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让他只触发最后一次

节流:

监听滚动事件，比如滑到页面底部加载更多
鼠标连续不断地触发某事件（如点击），单位时间只触发第一次

display:none; 和visibility:hidden;的区别

二十八、 display:none;和visibility:hidden的区别

display:none 彻底消失，释放空间，引起页面的回流

visibility：hidden 就是消失，但是位置没有释放，好比opacity:0，引发页面重绘

二十九、什么是重绘和回流？（浏览器绘制过程）

回流：当render tree中的一部分或者全部因为元素的尺寸、布局、隐藏等改变时，浏览器重新渲染部分dom或者全部dom的过程

重绘：就是页面元素的样式改变不影响元素在文档中的位置时，如background-color,border-color等，浏览器只会将新的样式赋予元素并重新绘制操作

回流必将引起重绘，重绘不一定会引起回流

三十、什么叫优雅降级和渐进渐强

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验

优雅降级：一开始就根据高版本浏览器构建完整的功能，然后再针对低版本进行兼容

三十一、常见的居中方法

横向居中：

块级元素：元素本身margin:0 auto

行内元素：父元素text-align:center

定位：父元素relative 子元素absolute left:0 right:0 margin:auto

定位+变形：left:50% transform:translate(-50%,0)

弹性布局：横向居中display:flex;justify-content:center;

纵向居中：

行内元素：line-hieght和高度元素值一样

定位：父元素relative 子元素absolute top:0 bottom:0 margin:auto

定位+变形：top:50% transform:translate(0,-50%)

弹性布局：纵向居中display:flex;align-items:center

垂直水平居中：

弹性布局：display:flex;justify-content:center;align-items:center

定位+变形：left:50% top:50% transform:translate(-50%,-50%)

三十二、谈谈对es6的理解

1、关键字以及块级作用域的增加

变量：增加了let和const定义变量关键字

let:用于定义变量，不同于var的是不能重复定义

const:用于常变量的定义，且必须初始化，一旦设置后不可更改，否则报错

块级作用域：let和const声明的变量都是块级作用域，以{}代码块作为作用域范围，只能在代码块里面使用，var声明的变量不具有这个特性，修复了var声明变量带来的变量提升问题

2、新增数据结构set和map

set类似于数组，但是不允许元素重复

map类似于对象，但是map的key值可以是任何数据类型

3、新增模板字符串

在拼接大段字符串时，用反斜杠（`）取代以往的字符串相加的形式，能保留所有空格和换行，可以当做普通字符串使用，也可以用来定义多行字符串，也可以在字符串中嵌入变量，js表达式或函数，但是需要写在${}中

4、解构赋值：从数组和对象中提取值，对变量进行赋值

5、引入模块Module

模块的引入是为了解决作用域的问题，es6之前的脚本形式，定义的作用域都是全局作用域，现在引入的模块，定义的是当前模块的作用域，将当前作用域和全局作用域区分出来，模块的导入导出更便于项目的维护

6、函数定义不再使用关键字function，而是引入了箭头函数()=>{}来进行定义

箭头函数是匿名函数，不绑定自己的this,arguments,super,new.target，箭头函数会捕获其所在的上下文的this作为自己的this，箭头函数能作为构造函数，没有原型属性

7、解决异步编程的方案：promise

promise有三种状态pending(进行中),fulfilled(已成功)和rejected(已失败)。在promise中接受两个内置的参数分别是resolve和reject，promise实例生成后，可以用then方法分别指定resolve和reject状态的回调函数，catch方法也可以回调promise的失败函数

三十三、箭头函数和普通函数的区别

1、书写上的区别：

箭头函数比普通函数更加的简洁，而且在一定程度上可以简写，比如，括号里面只有一个参数，括号可以省略，另外如果函数体中只有一行代码，花括号也可以省略。

2、参数上的区别：

普通函数的参数是arguments,而箭头函数的的是args

3、this指向的不同：

箭头函数的this指向上层函数作用域的this对象，如果没有上层函数作用域，则指向顶部this（在浏览器中顶部this则是window）。普通函数的this指向该函数的调用者。所以call, apply, bind会改变普通函数的this，但不会改变箭头函数的this

4、原型和构造函数的问题：

箭头函数没有construct,所以不能用来构造函数，因为不能使用new，那么不需要原型，也就是没有prototype属性

三十四、从输入url到页面加载完成发生了什么？

具体：分析所需要的传输协议和请求的资源的路径。如果输入的Url中的协议或者主机名不合法，将会把地址栏中输入的内容传递给搜索引擎，如果乜有问题，浏览器则会检查url中是否出现了非法的字符，如果存在非法的字符，则对非法的字符进行转义再进行下一过程

DNS解析Url对应的IP
根据IP建立TCP连接（三次握手）
HTTP发起请求
服务器处理请求，浏览器接受HTTP响应
渲染页面，构建DOM树
关闭TCP(四次挥手)

三十四、 computed计算属性跟watch监听的区别

computed是计算属性，依赖其他的属性值，只能对最终结果进行运算功能，只计算一次，具有缓存功能，能实现计算属性和普通属性之间的双向绑定

watch不仅具有运算功能，还具有监听功能，也就是说watch包括了computed所有的功能,。

watch只能通过监听某一个属性来影响另一个属性，而不会通过影响了某个属性之后再去影响原来的属性

应用场景：computed适用于一个数据被多个数据影响，watch适用于一个数据影响多个数据

三十五、页面渲染为什么使用 key？

使用Key来给每个节点做唯一标识，diff算法就可以正确识别此节点，高效的更新虚拟DOM，而不是替换相同标签内部的内容，避免渲染问题，如果没有Key，则默认”就地复用”，当数据项的顺序被改变的时候，vue不是移动DOM元素来匹配数据项的改变，而是简单复用原来位置的每个元素

三十六、 v-show v-if

相同点：
                v-show和v-if都能控制元素的显示和隐藏。
        不同点：
                实现本质方法不同:v-show本质就是通过设置css中的display设置为none控制隐藏v，-if是动态的向DOM树内添加或者删除DOM元素;
        总结：v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，如果要频繁切换某节点时，故v-show性能更好一点。

三十七、 Vue内置指令

v-bind:响应并更新DOM特性;例如:v-bind:class v-bind:src等

v-on用于监听DOM事件

v-show条件渲染指令，为dom设置css的style属性

v-if条件渲染指令,动态在dom内提那家或者删除DOM元素

v-else条件渲染指令，必须跟v-if成对使用

v-for遍历循环指令

三十八、 Mvvm和mvc是什么，区别是什么

Mvvm是modal-view-viemModal的简写，即模型-视图-视图模型，model值的是后端传递的数据，view指的是所看到的的页面，viewmodel是连接View和model的桥梁

Viewmodel通常要实现一个observer观察者，当数据发生变化，viewmodel能够监听到数据的变化，然后通知对应的视图做自动更新，实现的方式是数据绑定，而当用户操作视图，viewmodel也能监听视图的变化，然后通知数据做改动，实现的方式是dom事件监听，这实际上就实现了数据的双向绑定。

mvc是model-view-conctroller的简写，即模型-视图-控制器，m值的是后端传来的数据，v值的是所看到的页面，c指的是页面的业务逻辑（承上启下）

三十九、 Vue组件通信的方式

子传父：子组件通过$emit(‘事件’，参数)触发在节点上绑定的自定义事件，父组件绑定动态属性，在父组件的方法触发时便可以获取到参数值

父传子：父组件调用子组件的时候，绑定动态属性，在子组件里面通过props接收父组件传来的数据

父子，兄弟，跨级传信：使用EventBus(事件总线)

四十、 Vue数据双向数据绑定的原理

vue数据的双向绑定是通过‘数据劫持’+‘订阅者模式’的方式来实现的。其核心就是通过Object.defineProperty（）方法设置set和get函数来实现数据的劫持，在数据变化时发布信息给订阅者，触发响应的监听回调。也就是说数据和视图同步，数据发生变化，视图也随之变化，数据也随之发生变化。

defineProperty（）方法：

Object.defineProperty（obj,prop,descriptor），这个语法有三个参数，分别为obj：要定义其属性的对象，prop：要定义或者要修改的属性，descriptor：具体的方法
简单来说，就是要用这个方法来定义一个值，当调用时我们使用了它里面的get方法，当给这个属性赋值时，就调用了它里面的set方法

四十一、 Vue路由守卫

Vue路由守卫一共有三种，一个是全局路由守卫（全局前置路由守卫，全局后置钩子），一个是组件内的路由守卫，一个是路由独享的路由守卫

每个守卫方法接收三个参数：

1、to:即将要进入的目标路由对象

2、from：当前导航正要离开的路由

3、next：一定要调用该方法来resolve这个钩子，执行效果依赖next方法的调用函数，若不写next(),则页面不会往下执行，一般主要用next()来跳转一个新的地址

全局前置路由守卫(‘页面刚加载，就执行’)：router.beforeEach((to,from,next)=>{

next()})

全局后置钩子：router.afterEach((to,from)=>{ })没有next

路由独享守卫：写在当前路由当中的一个组件里

组件内的守卫：

进入组件之前router.beforeEnter
组件被利用时beforeRouteUpdata
离开组件之后beforeRouteLeave

四十二、浏览器渲染的主要流程是什么

用户看到页面实际上可以分为两个阶段：页面内容加载完成和页面资源加载完成，分别对应DOMContentLoaded和Load

DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式，图片等

Load事件触发时，页面上所有的DOM，样式，脚本，图片都已经加载完成

浏览器渲染的过程主要包括一下五步：

浏览器将获取的HTML文档解析成Dom
处理Css标记，构成层叠样式模型CSSOM(CSS Object Model)
将DOM和CSSOM合并为渲染树（rendering tree），代表一系列将被渲染的对象
渲染树的每个元素包含的内容都是计算过的，它被称之为布局layout，浏览器使用一种流式处理的方法，只需要一次pass绘制操作就可以布局所有的元素
将渲染树的各个节点绘制到屏幕上，这一步被称为绘制painting

四十三、项目优化有哪些：

1、代码编写规范或习惯上的优化

2、资源加载上的优化

3、构建工具中模块导入方面的优化

4、网络请求方面的优化

5、服务器数据响应方面的优化

6、懒加载方面的优化

四十三、你如何优化自己的代码？

1、代码重用

2、避免使用过多的全局变量

3、适当的注释，尤其是一些复杂的业务逻辑或者是计算逻辑，写出这个业务逻辑的具体过程

4、内存管理，闭包中变量的释放

5、减少http请求次数：小图标用精灵图，js、css源码压缩等

6、用变量保存axios请求的数据，每次操作本地变量，减少请求次数

7、当需要设置的样式很多的时候设置className而不是直接操作style

8、减少全局变量的使用

9、图片预加载，将样式表放在顶部，将脚本放在底部

10、构建工具中模块导入方面的优化

四十四、浏览器缓存机制？

浏览器的缓存机制就是把一个请求过的web资源（例如：html页面、图片、js、数据等）拷贝一份副本储存在浏览器中；缓存会根据进来的请求保存输出内容的副本，当下一个请求到来的时候，如果是相同的URL，缓存会根据缓存机制决定是否直接使用副本响应访问请求，还是向源服务器再次发送请求。比较常见的就是浏览器会缓存访问过的页面，当再次访问这个URL地址的时候，如果网页没有更新就不会再次下载网页，而是直接使用本地缓存的网页；只有当网站明确标识已更新，浏览器才会再次下载网页。

协商缓存：首次，将所缓存资源的信息发送给服务器，其次，让服务器判断资源是否已经更新。

面试常问，答案简易版相关推荐

考研面试常问问题汇总(包含答案)
最今年在准备复试的过程中为了准备面试过程中老师可能问到的英文题目在网上找了些常见的问题并整理了如下所示一.考研口语面试常见问题30个(先放部分) 1.Where do you come from? ...
指南Java面试常问问题及答案
Java 面试常问问题及答案(非常详细) 一:java 基础 1.简述 string 对象,StringBuffer.StringBuilder 区分 string 是 final 的,内部用一个 f ...
linux高级运维笔试简答题及答案,企业linux初级和高级运维面试常问题目问答总结技巧讲解（2020年录制）...
课程增值: 课程是我最近面试辅导的所有学员,成功找到工作,企业常问题目,我带领大家学习,面试如何问答. 我曾经经历面试linux运维没有做大量准备,经历大量hr给我说的一句话就是回家等通知吧,心碎了 ...
计算机考研复试面试常问问题数据库篇
计算机考研复试面试常问问题数据库篇在复习过程中,我用心查阅并整理了在考研复试面试中可能问到的大部分问题,并分点整理了答案,可以直接理解背诵并加上自己的语言润色!极力推荐打印下来看,效率更高!绝对良 ...
Java基础（以及面试常问问题）
1.Vector,ArrayList, LinkedList的区别(面试常问到的) 三者都是实现集合框架中的List,也就是所谓有序集合,因此具体功能比较近似,比如都提供按照位置进行定位.添加或删除的 ...
计算机考研复试面试常问问题编程语言篇
计算机考研复试面试常问问题编程语言篇个人整理,免费分享,不可用于商业用途,转载请注明出处! 但是有同学反应闲鱼上有人盗卖此免费分享资料,还有好多同学买了,所以希望大家多多点赞评论收藏,提高这份资料 ...
计算机考研复试面试常问问题计算机网络篇(上)
计算机考研复试面试常问问题计算机网络篇(上) 在复习过程中,我用心查阅并整理了在考研复试面试中可能问到的大部分问题,并分点整理了答案,可以直接理解背诵并加上自己的语言润色!极力推荐打印下来看,效率更 ...
计算机考研复试面试常问问题计算机网络篇（下）
计算机考研复试面试常问问题计算机网络篇(下) 在复习过程中,我用心查阅并整理了在考研复试面试中可能问到的大部分问题,并分点整理了答案,可以直接理解背诵并加上自己的语言润色!极力推荐打印下来看,效率更 ...
路由器下一跳地址怎么判断_计算机考研复试面试常问问题计算机网络篇（下）...
计算机考研复试面试常问问题计算机网络篇(下) 在复习过程中,我用心查阅并整理了在考研复试面试中可能问到的大部分问题,并分点整理了答案,可以直接理解背诵并加上自己的语言润色!极力推荐打印下来看,效率更 ...
计算机考研复试面试常问问题操作系统篇
计算机考研复试面试常问问题操作系统篇在复习过程中,我用心查阅并整理了在考研复试面试中可能问到的大部分问题,并分点整理了答案,可以直接理解背诵并加上自己的语言润色!极力推荐打印下来看,效率更高! 此 ...

面试常问，答案简易版

面试常问，答案简易版相关推荐

最新文章

热门文章