知道这些面试题，面试必过---盖率99%（中篇）
之前我们写了一篇面试必考html和css试题，今天我们就来整理一下js、jQuery（真的太多了，我要在前面抱怨一下，我觉得你们可能看不到后面）这里有的写的比较细，有的只是一个大概的提纲大家可以看着这个提纲，不说了我要奖励自己一根鸡腿
1，事件三要素
事件源，事件处理程序，事件流
事件流：描述的是从页面中接受事件的顺序
DOM2级事件规定的事件流包括三个阶段：事件捕获阶段->处于目标阶段（事件源target）->事件冒泡阶段
首先发生的是事件的捕获阶段为截取事件提供了机会，然后是实际的目标接收到事件，最后一个阶段是冒泡阶段
事件委托是对事件冒泡的利用，事件委托可以减少页面所占的内存提升整体性能
事件处理程序：事件就是用户或浏览器自身执行的某种动作。诸如 click、load 和 mouseover，都是事件的名字。而响应某个事件的函数就叫做事件处理程序（或事件侦听器）
事件处理程序分为五种：html事件处理程序（写在html中），DOM0级事件处理程序（通过btn.onclick这种形式绑定事件），DOM2级时间处理程序（addEventListener()和 removeEventListener()。所有 DOM 节点中都包含这两个方法，并且它们都接受 3 个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是 true，表示在捕获阶段调用事件处理程序；如果是 false，表示在冒泡阶段调用事件处理程序。），ie事件处理程序（attachEvent()和 detachEvent()。这两个方法接受相同的两个参数：事件处理程序名称与事件处理程序函数）和跨处理器事件处理程序
事件对象：DOM中的事件对象： event.target 取到触发事件的源头；event.currentTarget 取到当前绑定事件的元素
IE中的事件对象：event.srcElement 取到触发事件的源头
具体就不在这里展开来说了 可参考《javascript高级程序语言设计》中事件这一章节（没有这本书的可以来本公众号回复‘红宝书’领取电子版）
2，js判断数据类型
typeof
可以判断 js 中基本数据类型，但无法判断对象的具体类型
Object.prototype.toString.call(1)
可以判断具体的对象类型，包括正则等，但是无法判断自定义对象类型。
instanceof
用法：变量 nstaceof 对象，返回值为boolean。
仅能判断对象的具体类型，但可以用于判断自定义对象类型。
constructor
查看对象对应的构造函数
object的每个实例都具有属性constructor，保存着用于创建当前对象的函数。
但是Undefined和Null类型不能判断并且重写prototype会丢失原来的constructor。
3，内置对象（9个）
String
Number
Array
Object
boolean
function
Math
Date
全局对象
4,DOM和BOM
BOM 提供了很多对象，用于访问浏览器的功能，
这些功能与任何网页内容无关BOM对象包括window（window.open,window.close,window.innerWidth,alert...），location（它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能window.href,window.search...），history(象保存着用户上网的历史记录,history.go(),history.back())，navigator(它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能)，screen(用来表明客户端的能力，其中包括浏览器窗口外部的显示器的信息，如像素宽度和高度等)
DOM是针对 HTML 和 XML 文档的一个 API（应用程序编程接口）。DOM 描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分
DOM包括节点层次与DOM操作两部分
节点层次（windows,document，element，text，attr）
DOM操作（动态脚本script，动态样式css，nodelist）
5，slice，substr，substring的区别
当接收二个参数时，第一个参数都表示当前的下标，slice和substring的第二个参数表示截取的结束下标，而substr表示的是需要截取的字符串的位数
当传入的是负数时
slice()会把当前的负值加上字符串的长度。如slice(-3),相当于slice(8)。
substring()会把所有的负值转化为零并且会默认把小的数当做第一个参数。
substr()第一个负值负值会把当前的负值加上字符串的长度，第二个负值会转化为零（截取的个数不能为负）。
数组只支持slice
6，对象
可以通过Object.defineProperty定义对象
Object.getOwnPropertyDescriptor()可以取得给定属性的描述符
创建对象的方法有六种，分别为
工厂模式：创建一个函数，这个函数函数能够根据接受的参数来构建一个包含所有必要信息的对象，可以无数次地调用这个函数，而每次它都会返回一个对象。工厂模式虽然解决了创建多个相似对象的问题，但却没有解决对象识别的问题（即怎样知道一个对象的类型）
构造函数模式： 使用new操作符（以这种方式调用构造函数实际上会经历以下 4个步骤：(1) 创建一个新对象；(2) 将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象）；(3) 执行构造函数中的代码（为这个新对象添加属性）；(4) 返回新对象。使用构造函数的主要问题，就是每个方法都要在每个实例上重新创建一遍）
原型模式：（问题：它省略了为构造函数传递初始化参数这一环节，结果所有实例在默认情况下都将取得相同的属性值。虽然这会在某种程度上带来一些不方便，但还不是原型的最大问题。原型模式的最大问题是由其共享的本性所导致的。原型中所有属性是被很多实例共享的，这种共享对于函数非常合适。对于那些包含基本值的属性倒也说得过去，毕竟（如前面的例子所示），通过在实例上添加一个同名属性，可以隐藏原型中的对应属性。然而，对于包含引用类型值的属性来说，问题就比较突出了）
组合使用构造函数和原型模式（这种构造函数与原型混成的模式，是目前在 ECMAScript 中使用最广泛、认同度最高的一种创建自定义类型的方法。可以说，这是用来定义引用类型的一种默认模式）
动态原型模式：可以通过检查某个应该存在的方法是否有效，来决定是否需要初始化原型
寄生构造函数模式
理解原型对象:无论什么时候，只要创建了一个新函数，就会根据一组特定的规则为该函数创建一个 prototype属性，这个属性指向函数的原型对象。在默认情况下，所有原型对象都会自动获得一个 constructor（构造函数）属性，这个属性包含一个指向 prototype 属性所在函数的指针。就拿前面的例子来说，Person.prototype. constructor 指向 Person。而通过这个构造函数，我们还可继续为原型对象添加其他属性和方法。创建了自定义的构造函数之后，其原型对象默认只会取得 constructor 属性；至于其他方法，则都是从 Object 继承而来的
可以通过 isPrototypeOf()方法来确定对象之间是否存在这种关系
Object.getPrototypeOf()返回的对象是这个对象的原型。
使用 hasOwnProperty()方法可以检测一个属性是存在于实例中
原型与 in 操作符：有两种方式使用 in 操作符：单独使用和在 for-in 循环中使用。在单独使用时，in 操作符会在通过对象能够访问给定属性时返回 true
hasOwnProperty()只在属性存在于实例中时才返回 true
hasPrototypeProperty()判断属性是否存在与原型中。
Object.keys()方法。这个方法接收一个对象作为参数，返回一个包含所有可枚举属性的字符串数组
如果你想要得到所有实例属性，无论它是否可枚举，都可以使用 Object.getOwnPropertyNames()方法
继承：（1）原型链，（2）借用构造函数，（3）组合继承，（4）寄生式继承，（5）寄生组合式继承
详情请参阅《javascript高级程序语言设计》中面向对象章节
7，es6
常量const
块级作用域let（不存在变量提升，不允许重复声明）
剩余参数和分布参数
解构赋值
模块
类
Promise
async
set和map（set可以用作数组去重）
箭头函数
template
详情请参阅《ES6标准入门(第3版) 》（没有这本书的可以来本公众号回复‘ES6标准入门’领取电子版）
8，设计模式
工厂模式，单例模式，观察者模式，策略模式，代理模式
9，url到浏览器显示页面发生了什么
1.主机首先读缓存，看看缓存内有没有IP地址，如果没有则通过DHCP协议获取客户端的IP地址、子网掩码和DNS服务器的IP地址
2.然后开始向服务器发生请求，发生请求需要生产一个TCP套接字，生成这个套接字是需要网站域名对应的IP地址，要获取IP地址需要解析域名，这时候就用到了DNS解析协议
3.要使用DNS解析协议，需要通过网关路由器转发DNS解析请求，这时候通过ARP协议将DHCP获取到的网关路由器IP解析成网关路由器的MAC地址，通过网关路由器发生DNS查询请求，DNS服务器响应后，通过UDP协议传输 [ 其中间的路程：路由器反向转发->网关路由器->以太网交换机->主机(客户端) ]
4.这时候取到了HTTP服务器的IP地址，能够成功生成TCP套接字，具备了与服务器通信的容器。这时候就开始TCP/IP三次握手建立连接，建立成功后，就通过TCP套接字进行数据读取传输，传输结束后进行四次挥手，关闭连接，浏览器渲染---PS:这里又可以引出DOM渲染，JS和CSS阻塞之类的知识点
*了解这个知识点主要是为了提高页面性能，明白从哪个方面来提高性能
10，排序
常见的排序与时间复杂度（具体写法就不在这里写了，这里只说一下比较常问到的冒泡）
冒泡排序：
很常见很容易理解的排序算法， 排序思路：遍历数组，每次遍历就将最大（或最小）值推至最前。越往后遍历查询次数越少
原理图：
代码：
function sort4(array) {
var len = array.length,
i, j, tmp, result;
result = array.slice(0);
for (i = 0; i < len; i++) {
for (j = len - 1; j > i; j--) {
if (result[j] < result[j - 1]) {
tmp = result[j - 1];
result[j - 1] = result[j];
result[j] = tmp;
}
}
}
return result;
}
11，ajax的步骤
什么是Ajax：Ajax = 异步 JavaScript 和XML
ajax的使用及实现步骤
(1) 创建XMLHttpRequest对象,也就是创建一个异步调用对象.
(2) 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
(3)设置响应HTTP请求状态变化的函数.
(4)发送HTTP请求.
(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新.
1.创建Ajax核心对象XMLHttpRequest
var xmlHttp;
if(window.XMLHttpRequest){ //针对除IE6以外的浏览器
xmlHttp=new XMLHttpRequest(); //实例化一个XMLHttpRequest
}else{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); //针对IE5,IE6
}
2.向服务器发送请求
xmlhttp.open(method,url,async);
xmlhttp.send();
示例如下：
var xmlHttp = new XMLHttpRequest();
xmlHttp.open('get','demo_get.html','true');//调用open()方法并采用异步方式
xmlHttp.send(); //使用open()方法将请求发送出去
xmlHttp.onreadystatechange()=>{
if(xmlHttp.readyState === 4 && xmlHttp.status === 200){
}
}
onreadystatechange事件可指定一个事件处理函数来处理XMLHttpRequest对象的执行结果。
12，内存和垃圾处理机制
JavaScript并没有提供内存管理的接口，而是在创建变量时自动分配内存，当变量不再需要使用时自动释放，也就是我们所常说的垃圾回收机制。
13，jsonp的原理
同源策略：所有支持Javascript的浏览器都会使用同源策略这个安全策略
同源策略，它是由Netscape提出的一个著名的安全策略。
现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议端口相同。
当浏览器执行一个脚本的时候会检查这个脚本是否与页面同源，只有同源的脚本才会被执行。
ajax 请求受同源策略影响，不允许进行跨域请求，而 script 标签 src 属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。
14，HTTP状态码
200("OK")
一切正常。实体主体中的文档（若存在的话）是某资源的表示。400("Bad Request")
客户端方面的问题。实体主题中的文档（若存在的话）是一个错误消息。希望客户端能够理解此错误消息，并改正问题。500("Internal Server Error")
服务期方面的问题。实体主体中的文档（如果存在的话）是一个错误消息。该错误消息通常无济于事，因为客户端无法修复服务器方面的问题。301("Moved Permanently")
当客户端触发的动作引起了资源URI的变化时发送此响应代码。另外，当客户端向一个资源的旧URI发送请求时，也发送此响应代码。404("Not Found") 和410("Gone")
当客户端所请求的URI不对应于任何资源时，发送此响应代码。404用于服务器端不知道客户端要请求哪个资源的情况；410用于服务器端知道客户端所请求的资源曾经存在，但现在已经不存在了的情况。409("Conflict")
当客户端试图执行一个”会导致一个或多个资源处于不一致状态“的操作时，发送此响应代码。
15，数组去重
a、利用ES6 Set去重（ES6中最常用）
如果不考虑兼容性，这种去重的方法代码最少。这种方法还无法去掉“{}”空对象，后面的高阶方法会添加去掉重复“{}”的方法。
b、利用for嵌套for，然后splice去重（ES5中最常用）

