1、 [1,2,3].map(parseInt)输出结果？
答案：1，NaN，NaN
解析：
array.map(function callback(currentValue,index,array){}[,thisArg])方法的作用是遍历array中的每一项，并为每个元素都执行callback函数；
parseInt()方法有两个作用：①当参数为一个时，将其他类型数据转换成字符串
②当参数为两个时，以第二个参数解析数据，进行进制的数据转换（第二个参数需满足大于2小于36，0表示10进制）
这里，第一个参数为数组中的每个元素，第二个参数为index，即是考察parseInt的第二个用法所以表示为：
parseInt（1,0）；parseInt（2,1））；parseInt（3,2)
得1，NaN，NaN
2、手写一个完整的继承
答案：
3、eventLoop事件循环和事件队列
答：js的异步机制由事件循环和任务队列构成。（js本身是单线程）
javascript主线程拥有一个执行栈以及一个任务队列，主线程会依次执行代码，当遇到函数时，会先将函数入栈，函数运行完毕后会再将该函数出栈，直到所有代码执行完毕。
遇到异步操作，例如：setTimeout、ajax时，异步操作会由浏览器执行，浏览器会再这些任务完成后，将事先定义的回调函数推入主线程的任务队列中，当主线程的任务栈清空后会读取任务队列中的回调函数，然后去执行，从而进入一个无线循环，这就是事件循环。
一个浏览器环境只能拥有一个事件循环，而一个事件循环可以多个任务队列，每个任务都有一个任务源。任务队列是一个先进先出的队列
4、https的工作原理
解析：https在传输数据之前需要客户端（浏览器）和服务器之间进行一次握手，在握手过程中确立双方加密传输数据的密码信息。TLS/SSL是一条加密传输协议，使用了对称加密，非对称加密以及hash算法。
握手的过程：浏览器将自己支持的一套加密规则发送给服务器；网站从汇总选出一组加密算法与hash算法，并将自己的身份信息以整数的形式发送给浏览器。证书里包含了网址，加密公钥，以及证书的颁发机构等信息，浏览器获得证书后要验证证书的合法性，如果证书不受信任会给出提示，如果证书受信任，浏览器会生成一串随机数的密码，并用证书中提供的公钥加密。使用约定好的hash算法发计算握手消息，并使用生成的随机数对消息进行加密，最后将之前生成的所有信息发送给网站。
网站接受浏览器发送来的数据要做一下的操作：使用自己的私钥将信息解密，取出密码，使用密码解密浏览器发来的握手信息，并验证hash是否一致。使用密码加密一段握手消息发送给浏览器。
客户端如何验证证书的合法性：校验证书的颁发机构是否受客户端信任；通过CRL或OCSP的方式校验证书是否被吊销；对比系统时间，校验证书是否在有效期内；通过校验对方是否存在证书的私钥，判断证书的网站域名是否与证书颁发的域名一致；
5、https和http的区别
答：https比较安全，经过TLS/SSL加密，需要ca证书，需要收费；
https和http的端口号不同，https默认端口号是443，http默认端口号是80；
http是超文本传输协议，信息是明文传旭，https是具有安全性的加密传输协议；
http连接很简单，是无状态的；https协议是由ssl+http协议构建的可加密传输，身份认证的网络协议比http协议安全；
6、http2 和http1 的区别
答：http2采用二进制格式而非文本格式，解析起来更高效；
http2是完全多路复用的，即一个tcp连接上同时跑多个http请求
http2使用报头压缩，降低了开销；
http2让服务器可以将响应主动推送到客户端缓存中，支持服务端推送，就是服务器可以对一个客户请求发送多个响应；
7、请求报头举例
答：Accept：客户端可识别的内容类型列表，用于指定客户端接受那些类型的消息；
cache-control：用于指定缓存指令，缓存指令是单向的且是独立的，一个消息的缓存指令不会影响另一个消息的缓存指令
host：请求主机名；
user-agent：发送请求的浏览器类型、操作系统等信息
Accept-Language：表示浏览器支持的语言类型；
8、输入URL后网页到底做了什么
答：通过域名（DNS）解析IP地址，查找域名对应的ip地址
根据ip地址建立TCP的三次握手
①客户端发送syn包到服务器，等待服务器确认：syn_send;
②服务器手动syn包，确认客户端的syn并发送自己的syn包:syn_recv;
③客户端收到服务器端发送的syn+ack包，向服务器发送确认包ack，此包发送完毕：established；完成三次握手
浏览器与服务器通信：浏览器发起请求，服务器响应请求
①浏览器根据URL内容生成http请求；
②服务器收到请求后会根据内容获取相应的html文件，将得到的HTML发送给客户端；
③在浏览器还没有完全接收html文件时便开始渲染，显示网页；
④在执行html文件时，根据需要请求图片，css，js等文件
浏览器与服务器断开链接（TCP的四次挥手）
计算机网络体系结构：7层模型
应用层（HTTP、SMTP、FTP、POP3）；
传输层（TCP、UDP）；
网络层（IP、路由器）：
数据链路层（网桥 ppp CD）；
物理层（集线器）；
9、浏览器渲染展示网页的过程：
答：html代码转化为DOM树，css代码转化成css object model；结合dom和cssom生成一颗渲染树；生成布局，将所有渲染树的节点进行平面合成；将布局绘制到屏幕上；使用JavaScript脚本来动态的修改dom，以便给web应用带来动态行为；最后，web应用执行；
回流：当render tree中的一部分或全部因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，这就称之为回流。每个页面至少有一次回流，也就是页面第一次加载的时候。完成回流后，浏览器会重新绘制受影响的部分到屏幕中去，这就称之为重绘。
触发回流的几种情况：
1.添加或者删除可见的dom元素；
2.元素位置改变；
3.元素尺寸改变-边距、填充、边框、宽度、高度；
4.页面渲染初始化；
5.内容改变-文本改变或者图片大小改变，引起计算值宽度，高度的改变；
6.浏览器尺寸大小的改变-resize事件发生时；
重绘：回流必将引起重绘，重绘不一定会引起回流
减少重绘回流的实现：
1.css ：使用transform代替top；
使用visibility代替display：none；
避免使用table布局
尽可能在dom树的最末端改变class，限制了回流的范围，使其影响尽可能少的节点；
避免设置多层内联样式；避免层级过多；
避免使用css表达式，将频繁重绘或者回流的节点设置为图层；
2.javascript:避免频繁操作样式，最好一次性重写style样式；
避免频繁操作DOM，最好创建一个documentFragment，在它上面应用所有的DOM操作，最后再把它添加到文档中。
避免频繁读取会影响重绘回流的属性，用一个变量缓存起来；
对一个复杂动画的元素使用绝对定位，使他脱离文档流，否则会引起父元素以及后续元素频繁回流；
10、xss攻击和csrf攻击防御
答：xss的防御：1.对用户输入的内容进行解析和过滤或编码（过滤有危险的dom节点，如script img link style iframe等）
2.对cookie做保护，设置httpOnly，防止客户端通过document.cookie读取cookie;
csrf的防御：1.尽量减少使用get请求；
2.使用验证码；
3.referer check；
4.使用token；
11、数组去重
解析：
12、跨域
jsonp的原理：动态创建一个script标签，动态加载一个js文件，载入成功后会执行在URL参数中指定的函数，并把需要的json数据所谓参数传入；
优缺点：只能传递get请求，有一定得限制；
cros跨域资源共享：（原理）服务器对于cros的支持，设置Access-Control-Origin为你传输的origin的值，浏览器监测到响应的设置，支持跨域；
优缺点：支持所有类型的请求 get、post、put、delete、update等；
node中间件代理跨域：通过启用一个代理服务器，实现数据的转发；node+vue+webpack-dev-server大力接口跨域，在开发模式下，只需要设置devServer=>proxy即可
14、this的使用场景+apply、call、bind的区别，手动封装
this的使用场景：this的值会随着函数的使用场景的不同而发生变化，但是一个原则就是，this指的是调用函数的那个对象，即谁调用指向谁；
①作为对象的方法调用；
②构造器调用；
③function.prototype.call 或 function.prototype.apply调用；
④作为普通函数调用；
call和apply的用途：①改变this的指向；②借用其他对象的方法
call的另外一个作用就是：将伪数组转换为数组：Array.prototype.slice.call(divs);---divs为要转换的伪数组
call 和apply 的区别：都是用来改变this的指向，都可以借用其他对象的方法，不同是apply的第二个参数传值方式必须是集合，即伪数组或者数组，call的第二个参数传值是依次传入各个值，用逗号分隔；他们的第一个参数都代表的是函数体内this的指向；
bind和call、apply的区别：call和apply是立即执行函数，bind非立即执行，为函数体，执行时在后面加小括号，小括号中传值
15、ES6的重要知识点：
1> Generator函数是es6提供的异步编程解决方案，可以理解为是一个状态机，封装了多个内部状态；
2>Generator函数会返回一个遍历器对象；可以依次遍历函数内部的内一个状态，特征：function关键字与函数名之间有一个*号，二是，函数体内部使用yield表达式，定义不同的内部状态；
3>Generator函数是分段执行的，yield表达式是暂停执行的标记，next方法每次执行，内部指针就从函数头部或者上次停下来的地方开始执行，直到遇到下一个yield表达式为止。
4>es6中let const命令：不存在变量提升，不允许声明前使用，会报错；let声明的是块级作用域；这时候会存在一个临时死区，即{}中间都为临时死区，不受外部的影响。let不允许相同作用域内重复声明一个变量。
5>为什么需要块级作用域？---场景① 内层变量可能会覆盖外层变量（由于存在变量提升）；场景②用来计数逇循环变量泄露为全局变量；
6>内层作用域可以定义外层作用域同名的变量，块级作用域的出现替换掉了原来的匿名函数IIFE；函数只能在顶层作用域和函数作用域之中声明，不能在块级作用域中声明。块级作用域必须有大括号，没有就报错；严格模式下，函数声明只能在当前作用域的顶层；
7>const命令声明的变量不能改变值，这意味着，一旦声明立即执行初始化，不能留到以后赋值，只声明不赋值就会报错；
8>es6提供了新的数据结构Set。类似于数组，但是成员的值都是唯一的，没有重复的值；本身是一个构造函数，用来生成set数据结构。
9>字符串去重：
10>Set实例的属性和方法：
①Set.prototype.constructor:构造函数，默认就是Set函数；
②Set.prototype.size:返回Set实例的成员总数；
③Set.prototype.has(value):返回一个布尔值，表示该值是否为Set的成员。
④Set.prototype.clear():清楚所有成员，没有返回值；
⑤Set.prototype.keys():返回键名的遍历器；
⑥Set.prototype.values():返回键值得遍历器；可省略valuse方法，直接用for...of 循环遍历set。
⑦Set.prototype.entries():返回键值对的遍历器；
⑧Set.prototype.forEach():使用回调函数遍历每个成员；语法：forEach(function（value,key,集合本身--可省略）);
⑨
11>promise对象：
promise是异步编程的一种解决方案，可以获取异步操作的消息，提供统一的API，是一个容器，保存着未来才会结束的事件；对象的状态不受外界的影响，一旦状态改变，就不会在变，从pending(进行中)变成fulfilled(已成功) 和从 pending变为rejected(已失败)
缺点：一旦新建就会立即执行，无法中途取消。如果不设置回调函数，promise内部会抛出错误，但是不会反应到外部，pending状态时无法无法得知进展到哪一个阶段；
promise构造函数接收一个函数作为参数，改函数有两个参数，resolve 和reject，他们是两个函数由JavaScript引擎提供，不用自己部署；resolve函数的作用是将promise对象的状态从未完成变为成功（pending--resolved）；reject函数的作用是将promise对象的状态从未完成变成失败（pending--rejected）
16、VUE项目中给列表组件绑定key的作用：
答：key是给每一个vnode的唯一id，可以依靠key更准确，更快的拿到原来节点中对应节点，否则如果对节点进行了增删操作，节点无变化，但是节点的内容发生了更新；绑定唯一的id后key就无法复用了，利用key的唯一性生成map对象来获取对应节点；
17、防抖节流的概念，有什么区别，如何实现
防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算事件；
实现：每次触发事件时，都取消之前的延时调用方法，或者清定时器；
节流：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率
实现：每次触发事件时都判断当前是否由等待执行的延时函数；
18、Set、Map、WeakSet、WeakMap之间的区别
Set：成员唯一、无序且不重复；可以遍历，方法有add、delete、has； [value,value],键值与键名是一致的，可以理解为没有键名；
WeakSet：成员都是对象；成员都是弱引用，可以被垃圾回收机制回收，可以用来保存dom节点，不容易造成内存泄漏；不能遍历，方法有add、delete、has
Map：本质上是键值对的集合，类似集合；可以遍历，方法很多，可以跟个数据格式转换；
WeakMap：只接受对象作为键名，null除外，不接受其他类型的值作为键名；弱引用，键值任意，键名指向的对象可以被垃圾回收机制回收，不能遍历；
19、事件循环中函数的执行顺序问题（async、await、setTimeout、Promise函数）
任务队列：js分为同步任务和异步任务；
同步任务都在主线程上执行，形成一个执行栈，主线程外事件触发线程管理一个任务队列，异步任务就会注册回调函数，存放到任务队列中去，一旦主线程执行栈中的所有同步任务执行完毕，就会读取任务队列，将可运行的异步任务添加到可执行栈中执行；
一个eventloop中可以有一个或者多个taskqueue 一个任务队列就是一个任务集合；每一个任务都有一个任务源，源自同一个tasksource 的task必须放到同一个任务队列，从不同源来的则被添加到不同队列。setTimeout/Promise等API便是任务源，进入任务队列的就是他们制定的具体执行任务；
宏任务：每次执行栈执行的代码就是一个宏任务（包括每次从事件队列中获取一个事件回调并放到执行栈中执行）；浏览器为了能够是的js内部的宏任务与dom任务能够有序的执行，会在一个宏任务执行结束后，在下一个宏任务执行开始前，对页面进行重新渲染
宏任务主要包含：script整体代码、setTimeout、setInterval、I/O、UI交互事件、postMessage、MessageChannel、setImmediate
微任务：可以理解是当前task执行结束后立即执行的任务，也就是在当前task任务后，下一个task之前，在渲染之前；所以微任务的响应速度相比setTimeout会更快，无需等渲染，也就是说，在某一个宏任务执行完毕后，就会在它执行期间产生的所有微任务都执行完毕（渲染前）。
微任务主要含：Promise.then 、MutationObserver、Process.nextTick
运行机制：每进行一次循环操作称之tick，每一次tic的步骤如下：
执行一个宏任务，栈中没有就从任务队列中获取；
执行过程中如果遇到微任务，就将它添加到微任务的任务队列中；
宏任务执行完毕后，立即执行当前微任务队列中的所有微任务；
当前微任务执行完毕开始检查渲染，然后GUI线程接管渲染；
渲染完成后，js线程继续接管，开始下一个宏任务
Promise和async中的立即执行：Promise中的异步体现在then和catch中，所以写在Promise中的代码是被当做同步任务立即执行的，而在async/await中，在await出现前，其中的代码也是立即执行的，那么出现await，后面的表达式会先执行一遍，将await后面的代码加入到微任务中，然后就会跳出整个async函数来执行后面的代码。（await其实就是微任务）
执行顺序为：宏任务>执行栈>微任务
script代码先执行，遇见async/await时，await前的代码会立即执行，awit后的表达式会先执行，awit后的代码会加入到微任务队列中去，接着会跳出async；
20、js的异步发展历程以及优缺点
答：①回调函数：缺点：不能用try catch捕获错误，不能return；
②promise 为了解决callback的问题产生的。实现链式调用，每次then返回的都是一个全新的promise，如果我们在then中return，return的结果会被promise的resolve()包装。缺点：无法取消promise，错误需要回调函数来捕捉；
③Generator：可以控制函数的执行，可以配合co函数库使用
④Async/await异步的终极解决方案：await会导致性能上的降低；
⑤promise构造函数是同步执行的，then方法是异步执行的；
21、npm安装机制，为什么输入npm install 就可以自动安装对应的模块？
答：npm安装机制：发出npm install命令后会查询node_modules目录之中是否已经存在指定的模块，若存在，则不需要重新安装，若不存在，npm向registry查询模块压缩的网址；放在根目录.npm目录里；解压压缩到当前node_modules目录；
npm实现原理：执行工程自身preinstall；确定首层依赖模块，也就是dependencies和devdependencies属性中直接指定的模块；接着获取模块，首先要确定其版本，package.json中往往是语义化版本，如果有信息直接拿即可，如果没有，则从仓库中获取最新版本；
22、判断数组类型的三种方法优劣分析：
解析：Object.prototype.toString.call() 每一个继承Object的对象都有一个toString的方法，如果toString方法没有被重写，会返回object type 其中type为对象的类型。但是当除了object对象外，其他类型直接使用toString方法会直接返回内容的字符串，所以需要使用call或者apply方法来改变toString方法的执行上下文；基本的数据类型都能判断，null 和undefined都可以--用于判断浏览器内置对象；
instanceof的内部机制是通过判断对象的原型链中是不是能找到类型的prototype。判断一个对象是否为数组，会判断这个对象的原型链上是否会找到对应的Array的原型，找到返回true，否者返回false；只能用来判断对象类型，原始类型不可以；并且所有对象类型instanceof object都是返回true；
Array.isArray()是es5新增的方法，当不存在的时候，可用object.prototype.toString.call()方法；性能最好；
23、观察者模式 vs 发布订阅者模式：
答：观察者模式中主体和观察者是互相感知的，发布-订阅模式是借助第三方vuex来实现调度的，发布者和订阅者之间互不感知；发布订阅者模式更适合于复杂场景；
24、cookie和token为什么token不会被劫持
答：cookie登录后后端生成一个sessionid放在cookie中返回给客户端，并且服务器一直记录着这个sessionid，客户端以后每次请求都会带上这个sessionid，服务端通过这个sessionid来验证身份之类的操作哦，所以别人拿到了cookie也就是拿到了存放的sessionid，就可以完全替代；
token：登录后后端返回一个token给客户端，客户端将这个token存储起来，每次客户端发送请求都需要开发者手动将token放到header中去，服务端每次只需要对这个token进行验证就能使用token中的信息来进行下一步操作了；
25、vue的双向数据绑定，以及view如何改变model，model如何改变view
答：vue双向数据绑定的核心是利用es5的object.defineProperty,这也就是为什么vue不能兼容ie8以下的浏览器的原因；Object.defineProperty方法会直接在一个对象上定义一个新属性，或者修改一个对象现有的属性，并返回这个对象；
Object.defineProperty(obj,prop,descriptor)---obj定义属性的对象，prop要定义或者要修改的属性；descriptor将被定义或者修改属性的描述【核心】；
observe的功能就是监测数据的变化。它是一个类，它的作用是给对象添加getter和setter，用于依赖收集和派发更新；
依赖收集getter：*const dep = new Dep()//实例化一个dep实例
*在get函数中通过dep.depend做依赖收集；
派发更新setter： *childOb = !shallow && observe(newval) //如果shllow为false的情况，会对新设置的值编程一个响应式对象；
*dep.notify() //通知所有订阅者
派发的过程：当我们的组件中对响应的数据做了修改，就会触发setter的逻辑，最后调用dep.notify()方法，他是dep的一个实例方法，具体做法是遍历依赖收集中建立的subs，然后调用每个watcher的update方法； vue在做派发更新时的一个优点，它并不会每次数据改变都会触发watcher回调，而是把这些watcher先添加到一个队列中，然后再nextTick（属于微任务）后执行watcher的run函数
vue中子组件不可以修改父组件传递的prop的值，原因是：为了保证单向数据流，易于监测数据的流动，出错容易定位，如果修改了，会触发props的set方法时发现更新，会给出警告；
Object.defineProperty的缺点：无法监控到数组下标的变化，导致通过数组下标添加元素，不能实时响应
Object.defineProperty只能劫持对象的属性，从而需要对每个对象，每个属性进行遍历，如果，属性值是对象，还需要深度遍历。Proxy可以劫持整个对象，并返回一个新的对象。
26、改造下面代码，使之输入0-9，写出你能想到的所有解法。
27、BFC的概念及其应用
答：BFC就是块级格式上下文，是页面盒模型布局的一种渲染模式，相当于一个独立的容器，里面的元素和外面的元素相互不影响，创建bfc的方式有： html根元素、float浮动、绝对定位、overflow不为visiable； display为表格布局或者弹性布局；
BFC的主要作用：清浮动、防止同一bfc容器中的相邻元素间的外边距重叠问题
28、发送数据埋点使用1X1的透明gif图片的原因：
答：①没有跨域问题，img天然支持跨域；②不会阻塞页面加载，不影响用户体验；性能更好；③gif的最低合法体积最好，相比较bmp、png、jpg而言
29、让一个div水平垂直居中：
方法一：
方法二：
方法三：
方法四：
30、对MVVM开发模式的理解：
31、canvas画布与svg的区别：
答：canvas为标量图，是通过JavaScript绘制的2D图形，不支持事件处理器，文本渲染力弱，最适合图形密集型的游戏；svg为矢量图，是通过xml描述的2D图形，支持事件处理器，不适合游戏的应用，适合带有大型渲染区域的应用程序，如百度地图，谷歌地图等；
32、px、em和rem三者的区别与联系：
答： px即Pixel像素，是长度单位，可以理解为绝对像素，像素是相对于显示器屏幕而言，IE无法调整那些使用px作为单位的字体大小；
em可以理解为相对长度，相对于当前对象内文本的字体尺寸； 10px=1em ，所以px除以10加em就可以转换为em；em的值并不是固定的，会继承父级字体的大小 ；
rem是css3中新增的一个相对单位，相对于根html元素；修改根元素的大小就成比例的调整所有字体大小；可以从浏览器字体设置中继承字体大小；
33、git和svn的区别：
答：最核心的区别git是分布式的，svn不是，即使没有网络也可以commit，查看历史版本记录，创建项目分支等操作，等网络连接再push到server端；git没有一个全局版本号，git的内容完整性要优于svn；git把内容用元数据方式存储，svn是按文件，git clone效率高；
34、webpack.json 文件中必备字段：
答：两种依赖：dependencies(生产环境包的依赖：正常运行该包所需要的依赖项) 和 devDependencies（开发环境包的依赖：开发的时候需要的依赖项）
35、遍历数组的方法：
答案：① 使用for循环遍历数组；
② 使用foreach((item,index,array)=>{回调函数}); -------没有返回值，对原数组无影响，支持IE；
③ 使用array.map(function (value,index,array){回调函数 return XXX})；有返回值，可以return出来，不影响原来的数组；
④ 使用 for of ；
⑤filter 进行遍历