ES 6 function unique(array){ return Array.from(new Set(array)) }

function Promise(executor) { let self = this; self.status = 'pending'; //等待态 self.value = https://www.it610.com/article/undefined; //成功的返回值 self.reason = undefined; //失败的原因function resolve(value) { if (self.status ==='pending') { self.status = 'resolved'; self.value = https://www.it610.com/article/value; } } function reject(reason) { if (self.status ==='pending') { self.status = 'rejected'; self.reason = reason; } } try { executor(resolve, reject); } catch (e) { reject(e); // 捕获时发生异常，就直接失败 } } //onFufiled 成功的回调 //onRejected 失败的回调 Promise.prototype.then = function (onFufiled, onRejected) { let self = this; if (self.status === 'resolved') { onFufiled(self.value); } if (self.status === 'rejected') { onRejected(self.reason); } } module.exports = Promise;

let Promise = require('./Promise'); let promise = new Promise(function (resolve, reject) { resolve(100); })promise.then(function (data) { console.log('data:', data); },function (err) { console.log('err:', err); })

涉及面试题：typeof 是否能正确判断类型？instanceof 能正确判断对象的原理是什么？

• typeof 对于原始类型来说，除了 null 都可以显示正确的类型
• typeof 对于对象来说，除了函数都会显示 object

typeof [] // 'object' typeof {} // 'object' typeof console.log // 'function'

• instanceof 能正确判断对象的原理:因为内部机制是通过原型链来判断

1. 在DOM元素中直接绑定；

2. 在JavaScript代码中绑定；

例如，为 id="demo" 的按钮绑定一个事件，显示它的 type 属性：

3. 绑定事件监听函数

button.addEventListener("click", function (evt) { ... }, true); // IE9, IE9+, Chrome, Safari, Opera button.attatchEvent("onclick", function () { ... }); // IE9-

var a = [1, 2, 3, 4, 5]; for (var i = 0; i < a.length; i++) { console.log(a[i]); }

• forEach 会遍历数组中的所有值并忽略回调函数的返回值

var a = [1, 2, 3, 4, 5]; a.forEach(function (i) { console.log(i); //1 2 3 4 5 // return true ,return false 或者不写返回值，结果都一样 })

• some(..):一直运行直到回调函数返回 true (或者“真”值).返回true时相当于在for循环里break,会提前终止循环

var a = [1, 2, 3, 4, 5]; a.some(function (i) { if (i === 3) { return true; } console.log(i); //1 2 return false; //回调函数默认返回false，这里不写也可以 });

• every(..):一直运行直到回调函数返回 false (或者“假”值).返回false时相当于在for循环里break,会提前终止循环

var a = [1, 2, 3, 4, 5]; a.every(function (i) { if (i === 3) { return false; } console.log(i); //1 2 return true; //回调函数默认返回false，这里return true必须要写，否则在遍历第一个属性值之后就会终止循环 })

• for..in循环可遍历对象的所有可枚举属性，所以一般用来遍历对象而不是数组，否则如果数组对象包含其他可枚举属性，遍历结果就会和期望结果不同

var a = [1,2,3]; a.ex = "ex"; //注意这里遍历的只是属性 for(var i in a){ console.log(i); // 0 1 2 ex }

• for..of :为了弥补for..in循环遍历数组的缺陷，ES6推出了for..of循环

• javascript是一门单线程语言
• Event Loop是javascript的执行机制
  
  
  文章图片
  

• 首先执行同步代码，这属于宏任务
• 当执行完所有同步代码后，执行栈为空，查询是否有异步代码需要执行
• 执行所有微任务
• 当执行完所有微任务后，如有必要会渲染页面
• 然后开始下一轮 Event Loop，执行宏任务中的异步代码，也就是 setTimeout 中的回调函数

• Node 的 Event Loop 分为 6 个阶段，它们会按照顺序反复运行。每当进入某一个阶段的时候，都会从对应的回调
  队列中取出函数去执行。当队列为空或者执行的回调函数数量到达系统设定的阈值，就会进入下一阶段。

• 不同之处在于，call 方法传递给调用函数的参数是逐个列出的，而 apply 则是要写在数组中。
• 核心要点： 可以看出 call 和 apply 是为了动态改变 this 而出现的，当一个 Object 没有某个方法，但是呢，其它的对象有，我们可以借助 call 或 apply 用其它对象的方法来操作。
• bind 方法传递给调用函数的参数可以逐个列出，也可以写在数组中。bind 方法与 call、apply 最大的不同就是前者返回一个绑定上下文的函数，而后者是直接执行了函数

Function.prototype.myBind = function (context) { if (typeof this !== 'function') { throw new TypeError('Error') } const _this = this const args = [...arguments].slice(1) // 返回一个函数 return function F() { // 因为返回了一个函数，我们可以 new F()，所以需要判断 if (this instanceof F) { return new _this(...args, ...arguments) } return _this.apply(context, args.concat(...arguments)) } }

• watch 是监听数据，computed 是计算属性
• computed属性只在依赖的数据发生变化时，才会重新计算，否则当多次调用computed属性时，调用的其实是缓存；watch则每调用一次就计算一次；

• beforeCreate :可以在这加个loading事件
• created:在这里结束loading,还做一些初始化，实现函数自执行
• mounted:在这里发起axios请求，拿回数据，配合路由钩子做其他事情
• updated:监听data里面所有的数据
• beforeDestory,destoryed:但组件已被删除，清空相关内容

• 父子组件：1. 父传子，用props 2. 子传父，$emit('xxx',data) $on('xxx',function(){})
• 爷孙组件，兄弟组件： eventBus var eventBus = new Vue(); eventBus.$emit() eventBus.$on()
• Vuex

Vuex是专门为Vue.js开发的全局状态管理工具

• 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty把这些属性全部转为 getter/setter。
• 在mount时，实例了一个Watcher，它会在组件渲染的过程中把“接触”过的数据属性记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

• 当你想添加新的根级响应式属性时候用

mounted () { this.$set(this.student,"age", 24) }

• 5个属性：state，getter，mutation，action，module
• state的作用：类似于Vue对象里面的data,里面存放的数据是响应式的。
• getter的作用：可以对State进行计算操作，她就是store的计算属性
• mutation的作用：是Vuex修改state的唯一推荐方法，mutation用于修改state的数据，是同步的
• action的作用：类似于 mutation, 不同在于：action 提交的是 mutation,而不是直接变更状态,action 可以包含任意异步操作
• module的作用：项目特别复杂的时候，可以让每一个模块拥有自己的state、mutation、getters、action.,使得结构清晰，方便管理。

• Vue Router是官方的路由管理器

• router.beforeEach(to,from,next) 作用主要是用于登录验证
• router.beforeResolve(to, from, next),
• router.afterEach(to, from )

• beforeRouteEnter,
• beforeRouteUpdate,
• beforeRouteLeave

• beforeEnter

• active-class 是 vue-router 模块的 router-link 组件的属性
• 使用 children 定义嵌套路由

• 在 router 目录下的 index.js 文件中，对 path 属性加上 /:id。
• 使用 router 对象的 params.id 获取

• $route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。
• $router是“路由实例”对象包括了路由的跳转方法，钩子函数等。

• 概念：导航守卫就是路由跳转过程中的一些钩子函数。

• Hash 模式只可以更改 # 后面的内容，History 模式可以通过 API 设置任意的同源 URL
• History 模式可以通过 API 添加任意类型的数据到历史记录中，Hash 模式只能更改哈希值，也就是字符串
• Hash 模式无需后端配置，并且兼容性好。History 模式在用户手动输入地址或者刷新页面的时候会发起 URL
  请求，后端需要配置 index.html 页面用于匹配不到静态资源的时候

• 一个model+view+viewModel框架，数据模型model用户操作界面view,viewModel连接这两个，
  在使用过程中，利用双向绑定技术，当Model变化时,ViewModel会自动更新，而ViewModel变化时，View也会自动变化
• 区别：vue数据驱动，通过数据来显示视图层而不是节点操作。
• 场景：数据操作比较多的场景，更加便捷

• 是对组件的扩展，通过slot插槽向组件内部指定位置传递内容，通过slot可以父子传参

• 当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略
• 为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重排现有元素
• 为了高效的更新虚拟DOM

• v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐

• 200 （成功）服务器已经成功处理了请求。
• 201 （已创建）请求成功并且服务器创建了新的资源。
• 204 （无内容）服务器成功处理了请求，但是没有返回任何内容
• 300 （多种选择）针对请求，服务器可执行多种操作。
• 301 （永久重定向）请求的网页已永久移动到新的位置。
• 302 （临时重定向）请求的资源已被分配了新的URI，希望用户能使用新的URI访问
• 303 （查看其他位置）请求对应的资源存在着另一个URI，应使用GET方法定向获取请求的资源
• 304 （未修改） 自从上次请求后，请求的网页未修改过。
• 400 （错误请求） 服务器不理解请求的语法。
• 401 （未授权） 请求要求身份验证。
• 403 （禁止） 服务器拒绝请求。
• 404 （未找到） 服务器找不到请求的网页。
• 414 （请求的 URI 过长） 请求的 URI（通常为网址）过长，服务器无法处理。
• 500 （服务器内部错误） 服务器遇到错误，无法完成请求。
• 502 （错误网关） 服务器作为网关或代理，从上游服务器收到无效响应。
• 503 （服务不可用） 服务器目前无法使用（由于超载或停机维护）。 通常，这只是暂时状态。
• 504 （网关超时） 服务器作为网关或代理，但是没有及时从上游服务器收到请求。

• GET是向服务器端请求数据，POST是向服务器提交数据。（正确的说法）

• GET URL有长度限制的，而POST没有。
• GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
• GET参数通过URL传递，POST放在消息体中。
• GET 只需要一个报文，POST需要两个及以上
• GET 幂等，POST不幂等（幂等：你发多次请求是不会改变数据库里面的东西，而POST不一定。）

• Cookie是服务器发给客户端的一段字符串，浏览器在每次访问对应域名的时候都要带上这个字符串
• Session 是会话，表示浏览器和服务器一段时间内的会话
• Session是在服务器上，Cookie是在浏览器上
• Session一般是基于Cookie实现的，把Session_ID放到Cookie里面

• Cookie一般是4K，LocalSrotage一般是5M
• Cookie一般是存用户信息的，LocalSrotage存储不重要的东西
• Cookie会发送到服务器的，LocalSrotage不会

• LocalStorage一般不会过期，SessionStorage会在Session结束时候过期

• URL重写，就是把session id直接附加在URL路径的后面。

http://www.test.com/test; jsessionid=ByOK3vjFD75aPnrF7C2HmdnV6QZcEbzWoWiBYEnLerjQ99zWpBng!-145788764

• 表单隐藏字段。就是服务器会自动修改表单，添加一个隐藏字段，以便在表单提交时能够把session id传递回服务器。

• HTTP 的URL 以http:// 开头，而HTTPS 的URL 以https:// 开头
• HTTP 标准端口是80 ，而 HTTPS 的标准端口是443
• HTTP工作于应用层，而HTTPS 的安全传输机制工作在传输层
• HTTP 无法加密，而HTTPS 对传输的数据进行加密
• HTTP无需证书，而HTTPS 需要CA机构的SSL证书

• 多路复用
  做到同一个连接并发处理多个请求，而且并发请求的数量比HTTP1.1大了好几个数量级。
  当然HTTP1.1也可以多建立几个TCP连接，来支持处理更多并发的请求，但是创建TCP连接本身也是有开销的。
• 数据压缩
  HTTP1.1不支持header数据的压缩，HTTP2.0使用HPACK算法对header的数据进行压缩，这样数据体积小了，在网络上传输就会更快
• 服务器推送
  意思是说，当我们对支持HTTP2.0的web server请求数据的时候，服务器会顺便把一些客户端需要的资源一起推送到客户端，免得客户端再次创建连接发送请求到服务器端获取。这种方式非常合适加载静态资源。
  服务器端推送的这些资源其实存在客户端的某处地方，客户端直接从本地加载这些资源就可以了，不用走网络，速度自然是快很多的。

• 客户端发送syn报文，并置发送序号为X
• 服务器发送syn+ack报文，并置发送序号为Y，确认序号为X+1
• 客户端发送ack报文，并置发送序号为Z，确认序号为Y+1

• 主动方放送Fin+ack报文，并置发送序号为Z
• 被动放发送ack报文，并置发送序号为Z，在确认序号为X+1
• 被动方发送Fin +ack 报文，并置发序号为Y，在确认序号为X
• 主动方发送Fin +ack报文，并置发送序号为X，在确认序号为Y

• 尽量减少域名，把所有的资源放在一个网站

• 连接复用，在HTTP协议请求头里面写一个keep-alive
• 如果是HTTP2.0 多路复用

• 减少cookie体积
• CacheControl
• 浏览器会同时发送多个请求

• ETag 304
• Gzip 压缩 文件越大 效果越明显

• 不能不写，不能写错

• 使用CDN，增大下载的名额
• CSS放在head,js放在body最后

• 没有被引用的对象可能是垃圾
• 多个对象相互引用形成环也是垃圾

• 标记-清除算法

从全局作用域开始，把所有遇到的变量都标记上， 然后被标记的变量引用了其他东西就再标记，一直标记到找不到新的东西，标记过程就结束了，最后把没标记的删除。

• 引用计数

ul.addEventListener('click',(e)={ if(e.targer.nodeName.toLowerCase === 'li'){ console.log('点击') } })

ul.addEventListener('click', function(e) { var el= e.target; while (target !== ul) { if (target.tagName.toLowerCase() == 'li') { console.log('li被点击了'); break; } el= el.parentNode; } })

xxx.style.left 1. 一开始是空 2. 自带px，需要parseInt

var dragging = false var position = nullxxx.addEventListener('mousedown',(e)=>{ dragging = true position = [e.clientX,e.clientY] })document.addEventListener('mousemove',(e)=>{ if(dragging === false){return} let x = e.clientX let y = e.clientY const deltaX = x - position[0] const deltaY = y - position[1] const left = parseInt(xxx.style.left || 0) const top = parseInt(xxx.style.top || 0) xxx.style.left = left + deltaX + 'px' xxx.style.top = top + deltaY + 'px' position = [x,y] })document.addEventListener('mouseup',()=>{ dragging = false })

• 恶意代码被执行，这就是XSS

div.innerHTML = userComment //userComment 内容是

• 预防
  1. 不要使用innerHTML，改成innerText
  2. 如果一定用innerHTML，就需要进行字符过滤
     • 把 < 改为< ,
     • 把 > 改为> ,
     • 把 & 改为&
     • 把 ' 改为'
     • 把 " 改为"
• 代码 div.innerHTML = userComment.replace(/>/g,'< ').replace...

function bubbleSort(arr) { var len = arr.length; for (var i = 0; i < len - 1; i++) { for (var j = 0; j < len - 1 - i; j++) { if (arr[j] > arr[j+1]) {// 相邻元素两两对比 var temp = arr[j+1]; // 元素交换 arr[j+1] = arr[j]; arr[j] = temp; } } } return arr; }

function quickSort(arr) { if(arr.length <=1){ return arr } let left = [] let right = [] let current = arr.splice(0,1) for(let i = 0; i