双层循环，外层循环元素，内层循环时比较值。值相同时，则删去这个值。
c、利用indexOf去重
新建一个空的结果数组，for 循环原数组，判断结果数组是否存在当前元素，如果有相同的值则跳过，不相同则push进数组。
d、利用sort()

利用sort()排序方法，然后根据排序后的结果进行遍历及相邻元素比对。
e、利用对象的属性不能相同的特点进行去重

f、利用includes

g、利用hasOwnProperty

利用hasOwnProperty 判断是否存在对象属性
h、利用filter

i、利用递归去重
j、利用Map数据结构去重

创建一个空Map数据结构，遍历需要去重的数组，把数组的每一个元素作为key存到Map中。由于Map中不会出现相同的key值，所以最终得到的就是去重后的结果。
k、利用reduce+includes
16，cookies，sessionstarage，localstorage
补充：cookie绑定在特定的域名下，sessionStorage可以跨页面刷新存在，localStorage保存在同意域名下子域名无效
17，内存泄漏
就是没有使用，或已经使用完的变量，没有及时回收。
常见的javascript内存泄漏：
意外的全局变量（有些全局变量产生的垃圾，不可回收，尤其当全局变量用于临时存储和处理大量信息的时候，确保用完之后将他设置为null）
计时器或回调函数（一旦定时器不需要，需要移除。）
dom清空或删除时，事件未清除导致的内存泄漏（
把事件清除了，即可从内存中移除
）
闭包（清空闭包）
18，闭包
函数与对其状态即词法环境（lexical environment）的引用共同构成闭包（closure）。也就是说，闭包可以让你从内部函数访问外部函数作用域。在JavaScript，函数在每次创建时生成闭包。
20，对象转换数组
array.from/Array.prototype.slice.call
21，对象字面量和json
22，数组操作
常用：push，pop，unshift，shift，slice，join，reverse，sort，toString，concat
23，变量声明提升和预解析
JavaScript引擎在对JavaScript代码进行解释执行之前，会对JavaScript代码进行预解析，在预解析阶段，会将以关键字var和function开头的语句块提前进行处理。
24，隐式变量声明提升
25，this
27，js和jquery的入口文件
（1）JS的window.onload事件必须要等到所有内容，以及外部图片之类的文件加载完之后，才会去执行。
（2）JQuery入口函数是在所有标签加载完之后，就会去执行。
（3） JS的入口函数window.onload函数有一个覆盖的问题，当文档中出现2个window.onload函数的时候，后者会覆盖前者，导致功能实现不了。但是JQuery却没有这样的问题，重要是因为JQuery入口函数只是对封装好了的方法的一个调用，只不过传的参数不同而已。
28，addEventListener和attachEvent的区别
addEventListener有三个参数分别为事件名，事件处理函数，是否在捕获阶段调用事件处理程序而attachEvent只有事件名和时间处理函数两个参数并且attachEvent中的事件名没有前面的‘on’
addEventListener事件处理函数的作用域是其依附的元素上而attachEvent事件处理函数的作用域为windows
看到这里的同学幸苦了.....
文中提到的资料请去本公众号回复关键字拿 还需要什么资料可以找小编
欢迎转载，但请不要改动原文内容 谢谢
